AJAX - XMLHttpRequest
- 前のページ AJAX XMLHttp
- 次のページ AJAX レスポンス
XMLHttpRequest オブジェクトはサーバーとデータの交換に使用されます。
サーバーにリクエストを送信する
サーバーにリクエストを送信する場合、XMLHttpRequest オブジェクトの open() および send() 方法：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| メソッド | 説明 |
|---|---|
| open(method, url, async) |
リクエストのタイプを指定します
|
| send() | サーバーにリクエストを送信する場合（GET 用） |
| send(string) | サーバーにリクエストを送信する場合（POST 用） |
GET か POST？
GET は POST よりもシンプルで速く、ほとんどの状況で使用できます。
ただし、以下の状況では常に POST を使用してください：
- キャッシュファイルはオプションではありません（サーバー上のファイルやデータベースを更新する場合）
- 大量のデータをサーバーに送信する場合（POST にはサイズ制限がありません）
- ユーザー入力（未知の文字も含む）を送信する場合、POST は GET よりも強力で安全です
GET リクエスト
一つの単純な GET リクエスト：
インスタンス
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
上記の例では、キャッシュされた結果が得られる可能性があります。このような状況を避けるために、ユニークな ID を URL に追加してください：
インスタンス
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GET メソッドを使用して情報を送信する必要がある場合は、以下の情報を URL に追加してください：
インスタンス
xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();
POST リクエスト
一つの単純な POST リクエスト：
インスタンス
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
如果您想像 HTML フォームのようにデータを POST する場合、以下を使用して setRequestHeader() 添加一个 HTTP ヘッダー。以下に send() 方法中指定您需要发送的数据：
インスタンス
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
| メソッド | 説明 |
|---|---|
| setRequestHeader(header, value) |
リクエストにHTTPヘッダーを追加します
|
url - サーバー上のファイル
open()メソッドの url パラメータは、サーバー上のファイルのアドレスです：
xhttp.open("GET", "ajax_test.asp", true);
このファイルは、.txtや.xmlなどのファイル形式、またはサーバースクリプトファイル（.aspや.phpなど、応答を送信する前にサーバーで操作が可能なもの）のいずれでもできます。
アシストン - true または false？
リクエストをアシストンで送信するには、open() メソッドの async パラメータは true：
xhttp.open("GET", "ajax_test.asp", true);
アシストンリクエストの送信は、ウェブ開発者にとって大きな進歩です。サーバー上で実行される多くのタスクは非常に時間がかかります。AJAXが登場する前に、この操作はアプリケーションの停止やフリーズにつながる可能性がありました。
アシストンリクエストを送信することで、JavaScriptはサーバーからの応答を待つ必要がなく、以下のことができます：
- サーバーからの応答を待っている間に他のスクリプトを実行します
- 応答が準備できたら処理します
onreadystatechange属性
XMLHttpRequestオブジェクトを使用して、リクエストが応答を受け取ったときに実行される関数を定義できます。
この関数はXMLHttpRequestオブジェクトの onreadystatechange 属性で定義されています：
インスタンス
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に関する詳細は後の章で学びます。
同期リクエスト
同期のリクエストを実行するには、 open() メソッドの第3引数に設定されます false：
xhttp.open("GET", "ajax_info.txt", false);
async = false が迅速なテストに使用されることがあります。また、より古い JavaScript コードでは同期リクエストが見られます。
コードがサーバーが完了するのを待つため、onreadystatechange ファンクションは必要ありません：
インスタンス
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
同期の XMLHttpRequest (async = false) を推奨しません。なぜなら、JavaScript はサーバーの応答が完了するまで実行を停止するため、サーバーが忙しいまたは遅い場合、アプリケーションがフリーズしたり停止したりする可能性があります。
同期 XMLHttpRequest は Web スタンダードから削除されていますが、このプロセスには多くの年月がかかる可能性があります。
同期リクエストを使用することを推奨されず、この場合、InvalidAccessError 例外が発生する可能性があります。
- 前のページ AJAX XMLHttp
- 次のページ AJAX レスポンス
