JavaScript 関数を使用して AJAX リクエストとデータ取得を実装する

JavaScript 関数を使用して AJAX リクエストとデータ取得を実装する

1. AJAX の概要
AJAX (Asynchronous JavaScript and XML) は、AJAX を実装するために使用されるメソッドですWeb ページ上 非同期データ対話テクノロジー。 AJAX を介して、ページ全体を更新しなくても、サーバーにリクエストを送信し、サーバーから返されたデータを取得できます。これにより、ユーザー エクスペリエンスが向上し、ページがよりインタラクティブで動的になります。

2. AJAX リクエストの実装手順

1. XMLHttpRequest オブジェクトを作成します。
2. リクエストメソッドやURL、非同期かどうかなどを設定します。
3. サーバーから返されたデータを処理するコールバック関数を登録します。
4. リクエストを送信します。
5. サーバーから返されたデータを処理します。

3. JavaScript 関数を使用して AJAX リクエストを実装するコード例

1. XMLHttpRequest オブジェクトの作成

   function createHttpRequest() {
     if (window.XMLHttpRequest) {
    // 支持现代浏览器
    return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
    // 兼容IE6及更早版本
    return new ActiveXObject("Microsoft.XMLHTTP");
     } else {
    alert("浏览器不支持AJAX！");
    return null;
     }
   }

2. 送信GET リクエストを送信してデータを取得

   function getData(url, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send();
     }
   }

3. POST リクエストを送信してデータを取得

   function postData(url, data, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send(data);
     }
   }

4. 使用例

次のようなものがあるとします。 a バックエンド API インターフェイスは、JSON 形式でデータを返すことができます。上記のコードを使用して、AJAX リクエストを作成し、データを取得します。

1. #GET リクエストを使用してデータを取得します

   var url = "http://example.com/api/getData";
   getData(url, function(response) {
     // 在这里处理获取到的数据
     console.log(response);
   });

#POST リクエストを使用してデータを送信し、戻り結果を取得します

2. var url = "http://example.com/api/submitData";
   var data = "username=John&password=123456";
   postData(url, data, function(response) {
     // 在这里处理返回的结果
     console.log(response);
   });

概要:

JavaScript 関数を使用して AJAX リクエストとデータ取得を実装すると、Web ページをより動的でインタラクティブにすることができます。 XMLHttpRequest オブジェクトを作成し、リクエスト メソッドと URL を設定し、リクエストを送信し、サーバーから返されたデータを処理することで、非同期データ インタラクションの機能を実現できます。 GET リクエストを使用してデータを取得するか、POST リクエストを使用してデータを送信し、サーバーから返された結果をコールバック関数で処理することで、Web ページがサーバーと対話してデータを動的に表示できるようになります。

以上がJavaScript 関数を使用して AJAX リクエストとデータ取得を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。