AJAX-サーバーの応答
onreadystatechangeプロパティ
readyStateプロパティは、XMLHttpRequestのステータスを保持します。
onreadystatechangeプロパティは、readyStateが変更されたときに実行される関数を定義します。
statusプロパティとstatusTextプロパティは、XMLHttpRequestオブジェクトのステータスを保持します。
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
onreadystatechange関数は、readyStateが変更されるたびに呼び出されます。
readyStateが4でステータスが200の場合、応答は準備完了です。
例
function loadDoc() {
var 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", true);
xhttp.send();
}
上記の例で使用されている「ajax_info.txt」ファイルは単純なテキストファイルであり、次のようになります。
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
onreadystatechangeイベントは、readyStateの変更ごとに1回ずつ、4回（1〜4回）トリガーされます。
コールバック関数の使用
コールバック関数は、パラメータとして別の関数に渡される関数です。
Webサイトに複数のAJAXタスクがある場合は、XMLHttpRequestオブジェクトを実行するための1つの関数と、AJAXタスクごとに1つのコールバック関数を作成する必要があります。
関数呼び出しには、URLと、応答の準備ができたときに呼び出す関数が含まれている必要があります。
例
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
サーバー応答プロパティ
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
サーバーの応答方法
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
responseTextプロパティ
responseTextプロパティは、サーバーの応答をJavaScript文字列として返し、それに応じて使用できます。
例
document.getElementById("demo").innerHTML = xhttp.responseText;
responseXMLプロパティ
XML HttpRequestオブジェクトには、組み込みのXMLパーサーがあります。
responseXMLプロパティは、サーバーの応答をXMLDOMオブジェクトとして返します。
このプロパティを使用すると、応答をXMLDOMオブジェクトとして解析できます。
例
ファイルcd_catalog.xmlを要求し、応答を解析します。
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
このチュートリアルのDOMの章で、XMLDOMについてさらに詳しく学習します。
getAllResponseHeaders（）メソッド
getAllResponseHeaders（）メソッドは、サーバー応答からすべてのヘッダー情報を返します。
例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
getResponseHeader（）メソッド
getResponseHeader（）メソッドは、サーバーの応答から特定のヘッダー情報を返します。
例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();