XML HttpRequest
最新のブラウザにはすべて、サーバーからデータを要求するためのXMLHttpRequestオブジェクトが組み込まれています。
XMLHttpRequestオブジェクト
XMLHttpRequestオブジェクトを使用して、Webサーバーからデータを要求できます。
XMLHttpRequestオブジェクトは、次のことができるため、開発者の夢です。
- ページをリロードせずにWebページを更新する
- サーバーにデータをリクエストする-ページが読み込まれた後
- サーバーからデータを受信する-ページが読み込まれた後
- サーバーにデータを送信する-バックグラウンドで
XMLHttpRequestの例
以下の入力フィールドに文字を入力すると、XMLHttpRequestがサーバーに送信され、いくつかの名前の提案が（サーバーから）返されます。
例
上記の例は、このチュートリアルのAJAXの章で説明されています。
XMLHttpRequestの送信
XMLHttpRequestオブジェクトを使用するための一般的なJavaScript構文は、次のようになります。
例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
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プロパティは、サーバーの応答をテキスト文字列として返します。
テキスト文字列を使用して、Webページを更新できます。
document.getElementById("demo").innerHTML = xhttp.responseText;
このチュートリアルのAJAXの章で、XMLHttpRequestオブジェクトについてさらに詳しく学習します。
古いバージョンのInternetExplorer（IE5およびIE6）
古いバージョンのInternetExplorer（IE5およびIE6）は、XMLHttpRequestオブジェクトをサポートしていません。
IE5およびIE6を処理するには、ブラウザーがXMLHttpRequestオブジェクトをサポートしているかどうかを確認するか、ActiveXObjectを作成します。
例
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}