AJAX - XMLHttpRequestオブジェクト
AJAXの要はXMLHttpRequestオブジェクトです。
- XMLHttpRequestオブジェクトを作成する
- コールバック関数を定義する
- XMLHttpRequestオブジェクトを開く
- サーバーにリクエストを送信する
XMLHttpRequestオブジェクト
最新のブラウザはすべてこのXMLHttpRequestオブジェクトをサポートしています。
このXMLHttpRequestオブジェクトは、バックグラウンドでWebサーバーとデータを交換するために使用できます。これは、ページ全体をリロードしなくても、Webページの一部を更新できることを意味します。
XMLHttpRequestオブジェクトを作成する
最新のすべてのブラウザー(Chrome、Firefox、IE、Edge、Safari、Opera)には組み込みのXMLHttpRequestオブジェクトがあります。
XMLHttpRequest:オブジェクトを作成するための構文
コールバック関数を定義する
コールバック関数は、パラメーターとして別の関数に渡される関数です。
この場合、コールバック関数には、応答の準備ができたときに実行するコードが含まれている必要があります。
リクエストを送る
サーバーにリクエストを送信するには、XMLHttpRequestオブジェクトのopen()メソッドとsend()メソッドを使用できます。
例
ドメイン間のアクセス
セキュリティ上の理由から、最近のブラウザではドメインをまたがるアクセスが許可されていません。
これは、WebページとWebページがロードしようとするXML ファイルの両方が同じサーバー上に存在する必要があることを意味します。
W3Schoolsの例はすべて、W3SchoolsドメインにあるXMLファイルを開きます。
上記の例を独自のWebページで使用する場合、ロードするXMLファイルは独自のサーバーに配置する必要があります。
XMLHttpRequestオブジェクトのメソッド
|
Method |
Description |
|---|---|
| new XMLHttpRequest() | 新しいXMLHttpRequestオブジェクトを作成します |
| abort（） | 現在のリクエストをキャンセルします |
| getAllResponseHeaders() | ヘッダ情報を返す |
| getResponseHeader() | 特定のヘッダー情報を返します |
| open（method、URL、async、user、psw) | リクエストを指定します method:リクエストタイプGETまたはPOST async:true(非同期)またはfalse (同期) user:オプションのユーザー名 psw:オプションのパスワード |
| send（） | リクエストをサーバーに送信します GETリクエストに使用 |
| send（string) | リクエストをサーバーに送信します POSTリクエストに使用 |
| setRequestHeader() | 送信するヘッダーにラベル/値のペアを追加します |
XMLHttpRequestオブジェクトのプロパティ
|
Property |
Description |
|---|---|
| onload | リクエストが受信された(ロードされた)ときに呼び出される関数を定義します |
| onreadystatechange | readyStateプロパティが変更されたときに呼び出される関数を定義します |
| readyState | XMLHttpRequestのステータスを保持します 0: リクエストは初期化されていません |
| responseText | 応答データを文字列として返します |
| responseXML | 応答データをXMLデータとして返します |
| status | リクエストのステータス番号を返します 200:"OK" |
| statusText | ステータステキストを返します(例:"OK"または"Not Found") |
onloadプロパティ
このXMLHttpRequestオブジェクトを使用すると、リクエストが応答を受け取ったときに実行されるコールバック関数を定義できます。
この関数は、XMLHttpRequestオブジェクトのonloadプロパティで定義されます。
例
複数のコールバック関数
Webサイトに複数のAJAXタスクがある場合は、オブジェクトを実行するための関数を1つ作成しXMLHttpRequest、AJAX タスクごとにコールバック関数を1つ作成する必要があります。
関数呼び出しには、URLと、応答の準備ができたときに呼び出す関数を含める必要があります。
例
onreadystatechangeプロパティ
このreadyStateプロパティは、XMLHttpRequest のステータスを保持します。
このonreadystatechangeプロパティは、readyStateが変化したときに実行されるコールバック関数を定義します。
プロパティstatusとstatusTextプロパティはXMLHttpRequestオブジェクトのステータスを保持します。
|
Property |
Description |
|---|---|
| onreadystatechange | readyStateプロパティが変更されたときに呼び出される関数を定義します |
| readyState | XMLHttpRequestのステータスを保持します 0: リクエストは初期化されていません |
| status | 200:"OK" 403:"禁止します" |
| statusText | ステータステキストを返します(例:"OK"または"Not Found") |
このonreadystatechange関数は、readyStateが変化するたびに呼び出されます。
readyStateが4でステータスが200の場合、応答は準備完了です。
例
イベントonreadystatechangeは、readyStateが変化するたびに1回ずつ、計4回(1～4)トリガーされます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。