XMLHttpRequestオブジェクトは、サーバとのデータ交換に使用します。
サーバにリクエストを送信するには、XMLHttpRequestオブジェクトのopen()メソッドとsend()メソッドを使用します：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| メソッド | 説明 |
|---|---|
| open(method, url, async) | リクエストのタイプを指定します method: リクエストのタイプ：GET または POST url: サーバ（ファイル）の場所 async: true（非同期）またはfalse（同期） |
| send() | リクエストをサーバに送信します（GETで使用します）。 |
| send(string) | リクエストをサーバに送信します（POSTで使用します）。 |
GET は、POSTよりも簡単で速く、ほとんどのケースに使用できます。
しかし、次の場合には常にPOST リクエストを使用します：
簡単なGETリクエスト：
上の例では、キャッシュされた結果が得られた可能性があります。これを避けるには、URLにユニークなIDを追加します：
GETメソッドで情報を送信する場合は、URLに情報を追加します：
簡単なPOSTリクエスト：
HTMLフォームのようなデータをPOSTするには、setRequestHeader()でHTTPヘッダを追加します。 send()メソッドで送信したいデータを指定します：
xhttp.open("POST", "ajax_test.html", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Try it Yourself »
| メソッド | 説明 |
|---|---|
| setRequestHeader(header, value) | リクエストにHTTPヘッダを追加します header: ヘッダ名を指定します value: ヘッダの値を指定します |
open()メソッドのurlパラメータは、サーバ上のファイルのアドレスです：
xhttp.open("GET", "ajax_test.html", true);
このファイルには、.txtや.xmlなどのあらゆる種類のファイルにも、.aspや.phpなどの（レスポンスを返す前にサーバ上でアクションを実行できる） サーバ・スクリプトファイルにもすることができます。
リクエストを非同期に送信するには、open()メソッドのasyncパラメータをtrueに設定する必要があります：
xhttp.open("GET", "ajax_test.html", true);
非同期にリクエストを送信することは、Web開発者にとって大きな改善です。 サーバ上で実行するタスクの多くは非常に時間がかかります。AJAX以前では、 この操作によってアプリケーションのハングや停止の原因になる可能性がありました。
非同期で送信することで、JavaScriptはサーバ・レスポンスを待つ必要はなく、代わりに次のことができます：
async = true を使用する場合は、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();
Try it Yourself »
onreadystatechangeの詳細については、後の章で説明します。
async = falseを使用するには、open()メソッドの3番目のパラメータをfalseに変更します：
xhttp.open("GET", "ajax_info.txt", false);
async = falseを使用することはお勧めできませんが、いくつかの小さなリクエストに対してはこれは問題ありません。
サーバ・レスポンスの準備が完了するまで、JavaScriptは実行されません。サーバがビジーまたは低速の場合、 アプリケーションはハングまたは停止することがあります。
注: async = falseを使用するときは、onreadystatechange関数を記述しないでください - 単にsend()文の後にコードを配置してください：
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Try it Yourself »