AJAX リクエストの送信

XMLHttpRequestオブジェクト（前章を参照）を作成した後、サーバーにリクエストを送信する必要があります。

サーバーにリクエストを送信する

サーバーにリクエストを送信するには、XMLHttpRequestオブジェクトの2つのメソッドを使用します：

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

このopen()メソッドは、3つのパラメータを受け取ります：

• 第一个パラメータはHTTPリクエストメソッドです-GET、POST

• 第二个パラメータは、リクエストを送信するURLです

• オプションの第三引数は、リクエストが非同期であるかどうかを設定します（デフォルトはtrueです）

send()メソッドは一つのオプション引数を受け取ります：

• GETリクエストの場合、値を渡さないでください。

• POSTリクエストの場合、以下を渡します。名前=値の

HTTPリクエスト：GETとPOSTは何が違うですか？

のGETメソッドでは、ブラウザはフォームの内容（名前/を含む値対（名前=値）をURLの末尾に追加します。

GETは安全性を気にしないシンプルなフォームに通常使用されます。GETはシンプルなフォームに多くの利点を提供します。

• GETリクエストはキャッシュされることがあります

• GETリクエストはブラウザの履歴に保存されます

• GETリクエストにはブックマークを追加できます

• 機密データを処理する場合、GETリクエストを使用してはならない

• GETリクエストには長さの制限があります（2048文字（キャラクター））

のPOSTメソッドでは、内容はURLに表示されません。

フォームデータに機密情報や個人情報が含まれている場合、常にPOSTを使用する必要があります。

• POSTリクエストは常にキャッシュされません

• POSTリクエストはブラウザの履歴に保存されません

• POSTリクエストではブックマークを追加できません

• 機密データを処理する場合、POSTリクエストを使用してください

• POSTリクエストはデータの長さに制限がありません

GETリクエスト

以下の例では、JavaScriptを使用してシンプルなAjax GETリクエストを送信する方法を示しています：

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

上記の例では、キャッシュされた結果が得られることがあります。このような状況を避けるために、URLにランダムな数値を追加してください：

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

GETメソッドで情報を送信する場合、情報をURLに追加してください：

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

POSTリクエスト

以下の例では、JavaScriptを使用してシンプルなAjax POSTリクエストを送信する方法を示しています：

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

POSTメソッドで情報を送信する場合、HTTPヘッダーを設定するためにsetRequestHeader()を使用し、send()メソッドで送信するデータを指定してください：

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

このsetRequestHeader()メソッドは二つの引数を受け取ります：

• 第1引数は、ヘッダーの名前を指定します

• 第2引数は、ヘッダーの値を指定します

URL-サーバー上のファイル

メソッドの第2引数（URL）open()は、サーバー上のファイルのアドレスです。

　　httpRequest.open("GET", "ajax_get.php", true);

AJAXは、JSON、XML、HTML、PHP、ASP、テキストなど、さまざまな形式の情報を送受信できます。

onreadystatechangeプロパティ

XMLHttpRequestオブジェクトを使用して、応答を処理するために実行する関数を定義できます。

XMLHttpRequestオブジェクトの属性で定義されたレスポンス関数onreadystatechange

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

このチュートリアルの後半で、onreadystatechangeプロパティについてもっと詳しく説明します。

同期リクエスト

メソッドの第3引数open()で指定されたリクエストは非同期または同期。

送信する同期リクエストを送信する場合、open()メソッドの第3引数を変更してください：false。

以下を使用する場合：同期リクエストがあれば、レスポンス関数を指定する必要はありません：

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

推奨しません同期以下の理由でリクエスト：

• JavaScriptは、サーバーが応答準備ができ次第実行を停止します

• サーバーが忙しいまたは遅い場合、アプリケーションは停止したり停止したりします

• 悪いユーザーエクスペリエンスを引き起こす