XMLHttpRequestオブジェクト_
最新のブラウザにはすべて、サーバーからデータを要求するためのXMLHttpRequestオブジェクトが組み込まれています。
すべての主要なブラウザーには、XMLにアクセスして操作するための組み込みのXMLパーサーがあります。
XMLHttpRequestオブジェクト
XMLHttpRequestオブジェクトを使用して、Webサーバーからデータを要求できます。
XMLHttpRequestオブジェクトは、次のことができるため、開発者の夢です。
- ページをリロードせずにWebページを更新する
- サーバーにデータをリクエストする-ページが読み込まれた後
- サーバーからデータを受信する-ページが読み込まれた後
- サーバーにデータを送信する-バックグラウンドで
XMLHttpRequestの例
以下の入力フィールドに文字を入力すると、XMLHttpRequestがサーバーに送信され、いくつかの名前の提案が（サーバーから）返されます。
例
Start typing a name in the input field below:
Suggestions:
XMLHttpRequestの送信
最新のブラウザにはすべて、XMLHttpRequestオブジェクトが組み込まれています。
これを使用するための一般的なJavaScript構文は、次のようになります。
例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
XMLHttpRequestオブジェクトの作成
上記の例の最初の行は、XMLHttpRequestオブジェクトを作成します。
var xhttp = new XMLHttpRequest();
onreadystatechangeイベント
readyStateプロパティは、XMLHttpRequestのステータスを保持します。
onreadystatechangeイベントは、readyStateが変更されるたびにトリガーされます。
サーバー要求中に、readyStateが0から4に変更されます。
0：リクエストが初期化されていません
1：サーバー接続が確立されています
2：リクエストが受信されました
3：リクエストの処理
4：リクエストが終了し、応答の準備ができています
onreadystatechangeプロパティで、readyStateが変更されたときに実行される関数を指定します。
xhttp.onreadystatechange = function()
readyStateが4でステータスが200の場合、応答は準備完了です。
if (this.readyState == 4 && this.status == 200)
XMLHttpRequestのプロパティとメソッド
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | 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 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
ドメイン間でのアクセス
セキュリティ上の理由から、最近のブラウザはドメイン間でのアクセスを許可していません。
これは、ロードしようとするWebページとXMLファイルの両方が同じサーバー上にある必要があることを意味します。
W3Schoolsの例はすべて、W3SchoolsドメインにあるXMLファイルを開きます。
上記の例を独自のWebページのいずれかで使用する場合は、ロードするXMLファイルを独自のサーバーに配置する必要があります。
responseTextプロパティ
responseTextプロパティは、応答を文字列として返します。
応答をテキスト文字列として使用する場合は、responseTextプロパティを使用します。
例
document.getElementById("demo").innerHTML = xmlhttp.responseText;
responseXMLプロパティ
responseXMLプロパティは、応答をXMLDOMオブジェクトとして返します。
応答をXMLDOMオブジェクトとして使用する場合は、responseXMLプロパティを使用します。
例
ファイルcd_catalog.xmlを要求し、その応答をXMLDOMオブジェクトとして使用します。
xmlDoc = xmlhttp.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;
GETまたはPOST？
GETはPOSTよりも単純で高速であり、ほとんどの場合に使用できます。
ただし、次の場合は常にPOSTリクエストを使用してください。
- キャッシュされたファイルはオプションではありません（サーバー上のファイルまたはデータベースを更新します）
- サーバーに大量のデータを送信する（POSTにはサイズ制限はありません）
- ユーザー入力（不明な文字を含む可能性があります）を送信するPOSTは、GETよりも堅牢で安全です
URL-サーバー上のファイル
open（）メソッドのurlパラメーターは、サーバー上のファイルへのアドレスです。
xmlhttp.open("GET", "xmlhttp_info.txt", true);
ファイルには、.txtや.xmlなどの任意の種類のファイル、または.aspや.phpなどのサーバースクリプトファイル（応答を返送する前にサーバーでアクションを実行できます）を使用できます。
非同期-正誤問題？
リクエストを非同期で送信するには、open（）メソッドのasyncパラメーターをtrueに設定する必要があります。
xmlhttp.open("GET", "xmlhttp_info.txt", true);
非同期でリクエストを送信することは、Web開発者にとって大きな改善です。サーバーで実行されるタスクの多くは非常に時間がかかります。
非同期で送信することにより、JavaScriptはサーバーの応答を待つ必要はありませんが、代わりに次のことができます。
- サーバーの応答を待っている間に他のスクリプトを実行する
- 応答の準備ができたら応答を処理します
非同期= true
async = trueを使用する場合、onreadystatechangeイベントで応答の準備ができたときに実行する関数を指定します。
例
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
非同期= false
async = falseを使用するには、open（）メソッドの3番目のパラメーターをfalseに変更します。
xmlhttp.open("GET", "xmlhttp_info.txt", false);
async = falseを使用することはお勧めしませんが、いくつかの小さなリクエストではこれで問題ありません。
サーバーの応答の準備ができるまで、JavaScriptは実行を継続しないことに注意してください。サーバーがビジーまたは低速の場合、アプリケーションはハングまたは停止します。
注： async = falseを使用する場合は、onreadystatechange関数を記述しないでください。send（）ステートメントの後にコードを配置するだけです。
例
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XMLパーサー
最新のブラウザにはすべて、XMLパーサーが組み込まれています。
XMLドキュメントオブジェクトモデル（XML DOM）には、XMLにアクセスして編集するための多くのメソッドが含まれています。
ただし、XMLドキュメントにアクセスする前に、XMLDOMオブジェクトにロードする必要があります。
XMLパーサーは、プレーンテキストを読み取り、それをXMLDOMオブジェクトに変換できます。
テキスト文字列の解析
この例では、テキスト文字列をXML DOMオブジェクトに解析し、JavaScriptを使用してそこから情報を抽出します。
例
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
古いブラウザ（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");
}
古いバージョンのInternetExplorer（IE5およびIE6）は、DOMParserオブジェクトをサポートしていません。
IE5およびIE6を処理するには、ブラウザーがDOMParserオブジェクトをサポートしているかどうかを確認するか、ActiveXObjectを作成します。
例
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
その他の例
取得します
リソース（ファイル）のヘッダー情報を取得します。
取得するリソース（ファイル）の特定のヘッダー情報を取得します。
するユーザーが入力フィールドに文字を入力しているときに、WebページがWebサーバーと通信する方法。
するWebページがXMLHttpRequestオブジェクトを使用してデータベースから情報を取得する方法。
取得するXMLHttpRequestを作成して、XMLファイルからデータを取得し、そのデータをHTMLテーブルに表示します。