XMLHttpRequest

サーバーとHTTP通信を行うための従来の方法です。ページを再読み込みせずにデータを取得・送信でき、Ajax通信の基盤として長く使われてきました。

構文

var xhr = new XMLHttpRequest();
xhr.open("メソッド", "URL");
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		// 通信成功時の処理
	}
};
xhr.send();

メソッド一覧

メソッド	概要
open("メソッド", "URL")	リクエストの初期設定を行います。第1引数にHTTPメソッド、第2引数にURLを指定します。第3引数に『false』を指定すると同期通信になりますが、非推奨です。
send()	リクエストを送信します。POSTリクエストの場合は引数に送信データを指定します。
setRequestHeader("名前", "値")	リクエストヘッダーを設定します。『open()』の後、『send()』の前に呼び出す必要があります。

プロパティ一覧

プロパティ	概要
readyState	通信の状態を数値で返します。『0』は未初期化、『1』は初期化済み、『2』は送信済み、『3』は受信中、『4』は完了を表します。
status	HTTPステータスコードを返します。『200』は成功、『404』はページが見つからない、『500』はサーバーエラーです。
responseText	サーバーから受信したレスポンスを文字列で返します。
onreadystatechange	『readyState』が変化するたびに呼び出されるイベントハンドラを設定します。

サンプルコード

// GETリクエストでデータを取得する例
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/users");
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4) { // 通信完了
		if (xhr.status === 200) { // 成功
			var data = JSON.parse(xhr.responseText); // JSON文字列をオブジェクトに変換します。
			console.log(data);
		} else {
			console.log("エラー: " + xhr.status); // ステータスコードを出力します。
		}
	}
};
xhr.send();

// POSTリクエストでデータを送信する例
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/users");
xhr.setRequestHeader("Content-Type", "application/json"); // JSON形式で送信することをサーバーに伝えます。
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log("登録完了: " + xhr.responseText);
	}
};
var sendData = JSON.stringify({ name: "太郎", age: 25 });
xhr.send(sendData); // JSON文字列を送信します。

概要

『XMLHttpRequest』はJavaScriptからサーバーにHTTPリクエストを送信するためのオブジェクトです。ページを再読み込みせずにサーバーとデータをやり取りする「Ajax」と呼ばれる技術の中核として、長年にわたり使用されてきました。

通信の流れは「XMLHttpRequestオブジェクトの作成」→「『open()』でリクエストの設定」→「『onreadystatechange』でコールバックの設定」→「『send()』で送信」の4ステップです。『readyState』が『4』になった時点で通信が完了するため、その中で『status』を確認してレスポンスを処理します。

現在は、よりシンプルな記述が可能な『fetch()』の使用が推奨されています。『XMLHttpRequest』はコールバックベースで記述が冗長になりがちですが、古いブラウザとの互換性が必要な場合や、既存のコードを保守する際には理解が欠かせません。