Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

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文字列を送信します。

実行結果

GETリクエストが成功した場合、コンソールにはサーバーから返されたデータが出力されます。

// ステータスコードが200の場合
[
	{ "id": 1, "name": "太郎" },
	{ "id": 2, "name": "花子" }
]

// ステータスコードが404の場合
"エラー: 404"

概要

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

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

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

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス