AJAX - サーバー応答

コース推薦：

readyState onreadystatechange属性

onreadystatechange 属性はXMLHttpRequestの状態を保持

status 属性はreadyStateが変更されたときに実行される関数を定義 Httpメッセージリファレンスマニュアル 属性と

属性 説明
onreadystatechange 属性はXMLHttpRequestオブジェクトの状態を保持
readyState

readyState属性が変更されたときに呼び出される関数を定義

  • XMLHttpRequestの状態を保存
  • 0: リクエストが初期化されていません
  • 1: サーバーコネクションが確立
  • 2: リクエストが受信
  • 3: リクエストが処理中
status
  • 4: リクエストが完了し、応答が準備完了
  • 200: "OK"
  • 403: "禁止"

404: "ページが見つかりません" 完全なリストについては、以下にアクセスしてください
Httpメッセージリファレンスマニュアル statusText

ステータステキストを返します（例えば「OK」または「Not Found」） 毎回

readyStateが変更されたときにonreadystatechange関数が呼び出されます。 readyState です。 4、status です。 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(); 
};

自分で試してみる

注：onreadystatechange 5回（0-4）にトリガーされ、それぞれ readyState すべてが変更されます。

コールバック関数の使用

コールバック関数は、他の関数に引数として渡される関数です。

もしあなたのウェブサイトに複数のAJAXタスクがある場合、XMLHttpRequestオブジェクトを実行する関数と、各AJAXタスクのコールバック関数を作成するべきです。

この関数は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) {
  // 行動ここに
 }; 
function myFunction2(xhttp) {
  // 行動ここに
 };

自分で試してみる

サーバ応答属性

属性 説明
responseText 文字列形式の応答データを取得します。
responseXML XMLデータ形式の応答データを取得します。

サーバ応答メソッド

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

responseText属性

responseText 属性でサーバ応答をJavaScript文字列の形式で返します。したがって、以下のように使用できます：

インスタンス

document.getElementById("demo").innerHTML = xhttp.responseText;

自分で試してみる

responseXML属性

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

ResponseXML 属性でXML DOMオブジェクトとしてサーバ応答を返します。

この属性を使用して、応答を解析XML DOMオブジェクト：

インスタンス

リクエストファイル music_list.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", "music_list.xml", true);
xhttp.send();

自分で試してみる

このチュートリアルの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();
  };
};

自分で試してみる

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();

自分で試してみる