JavaScript での Ajax の使用

Web アプリケーションがますます複雑になるにつれて、動的 Web ページの実装に非同期 JavaScript および XML (Ajax) テクノロジが使用されることが増えています。 Ajax を使用すると、ページ全体を更新しなくても、バックグラウンドで非同期リクエストを送信することで Web ページを動的に更新できます。この記事では、JavaScript で Ajax を使用する方法を説明します。

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

XMLHttpRequest オブジェクトは Ajax の中核です。 HTTP リクエストの送信とサーバー応答の受信を担当します。 JavaScript では、XMLHttpRequest オブジェクトを作成して Ajax リクエストを開始します。

var xhr = new XMLHttpRequest();

ブラウザが XMLHttpRequest をサポートしていない場合は、以下に示すように ActiveXObject の使用を検討できます。

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Send HTTP request

When XMLHttpRequestオブジェクトが作成されたら、リクエストの URL とメソッドを設定し、リクエストを送信します。

xhr.open('GET', 'http://example.com/data', true);
xhr.send();

上記のコードでは、xhr.open() メソッドを使用して GET モードで URL を開きます。 3 番目のパラメータは、非同期リクエストを示します。

リクエストが POST モードで送信されることを示すには、次のコードを使用できます:

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

上記のコードでは、xhr.setRequestHeader() メソッドを使用して HTTP ヘッダーを設定します。情報を取得し、send() メソッドを使用してリクエストを送信します。

3. フォーム データの送信

フォーム データを送信する必要がある場合は、FormData オブジェクトを使用できます。

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

上記のコードでは、FormData オブジェクトを使用してフォーム データを送信し、send メソッドを使用してリクエストを送信します。

4. サーバー応答の処理

XMLHttpRequest の readStateChange イベントがトリガーされると、HTTP 応答コードと応答テキストをチェックすることで、要求が成功したかどうかを判断できます。一般的なステータス コードは次のとおりです。

• 200: OK
• 404: ページが見つかりません
• 500: サーバー エラー

以下は単純なハンドラー関数です。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

上記のコードでは、XHR.readyState プロパティを使用し、XMLHttpRequest オブジェクトのステータスを返します。 readyState が 4 の場合、応答は完了しています。

xhr.status プロパティは、HTTP ステータス コードを返します。ステータス コード 200 は成功を示します。

xhr.responseText プロパティには、サーバー応答のテキストが含まれます。

5. エラーの処理

サーバーが 200 以外の HTTP ステータス コードで応答した場合、リクエストは失敗したとみなされます。エラーが発生した場合は、プロンプトが表示された後で操作を再試行できます。

xhr.onerror = function() {
  alert('请求失败，请重试');
};

上記のコードでは、xhr.onerror 属性とalert() メソッドを使用してエラー メッセージを表示します。

6. リクエストのキャンセル

Ajax リクエストをキャンセルする必要がある場合は、xhr.abort() メソッドを使用できます。

xhr.abort();

上記のコードでは、xhr.abort() メソッドを使用してリクエストをキャンセルします。

概要

上記は、JavaScript における Ajax の基本的な使用法です。 Ajax を使用すると、Web ページを動的に更新できるため、Web アプリケーションが使いやすくなり、応答性が向上します。 Ajax を使用する場合は、必ず非同期リクエストを使用してください。

以上がJavaScript での Ajax の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。