XMLHttpRequest

XMLHttpRequest (XHR) について

XMLHttpRequest（XHR）は、JavaScriptなどのウェブブラウザで動作するスクリプト言語から、サーバーとのHTTP通信を可能にする組み込みオブジェクト（API）です。Ajaxの中核技術として、Webページをリロードすることなくサーバーとデータをやり取りできます。これにより、動的でインタラクティブなWebアプリケーションの開発が実現しました。

歴史

XHRの起源は1999年、MicrosoftがOutlook Web Access 2000のWebインターフェースで利用するために、Internet Explorer 5にActiveXオブジェクトとして実装したことに遡ります。その後、Mozillaプロジェクトが2001年にMozilla 0.9.7およびNetscape 7で、Appleが2004年にSafari 1.2で同様の組み込みオブジェクトを実装しました。

2005年にAjaxが注目を浴びるようになり、XHRは多くのブラウザで標準的に実装されるようになりました。MicrosoftもInternet Explorer 7で、ActiveXを無効にしているユーザーも利用できるように、XHRを組み込みオブジェクトとして標準実装しました。

その後、W3Cで仕様の標準化が進められ、XMLHttpRequest Level 1およびLevel 2が策定されましたが、Level 2は後に廃止されLevel 1に統合されました。現在はWHATWGのXMLHttpRequest Living Standardが仕様として扱われています。

オブジェクトの構成

XHRオブジェクトは、主要なブラウザで共通のAPIを提供しています。

メソッド

`abort`: リクエストを中止します。
`getAllResponseHeaders`: レスポンスヘッダー全体を返します。
`getResponseHeader`: 特定のレスポンスヘッダーを返します。
`open`: リクエストを初期化します。
`overrideMimeType`: MIMEタイプを上書きします。
`send`: リクエストを送信します。
`setRequestHeader`: リクエストヘッダーを設定します。

イベントハンドラ

`onloadstart`: リクエストの開始時に発生します。
`onprogress`: データ受信中に定期的に発生します。
`onabort`: リクエストが中止されたときに発生します。
`onerror`: エラー発生時に発生します。
`onload`: リクエストが成功裏に完了したときに発生します。
`ontimeout`: リクエストがタイムアウトしたときに発生します。
`onloadend`: リクエストの完了時に発生します（成功・失敗に関わらず）。
`onreadystatechange`: `readyState` プロパティが変更されるたびに発生します。

プロパティ

`readyState`: リクエストの状態を表す数値です。
`0 = UNSENT`: リクエストが開始されていない状態。
`1 = OPENED`: `open()` が呼び出された状態。
`2 = HEADERS_RECEIVED`: レスポンスヘッダーが受信された状態。
`3 = LOADING`: レスポンスボディのダウンロード中。
`4 = DONE`: リクエストが完了した状態。
`response`: レスポンスデータ（形式は `responseType` に依存）。
`responseText`: レスポンスデータを文字列で返します。
`responseType`: レスポンスのデータ形式を指定します。
`responseXML`: レスポンスデータをXMLとして返します。
`status`: HTTPステータスコード。
`statusText`: HTTPステータステキスト。
`timeout`: リクエストのタイムアウト時間を指定します。
`upload`: リクエストのアップロード処理を制御するオブジェクト。
`withCredentials`: Cookieや認証情報を送信するかどうかを設定します。

利用法

XHRオブジェクトを作成し、`open()` メソッドでリクエストを初期化し、`send()` メソッドでリクエストを送信します。

Internet Explorer 5および6ではActiveXオブジェクトとして実装されているため、フォールバックコードが必要となる場合があります。

javascript
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
} catch (e) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
} catch (e) {
xhr = null;
}
}
}

クロスドメイン通信

セキュリティ上の理由から、XHRは同一生成元ポリシーによって制限され、基本的には同一ドメインとのみ通信が可能です。しかし、XMLHttpRequest Level 2では異なるドメインとの通信が可能です。そのためには、サーバー側でHTTPレスポンスヘッダーに `Access-Control-Allow-Origin` を追加する必要があります。

ストリーミング

`readyState` が 3 (LOADING) の状態で、受信途中のデータを取得することで、ストリーミング処理が可能です。しかし、ブラウザによって制限事項があります。

ロングポーリング

HTTP接続を維持し、サーバーから情報を送りたいときにレスポンスを返す方式をロングポーリングと呼びます。Cometの実装に利用されます。接続のタイムアウトや同時接続数の制限、サーバー側のリソース消費などの注意点があります。

WebSocketという代替プロトコルによって、これらの問題は解決に向かっています。

まとめ

XMLHttpRequestは、Web開発において非常に重要な技術です。Ajaxを始め、様々なWebアプリケーションで利用されています。クロスドメイン通信、ストリーミング、ロングポーリングといった高度な機能も備えており、Web技術の進歩に貢献しています。

もう一度検索