AJAX-サーバーにリクエストを送信する
XMLHttpRequestオブジェクトは、サーバーとデータを交換するために使用されます。
サーバーにリクエストを送信する
サーバーにリクエストを送信するには、XMLHttpRequestオブジェクトのopen（）メソッドとsend（）メソッドを使用します。
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
GETまたはPOST？
GETはPOSTよりも単純で高速であり、ほとんどの場合に使用できます。
ただし、次の場合は常にPOSTリクエストを使用してください。
- キャッシュされたファイルはオプションではありません（サーバー上のファイルまたはデータベースを更新します）。
- サーバーに大量のデータを送信します（POSTにはサイズ制限はありません）。
- ユーザー入力（不明な文字を含む可能性があります）を送信するPOSTは、GETよりも堅牢で安全です。
GETリクエスト
単純なGETリクエスト：
例
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
上記の例では、キャッシュされた結果が得られる場合があります。これを回避するには、URLに一意のIDを追加します。
例
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GETメソッドを使用して情報を送信する場合は、次のURLに情報を追加します。
例
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POSTリクエスト
単純なPOSTリクエスト：
例
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTMLフォームのようにデータをPOSTするには、setRequestHeader（）を使用してHTTPヘッダーを追加します。send（）メソッドで送信するデータを指定します。
例
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
URL-サーバー上のファイル
open（）メソッドのurlパラメーターは、サーバー上のファイルへのアドレスです。
xhttp.open("GET", "ajax_test.asp", true);
ファイルには、.txtや.xmlなどの任意の種類のファイル、または.aspや.phpなどのサーバースクリプトファイル（応答を返送する前にサーバーでアクションを実行できます）を使用できます。
非同期-正誤問題？
サーバーリクエストは非同期で送信する必要があります。
open（）メソッドのasyncパラメーターはtrueに設定する必要があります。
xhttp.open("GET", "ajax_test.asp", true);
非同期で送信することにより、JavaScriptはサーバーの応答を待つ必要はありませんが、代わりに次のことができます。
- サーバーの応答を待っている間に他のスクリプトを実行する
- 応答の準備ができたら、応答を処理します
onreadystatechangeプロパティ
XMLHttpRequestオブジェクトを使用すると、リクエストが応答を受け取ったときに実行される関数を定義できます。
この関数は、XMLHttpResponseオブジェクトの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();
上記の例で使用されている「ajax_info.txt」ファイルは単純なテキストファイルであり、次のようになります。
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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例外がスローされる場合があります。