AJAX - Server レスポンス

❮ 前章へ 次章へ ❯
onreadystatechange statusプロパティとstatusText

onreadystatechange プロパティ

readyState プロパティには、XMLHttpRequestのステータスが設定されます。

onreadystatechange プロパティは、readyStateが変更されたときに実行する関数を定義します。

statusプロパティとstatusTextプロパティには、XMLHttpRequestオブジェクトのステータスが設定されます。

プロパティ 説明
onreadystatechange readyStateプロパティが変更されたときに呼び出する関数を定義します。
readyState XMLHttpRequestのステータスが設定されます。
0: リクエストが初期化されていません
1: サーバー接続が確立されました
2: リクエストを受信しました
3: リクエストを処理中
4: リクエストが完了し、レスポンスが準備完了です
status 200: "OK"
403: "Forbidden"
404: "Page not found"
完全なリストは、Http メッセージ・リファレンスをご覧ください。
statusText ステータス・テキスト（"OK"または"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();
}
Try it Yourself »

注: onreadystatechangeイベントは、readyStateが変るたびに1回、合計 5回（0〜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
}
Try it Yourself »

Server レスポンス・プロパティ

プロパティ 説明
responseText レスポンスデータを文字列として取得する
responseXML レスポンスデータをXMLデータとして取得する

Server レスポンス・メソッド

メソッド 説明
getResponseHeader() サーバ・リソースから指定のヘッダ情報を返します
getAllResponseHeaders() サーバ・リソースからすべてのヘッダ情報を返します

responseText プロパティ

responseText プロパティは、サーバ・レスポンスをJavaScript文字列として返します。 それに従い、レスポンス文字列を使用できます：

例

document.getElementById("demo").innerHTML = xhttp.responseText;
Try it Yourself »

responseXML プロパティ

XML HttpRequestオブジェクトには、組込みのXMLパーサがあります。

responseXMLプロパティは、サーバ・レスポンスをXML DOMオブジェクトとして返します。

このプロパティを使用すると、レスポンスをXML DOMオブジェクトとしてパースできます：

例

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();
Try it Yourself »

このチュートリアルのDOMの章で、XML DOMについてもっと学習します。

getAllResponseHeaders() メソッド

getAllResponseHeaders()メソッドは、サーバ・レスポンスから全ヘッダ情報を返します。

例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
    this.getAllResponseHeaders();
  }
};
Try it Yourself »

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();
Try it Yourself »

❮ 前章へ 次章へ ❯