AJAX - サーバへのリクエスト送信

XMLHttpRequest オブジェクトは、サーバとのデータ交換に使用します。

サーバへのリクエスト送信

リクエストをサーバへ送信するには、XMLHttpRequest オブジェクトの open() と send() メソッドを使用します:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

メソッド	説明
open(method, url, async)	リクエストのタイプを指定するメソッド: リクエストのタイプ：GET または POST url: サーバ (ファイル) の位置 async: true (非同期) または false (同期)
send()	サーバにリクエストを送信する (GET を使用する場合)
send(string)	サーバにリクエストを送信する (POST を使用する場合)

GET か POST か ?

GET は、POST に比べ単純で速いので、多くの場合に使用されています。

しかしながら、次のようなときは、通常 POST が使われます:

キャッシュ・ファイルがオプションでない（サーバのファイルまたはデータベースを更新する）
大容量データをサーバに送信する（POST にはサイズ制限がない）
ユーザ入力(未知のキャラクタを含むことができる)を送るのに、POST は GET より強固で安全

GET リクエスト

簡単な GET リクエスト：

例

xhttp.open("GET", "demo_get.html", true);
xhttp.send();

Try it Yourself »

上記例では、キャッシュされた結果を取得しているかもしれません。これを避けるためは、URL にユニークな ID を追加します：

例

xhttp.open("GET", "demo_get.html?t=" + Math.random(), true);
xhttp.send();

Try it Yourself »

GET メソッドで情報を送信したい場合は、URL に情報を追加します：

例

xhttp.open("GET", "demo_get2.html?fname=Henry&lname=Ford", true);
xhttp.send();

Try it Yourself »

POST リクエスト

簡単な POST リクエスト：

例

xhttp.open("POST", "demo_post.html", true);
xhttp.send();

Try it Yourself »

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: ヘッダの値を指定

url - サーバ上のファイル

open() メソッドの url パラメータには、サーバ上のファイ・アドレスを指定します：

xhttp.open("GET", "ajax_test.html", true);

ファイルは .txt や .xml または（応答を返す前に、サーバでのアクションを実行できる）.html や .php のようなサーバスクリプトファイルなど、どのような種類のファイルでも可能です。

Asynchronous - True か False か ?

AJAXは、Asynchronous JavaScript and XML の略で、XMLHttpRequest オブジェクトが AJAX として振る舞うためには、 open() メソッドの async パラメータには true を設定しなければなりません：

xhttp.open("GET", "ajax_test.html", true);

リクエストを非同期に送ることは、ウェブ開発者にとって大きな改善です。サーバで行われるタスクの多くは、非常に時間がかかります。 AJAX 以前、このような処理はアプリケーションのハングや停止の基となっていました。

AJAX により、JavaScript はサーバ・レスポンスを待つ必要がなくなり、代りに以下のことができるようになりました：

サーバ・レスポンスを待つ間、他のスクリプトを実行する
レスポンスの完了したときに、レスポンスの処理を行う

Async=true

async=true を使用する場合、onreadystatechange イベントにおいて、レスポンスが ready の時に実行する関数を指定します：

例

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

async=false を使用するには、open() メソッドの 3 番目のパラメータを false に変更してください：

xhttp.open("GET", "ajax_info.txt", false);

async=false の指定は推奨されませんが、少量の小さなリクエストには問題ありません。

サーバ・レスポンスが ready になるまで、JavaScript は実行を再開しないことを覚えておいてください。アプリケーションは、サーバがビジーの場合や遅い場合にはハングしたりや停止したりします。

注: async=false を使用する時には、onreadystatechange 関数は書きません - send() ステートメントの、直後にコードを置きます:

例

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Try it Yourself »

❮ 前章へ次章へ ❯