AJAX - XMLHttpRequest オブジェクト
- 前のページ AJAX 簡介
- 次のページ AJAX リクエスト
XMLHttpRequest オブジェクトは AJAX の基盤です。
- XMLHttpRequestオブジェクトを作成
- コールバック関数を定義
- XMLHttpRequest オブジェクトをオープンする
- サーバーにリクエストを送信する
XMLHttpRequestオブジェクト
すべての現代ブラウザがサポートしています。 XMLHttpRequestオブジェクト。
XMLHttpRequest オブジェクトは、バックグラウンドで Web サーバーとデータの交換に使用できます。これは、ページ全体を再読み込みせずにページの一部を更新できることを意味します。
XMLHttpRequestオブジェクトを作成
すべての現代のブラウザ（Chrome、Firefox、IE、Edge、Safari、Opera）には組み込みの XMLHttpRequestオブジェクト。
XMLHttpRequestオブジェクトを作成するための構文：
variable = new XMLHttpRequest();
コールバック関数を定義
コールバック関数は、他の関数に引数として渡される関数です。
この場合、コールバック関数には、応答が準備できたら実行するコードを含める必要があります。
xhttp.onload = function() {
// 响応が準備できたら何をしますか
}
リクエストを送信
サーバーへのリクエストを送信するために、XMLHttpRequestオブジェクトの open() および send() 方法：
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
インスタンス
// XMLHttpRequestオブジェクトを作成
const xhttp = new XMLHttpRequest();
// コールバック関数を定義
xhttp.onload = function() {
// ここでデータを使用できます
}
// リクエストを送信
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
ドメイン間のアクセス（Access Across Domains）
セキュリティの理由から、現代のブラウザはドメイン間のアクセスを許可しません。
これは、ウェブページとそれが読み込もうとしているXMLファイルが同じサーバー上に位置する必要があることを意味します。
CodeW3C.com上の例は、CodeW3C.comドメイン内に位置するXMLファイルを開いています。
上記の例を自分のウェブページの1つに使用する場合、読み込むXMLファイルは自分のサーバー上に位置する必要があります。
XMLHttpRequestオブジェクトの方法
| 方法 | 説明 |
|---|---|
| new XMLHttpRequest() | 新しいXMLHttpRequestオブジェクトを作成します。 |
| abort() | 現在のリクエストをキャンセルします。 |
| getAllResponseHeaders() | ヘッダー情報を返します。 |
| getResponseHeader() | 特定のヘッダー情報を返します。 |
| open(method, url, async, user, psw) |
リクエストを規定します。
|
| send() | GETリクエストに使用するサーバーへのリクエストを送信します。 |
| send(string) | POSTリクエストに使用するサーバーへのリクエストを送信します。 |
| setRequestHeader() | 送信するヘッダーにタグ/値対を追加します。 |
XMLHttpRequestオブジェクトの属性
| 属性 | 説明 |
|---|---|
| onload | （読み込み）リクエストを受信したときに呼び出される関数を定義します。 |
| onreadystatechange | readyState属性が変更されたときに呼び出される関数を定義します。 |
| readyState |
XMLHttpRequestの状態を保存します。
|
| responseText | テキスト形式として応答データを返します。 |
| responseXML | XMLデータとして応答データを返します。 |
| ステータス |
リクエストの状態コードを返します
完全なリストについてはアクセスしてください Http メッセージリファレンスマニュアル |
| statusText | 状態テキストを返します（例："OK"や"Not Found"） |
onload属性
XMLHttpRequestオブジェクトを使用する際、応答を受信した際に実行されるコールバック関数を定義できます。
XMLHttpRequestオブジェクトの onload この属性で関数を定義します：
インスタンス
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
複数のコールバック関数
ウェブサイトに複数のAJAXタスクがある場合、XMLHttpRequestオブジェクトを実行する関数を创建し、各AJAXタスクにコールバック関数を创建します。
関数の呼び出しにはURLと応答が準備完了した際に呼び出される関数を含める必要があります。
インスタンス
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// ここにアクションがあります
}
function myFunction2(xhttp) {
// ここにアクションがあります
}
onreadystatechange属性
readyState 属性はXMLHttpRequestの状態を保存します。
onreadystatechange 属性はreadyStateが変更された際に実行されるコールバック関数を定義します。
ステータス 属性と statusText 属性はXMLHttpRequestオブジェクトの状態を保存します。
| 属性 | 説明 |
|---|---|
| onreadystatechange | readyState属性が変更された際に呼び出される関数を定義します。 |
| readyState |
XMLHttpRequestの状態を保存します。
|
| ステータス |
リクエストの状態コードを返します
完全なリストについてはアクセスしてください Http メッセージリファレンスマニュアル |
| statusText | statusText |
ステータステキストを返します（例えば "OK" や "Not Found"）。
readyState が変更されるたびに onreadystatechange ファンクションが呼び出されます。 4 そして status が 200 時、応答が完了しました：
インスタンス
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
onreadystatechange イベントが4回（1-4）発火され、毎回 readyState が変化します。
- 前のページ AJAX 簡介
- 次のページ AJAX リクエスト
