XMLHttpRequest

すべての現代ブラウザには、サーバーからデータを要求するために内蔵されているXMLHttpRequestオブジェクトがあります。

XMLHttpRequestオブジェクト

XMLHttpRequestオブジェクトは、Webサーバーからデータを要求するために使用できます。

XMLHttpRequestオブジェクトは開発者の夢、なぜならあなたは：

  • ウェブページを更新する - ページを再読み込みしないで
  • データをサーバーから要求する - ページが読み込まれた後に
  • データをサーバーから受け取る - ページが読み込まれた後に
  • データをサーバーに送信する - バックグラウンドで

XMLHttpRequestインスタンス

以下の入力フィールドに文字を入力すると、XMLHttpRequestがサーバーに送信され、名前の提案（サーバーから）が返されます：

インスタンス

以下の入力フィールドに名前を入力してください：

名前： 提案： このチュートリアルのAJAXセクションでは、上記の例について説明しています。

XMLHttpRequestを送信する

以下は、XMLHttpRequestオブジェクトを使用する一般的なJavaScript構文です：

インスタンス

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // ドキュメントが準備完了したときに実行される典型的なアクション：
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

自分で試してみる

例解

上の例の最初の行は、以下のものを作成しました： XMLHttpRequestオブジェクト：

var xhttp = new XMLHttpRequest();

onreadystatechange 属性は、XMLHttpRequestオブジェクトの状態が変更されるたびに実行される関数を指定します：

xhttp.onreadystatechange = function()

当 readyState 属性が4で且つ status 属性が200の時、応答が準備完了です：

if (this.readyState == 4 && this.status == 200)

responseText 属性はテキスト文字列の形式でサーバーからの応答を返します。

テキスト文字列を使用してウェブページを更新できます：

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

このチュートリアルの AJAX 章節では、XMLHttpRequest オブジェクトについてもっと学ぶことができます。