AJAX-XMLHttpRequest
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) |
URL-サーバー上のファイル
メソッドのurlパラメーターはopen()、サーバー上のファイルへのアドレスです。
xhttp.open("GET", "ajax_test.asp", true);
ファイルには、.txtや.xmlなどの任意の種類のファイル、または.aspや.phpなどのサーバースクリプトファイル（応答を返送する前にサーバーでアクションを実行できます）を使用できます。
非同期-正誤問題？
サーバーリクエストは非同期で送信する必要があります。
open（）メソッドのasyncパラメーターはtrueに設定する必要があります。
xhttp.open("GET", "ajax_test.asp", true);
非同期で送信することにより、JavaScriptはサーバーの応答を待つ必要はありませんが、代わりに次のことができます。
- サーバーの応答を待っている間に他のスクリプトを実行する
- 応答の準備ができたら、応答を処理します
asyncパラメーターのデフォルト値はasync = trueです。
コードから3番目のパラメーターを安全に削除できます。
同期XMLHttpRequest（async = false）は、サーバーの応答の準備ができるまでJavaScriptの実行を停止するため、お勧めしません。サーバーがビジーまたは低速の場合、アプリケーションはハングまたは停止します。
GETまたはPOST？
GETよりも単純で高速でありPOST、ほとんどの場合に使用できます。
ただし、次の場合は常にPOSTリクエストを使用してください。
- キャッシュされたファイルはオプションではありません（サーバー上のファイルまたはデータベースを更新します）。
- サーバーに大量のデータを送信します（POSTにはサイズ制限はありません）。
- ユーザー入力（不明な文字を含む可能性があります）を送信するPOSTは、GETよりも堅牢で安全です。
GETリクエスト
簡単なGETリクエスト：
例
xhttp.open("GET", "demo_get.asp");
xhttp.send();
上記の例では、キャッシュされた結果が得られる場合があります。これを回避するには、URLに一意のIDを追加します。
例
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
このメソッドで情報を送信する場合はGET、次のURLに情報を追加します。
例
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
サーバーが入力を使用する方法とサーバーが要求に応答する方法については、後の章で説明します。
POSTリクエスト
簡単なPOSTリクエスト：
例
xhttp.open("POST", "demo_post.asp");
xhttp.send();
HTMLフォームのようにデータをPOSTするには、。を使用してHTTPヘッダーを追加しますsetRequestHeader()。send()メソッドで送信するデータを指定します。
例
xhttp.open("POST", "ajax_test.asp");
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 |
同期リクエスト
同期リクエストを実行するには、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の実行を停止するため、お勧めしません。サーバーがビジーまたは低速の場合、アプリケーションはハングまたは停止します。
最新の開発ツールは、同期リクエストの使用について警告することをお勧めします。同期リクエストが発生すると、InvalidAccessError例外がスローされる場合があります。