一般的な Ajax 送信メソッドは 5 つあります

Ajax の 5 つの一般的な送信方法を学習するには、具体的なコード例が必要です。

はじめに:
Web アプリケーションの開発と、対話性と現実性に対するユーザーの要求に伴い、機能への要求が高まるにつれ、Ajax テクノロジはフロントエンド開発に不可欠な部分になりました。 Ajax (Asynchronous JavaScript and XML) は、JavaScript を使用した非同期通信技術であり、ページ全体を更新せずにサーバーとのデータ対話を実現し、ページのコンテンツを更新できます。 Ajax ではデータの送信が避けられないため、この記事では 5 つの一般的な送信方法を紹介し、具体的なコード例を示します。

1. GET メソッド
GET メソッドは最も一般的な送信メソッドであり、データは通常 URL を通じて転送されます。つまり、データは URL の末尾に追加されます。以下は、GET メソッドのコード例です。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api?param1=value1&param2=value2', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理返回的数据
  }
};
xhr.send();

2. POST メソッド
POST メソッドは、リクエストの一部としてデータをサーバーに送信します。データは URL には公開されません。以下は、POST メソッドのコード例です。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理返回的数据
  }
};
xhr.send('param1=value1&param2=value2');

3. FormData メソッド
FormData は、フォーム データを構築するために使用される API であり、フォーム データをキーと値のペアに簡単に変換できます。以下は、FormData メソッドのコード例です。

var formData = new FormData();
formData.append('param1', 'value1');
formData.append('param2', 'value2');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理返回的数据
  }
};
xhr.send(formData);

4. JSON メソッド
JSON (JavaScript Object Notation) は、フロントエンドおよびバックエンドのデータ送信に一般的に使用される軽量のデータ交換形式です。以下は、JSON モードのコード例です。

var data = {
  param1: 'value1',
  param2: 'value2'
};

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理返回的数据
  }
};
xhr.send(JSON.stringify(data));

5. XML メソッド
XML (eXtensible Markup Language) は、構造化データの保存と送信に使用されるマークアップ言語です。 XML コードの例を次に示します。

var xml = '<data><param1>value1</param1><param2>value2</param2></data>';

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'text/xml');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理返回的数据
  }
};
xhr.send(xml);

概要:
この記事では、GET、POST、FormData、JSON、XML を含む、Ajax の 5 つの一般的な送信メソッドを紹介します。各メソッドでは、読者がこれらのメソッドを理解し、使用できるように、具体的なコード例が提供されています。実際の開発では、ニーズとシナリオに基づいて適切なデータ送信方法を選択し、ユーザー エクスペリエンスとページのパフォーマンスを向上させることができます。

以上が一般的な Ajax 送信メソッドは 5 つありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。