備忘録的プログラミングリファレンス

XMLHttpRequest インターフェイス

 XMLHttpRequest インターフェイスは、webページとは非同期にサーバーとの通信を可能にするプロパティメソッドイベントが定義されたインターフェイスです。

XMLHttpRequest 継承図

 webページのロードとは非同期にサーバーと通信する方法を AJAX プログラミングと呼びます。

 *ローカルファイルによるwebページ表示、file:///home/username/といったURLによる表示では XMLHttpRequest は機能しません。web サーバーとの通信時に機能します。

XMLHttpRequest の使い方

 XMLHttpRequest による非同期通信のプログラミングは以下のようになります。

  • XMLHttpRequest インスタンスを生成
  • onreadystatechange イベントハンドラーなどで通信が確立された場合の処理を定義しておく
  • (その他のイベントハンドラーで状況に応じたエラー処理などを定義しておく)
  • open() で POST または GET とサーバーの URL を指定し、サーバーとの通信の開始を実行
  • send() でリクエストを送信
XMLHttpRequest GET でプレーンテキストを読み込み
// XMLHttpRequest インスタンスの生成
const xhr_ = new XMLHttpRequest();

// 通信が状態をチェック
xhr_.onreadystatechange = function() {
	// ダウンロードまで完了したか
	if( xhr_.readyState === 4 && xhr_.status === 200) {
		// テキストファイルの内容を取得
		console.log( this.responseText );
	}
}

// 通信を接続
xhr_.open('get', './example.txt');

// リクエストを送信
xhr_.send();
詳しくは Example を参照してください

 非同期に通信とは、webページのリクエストからレスポンスといった一連の通信とは同期していないことをいいます。 webページは、リクエストごとにページを表示するという一連の流れのみを想定しています。webサーバーが1回のリクエストに1度だけレスポンスを返すという想定です。
 しかし、AJAX を使うと読み込みが終わったページからリクエストを複数回サーバーに送ることができ、ページの一部だけを更新することもできます。 サーバー側の設定によっては、サーバー側からクライアントにリクエストを送ることもできます。

コンストラクター(Constructor)

 XMLHttpRequest オブジェクトを生成します(正確にはインスタンス、オブジェクスはインスタントも含む広義)。 非同期通信を始めるには必ずこのオブジェクトが必要になります。以下のように XMLHttpRequest オブジェクトを生成してください。

const request_ = new XMLHttpRequest();
引数
なし
返り値
XMLHttpRequest インスタンス

 XMLHttpRequest をインスタンス化することをクライアントを作成するといったりします。

 XMLHttpRequest をインスタンス化することがしっくりきません。 しかし、webページはHTMLページテキストといったソースを読み込んだところで既に自動でオブジェクト化されているのです。
 改めて非同期通信の機能を追加するためには XMLHttpRequest のインスタンス化が必要ということです。

プロパティ(Properties)

プロパティ概要
.readyStateクライアントの状態を unsigned short 型の数値で返す。
状態説明
0UNSENTXMLHttpRequest のインスタンス化まで
1OPENEDopen()まで実行
2HEADERS_RECEIVEDsend()まで実行
3LOADINGダウンロード中
4DONEダウンロードが完了
.responseレスポンス(リクエストの返り値)の内容。そのタイプは .responseType プロパティで指定のこと
.responseTextレスポンスを DOMString 型のテキストで受け取る。send() が未実行では""、レスポンスにエラーがあると null を返す
.responseTypeレスポンスのタイプを以下のような列挙型で指定。open()またはsend()の実行時。
列挙名概要
""デフォルト。"text" と同じ
"arraybuffer"ArrayBuffer型
"blob"Blob オブジェクト
"document"Document または XMLDocument 。MIME タイプに基づく
"json"JSON 型
"text"DOMString オブジェクトのテキスト
.responseURLレスポンスを返したサーバーのURL。フラグメント以降は省略。nullの場合は空文字を返す
.responseXMLレスポンスを DOM オブジェクトツリーとして受け取る。デフォルトは XML。非同期で responseType が "document" の場合は HTML として解釈される
.statusHTTP レスポンスのステータスコードを unsigned short 型で返す。200 で完了。0 は未完了またはエラー
.statusTextHTTP レスポンスのステータスをメッセージ付きで返す。DOMString 型
timeoutリクエストの待ち時間の指定。XMLHttpRequestEventTarget.ontimeout イベントを呼び出すまでの時間。unsigned long 型
.uploadアップロード時の XMLHttpRequestUpload のハンドラー
withCredentialsCookie、認証ヘッダー、 TLS クライアント証明書といった認証や承認機能の使用の許可/不可の指定。Boolean 型

メソッド(Methods)

 最低限必要なメソッドは、サーバーとの通信を確立する open() とリクエストを送信する send() です。

メソッド概要
.abort()リクエストの中止を実行
.getAllResponseHeaders()HTTP レスポンスヘッダーを取得。通常は見えていない情報だが開発では必要
.getResponseHeader()指定した HTTP レスポンスヘッダーのみを取得
.open()サーバーとの通信を確立
.overrideMimeType() MIME タイプを任意に指定。"text/plain"とした場合はダウンロードされたデータをプレインテキストとして読み込む
.send()リクエストをサーバーに送信
.setRequestHeader()HTTP リクエストヘッダーの設定

イベント( Event )

 イベントタイプとイベントハンドラーについてです。カッコ内はイベントハンドラーです。

タイプ名(イベントハンドラー)概要
readystatechange( onreadystatechange )readyState 属性の変化によって発生するイベント。同期指定の場合は不可

 以下は XMLHttpRequestEventTarget のイベントタイプとイベントハンドラーです。XMLHttpRequest インターフェイスが継承しています。

Example

 最も簡単な非同期通信 XMLHttpRequest 例です。src/test.html ファイルを読み込んでページの遷移をしないで内容を追加表示します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。