XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧

XMLHttpRequestオブジェクトについて

XMLHttpRequestオブジェクトはサーバーとの非同期通信を行うことができるJavaScriptの一種のWeb APIです。

この非同期通信はAjax（Asynchronous JavaScript + XML）と呼ばれ、HTML5が登場する以前から使われていました。
ページを再読み込みせずにコンテンツを更新したり、フォームなどのデータを送信することができます。

名称にXMLと付きますが、実際はXML形式以外のデータもやり取りすることができます。
もちろん画像ファイルやPDFファイルなども送信したり、反対にサーバーから受け取ったりすることも可能です。

XMLHttpRequestオブジェクトによるAjaxを使うとページを動的に表示できることから、現在も広く利用されています。
基本的な使い方として、サーバーから特定のデータをリクエストして受け取るときは以下のようなコードになります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1)XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2)メソッドと通信先を指定して、リクエストを送信する
	xhr.open( "post", "./js_sample/entry.php", true);
	xhr.send();

	// (3)通信状態を確認して、レスポンスとして受け取ったデータ（responseText）を出力する
	xhr.onreadystatechange = function() {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log(xhr.responseText);
		}
	};
});

(1)でXMLHttpRequestオブジェクトのインスタンスを作成し、(2)で通信を開始します。
(3)では通信が正常に完了したかを確認してから、レスポンスデータが入っているresponseTextプロパティをconsole.logメソッドでコンソールへ出力して完了です。

通信の状態はreadyStateプロパティから確認し、正常に完了したかはstatusプロパティに入っているHTTPステータスコードから確認することができるようになっています。

以降では、XMLHttpRequestオブジェクトが使うことのできるプロパティ、メソッド、イベントの内容をそれぞれ解説していきます。

プロパティ

XMLHttpRequestオブジェクトで使うことのできるプロパティ一覧です。
「読み取りのみ」が「○」になっているプロパティは値の取得のみ行うことができます。

メソッド

XMLHttpRequestオブジェクトで使うことのできるメソッドの一覧です。

イベント

XMLHttpRequestオブジェクトで通信を行った際に発生するイベント一覧です。

発生したイベントを検出するときはaddEventListenerメソッドを使う方法と、イベントハンドラを使う方法の2種類があります。
以下の例ではイベントloadendに対して、それぞれの方法で発生を検出してconsole.logメソッドを実行します。

addEventListenerメソッドを使う場合

addEventListenerメソッドを使う方法では、発生を検出したいイベントをイベントリスナーに登録します。

JavaScript コード例

xhr.addEventListener('loadend', ()=> {
	console.log("Load End");
});

イベントハンドラを使う場合

イベントハンドラで発生したイベントを検出するときは、上記イベント一覧にあるイベント名の前に「on」を加えて設定します。
例えばイベント「loadend」であれば「onloadend」として、以下のように設定して使います。

JavaScript コード例

xhr.onloadend = () => {
	console.log("Load End");
};

他のイベントについても全く同じ方法で発生を検出して処理を実行することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。