5 つの一般的な Ajax 送信方法を理解する

AJAX の一般的に使用される 5 つの送信メソッドを理解するには、具体的なコード例が必要です。

AJAX (非同期 JavaScript および XML) は、対話型 Web アプリケーションの作成に使用されるメソッドです。 。 テクノロジー。これにより、ページ全体を更新せずに、サーバーとの非同期通信を通じて部分的なページ コンテンツを更新できます。 AJAX は、ユーザーに優れたインタラクティブなエクスペリエンスを提供するために、最新の Web 開発で広く使用されています。

AJAX では、データの送信は非常に重要な部分です。以下では、一般的に使用される 5 つの AJAX 送信メソッドと、各メソッドの具体的なコード例を紹介します。

1. GET メソッドによるデータの送信:
   GET は、最も一般的な HTTP リクエスト メソッドの 1 つで、URL の末尾にパラメータを追加し、キーの形式でサーバーに渡します。値のペア。 GET メソッドはデータの取得には適していますが、機密情報の処理には適していません。以下は、GET を使用してデータを送信するコード例です:

var xmlhttp = new XMLHttpRequest();
var url = "server.php?name=John&age=20";
xmlhttp.open("GET", url, true);
xmlhttp.send();

2. POST 経由でデータを送信:
   POST は、データ パラメーターをサーバーの に送信するもう 1 つの一般的な HTTP リクエスト メソッドです。リクエスト本文。 GET メソッドと比較して、POST メソッドは URL にデータが表示されないため、機密情報の処理に適しています。以下は、POST メソッドを使用してデータを送信するコード例です。

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var params = "name=John&age=20";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(params);

3. FormData メソッドはデータを送信します。
   FormData は、フォーム データの作成に使用される組み込み JavaScript オブジェクトです。キーと値のペアを追加してフォーム データを構築し、サーバーに送信できます。以下は、FormData メソッドを使用してデータを送信するコード例です。

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var formData = new FormData();
formData.append("name", "John");
formData.append("age", "20");
xmlhttp.open("POST", url, true);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(formData);

4. JSON メソッドを使用したデータの送信:
   JSON (JavaScript Object Notation) は軽量のデータ交換形式です。 AJAX で一般的に使用されるデータ形式でもあります。 JSON データは、JSON.stringify() メソッドを通じて JavaScript オブジェクトから JSON 文字列に変換し、POST を通じてサーバーに送信できます。以下は、JSON を使用してデータを送信するコード例です:

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var data = {name: "John", age: 20};
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(JSON.stringify(data));

5. XML を使用したデータの送信:
   場合によっては、データを送信するために XML データ形式を使用する必要があります。 AJAX では、XMLHttpRequest オブジェクトを作成し、XML データを操作することでこれを実現できます。 XML を使用してデータを送信するコード例を次に示します。

var xmlhttp = new XMLHttpRequest();
var url = "server.php";
var xmlData = '<?xml version="1.0" encoding="UTF-8"?><data><name>John</name><age>20</age></data>';
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "text/xml");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // 请求成功后的处理逻辑
    console.log(xmlhttp.responseText);
  }
};
xmlhttp.send(xmlData);

上記は、一般的に使用される 5 つの AJAX 送信メソッドの具体的なコード例です。これらの送信方法を理解して実践することで、AJAX テクノロジーをより適切に使用してデータを処理し、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。

以上が5 つの一般的な Ajax 送信方法を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。