XMLHttpRequestとは？提供API・ハンドラを解説！

XMLHttpRequestとは？

XMLHttpRequestとはマイクロソフト社が自社ActiveXに実装したスクリプト言語用APIで、サーバーとのHTTP通信を行うAPIを指します。略称として「XHR」とも呼ばれています。スクリプト言語とは、ウェブブラウザのクライアントで実行される処理言語でJavaScript等があります。

XMLHttpRequestは、AJAX（Asynchronous JavaScript And XML）の基幹技術です。XMLHttpRequestを用いることで、ウェブページの全体を更新せずに必要なデータを更新することができます。

XMLHttpRequestはマイクロソフト社のInternet Exploreで利用可能となりましたが、その後MozillaやSafari・Opera等に採用されていきました。その後W3Cで仕様標準化が進められ、WHATWGにおいてLiving Standardの標準仕様として策定されています。 参考：XMLHttpRequest Living Standard 参考：XMLHttpRequest Living Standard 日本語訳

XMLHttpRequestの使い方

XMLHttpRequestの使い方は、XMLHttpRequestのオブジェクトインターフェイスを用います。XMLHttpRequestでは大別すると以下の通り、サーバーとのインターフェイス・イベントハンドラのインターフェイス・DOMインターフェイスが提供されています。

・XMLHttpRequestオブジェクト（サーバーとのインターフェイス） 　XMLHttpRequestのリクエスト発行や一連の手続きを行います。 ・XMLHttpRequestEventTargetインターフェイス（イベントハンドラのインターフェイス） 　XMLHttpRequestのイベント処理を行うハンドラを記述します。 ・EventTargetインターフェイス（DOMインターフェイス） 　EventTargetでDOM インターフェイスのイベントを受けるハンドラ・オブジェクトを登録します。

XMLHttpRequestオブジェクトを使用する場合の基本的な流れは、以降で説明します。

XMLHttpRequestオブジェクトを使うには、newでXMLHttpRequestオブジェクトを生成します。XMLHttpRequestオブジェクトのメソッドとしては、以下のものが用意されています。

・事前設定（必要な場合のみ） 「XMLHttpRequest.overrideMimeType()」 　サーバーから返ってくる MIME タイプを上書き変更します。

・リクエストの初期化 「XMLHttpRequest.open()」 　リクエストを初期化します。 　第1引数は”GET”か”POST”のメソッド、第2引数はURL、以降は省略可能な引数です。

・リクエストの準備 「XMLHttpRequest.setRequestHeader()」 　XMLHttpRequest.send()を使うために、HTTP リクエストヘッダーの値を設定します。 

・リクエストの送信 「XMLHttpRequest.send()」 　リクエストを送信します。

・レスポンスヘッダーの受信 「XMLHttpRequest.getAllResponseHeaders()」 　すべてのレスポンスヘッダを取得します。 「XMLHttpRequest.getResponseHeader()」 　指定したヘッダ文を含む文字列を1つ取得します。

・リクエストの中止 「XMLHttpRequest.abort()」 　送信されたリクエストを中止します。

以下は基本的な流れを抽出した実装例です。onloadやonerrorはイベントハンドラで、詳細は以降で説明します。 実装例：（XMLHttpRequestコード部分） 　var xhr = new XMLHttpRequest(); 　xhr.onload = function() { 　  console.log(`Loaded successfully! ${xhr.status}`); 　} 　xhr.onerror = function() { 　  alert(`Error! ${xhr.status}`); 　} 　method=”GET”; 　url=”sample.html”; 　xhr.open(method, url); 　xhr.responseType = "text"; 　xhr.send();

この例は、xhr.responseTypeで”text”形式を指定しました。受信したデータはxhr.responseTextに格納されますので、console.log()でコンソール出力したりブラウザで活用したりできます。なお、Webページの制限リソースを参照する場合は、CORS（Cross-Origin Resource Sharing）というオリジン間リソース共有 でクロスドメインのリソース共有を行う必要があります。

XMLHttpRequestオブジェクトのプロパティは、以下の分類で提供されています。

・リクエストステータスに関するプロパティ 「XMLHttpRequest.onreadystatechange」 　イベントハンドラで、readyState 属性が変化する度に呼び出されます。 「XMLHttpRequest.readyState」 　リクエストの状態を戻します。 「XMLHttpRequest.status」 　リクエストレスポンスのステータスを返します。 「XMLHttpRequest.statusText」 　"200 OK"等を含むリクエストレスポンスの全文字列をDOMStringで返します。 

・リクエストレスポンスに関するプロパティ 「XMLHttpRequest.response」 　指定したXMLHttpRequest.responseTypeに応じて、エンティティ本文・Blob・Document・JavaScriptオブジェクト・DOMString を返します。 「XMLHttpRequest.responseText」 　リクエストレスポンスのテキストをDOMStringで返します。 「XMLHttpRequest.responseType」 　レスポンス型を定義します。 「XMLHttpRequest.responseURL」 　レスポンスのURLを返します。 「XMLHttpRequest.responseXML」 　リクエストに対するレスポンスのDocumentを返します。

・タイムアウトに関するプロパティ 「XMLHttpRequest.timeout」 　リクエストタイムアウトをミリ秒単位で表します。 「XMLHttpRequestEventTarget.ontimeout」 　タイムアウト発生時に起動されるハンドラです。

・監視に関するプロパティ 「XMLHttpRequest.upload」 　アップロード進捗監視のオブジェクトを返します。

・資格情報のプロパティ 「XMLHttpRequest.withCredentials」 　Access-Controlリクエストの資格情報使用を指定します。

XMLHttpRequestEventTargetインターフェイスはイベント処理のハンドラを記述します。ハンドラとは処理要求が発生した際に起動する関数を指します。

・リクエスト中止のハンドラ 「XMLHttpRequestEventTarget.onabort」 　abortイベントを受信した際に呼び出すハンドラを記述します。

・成功時に受信するハンドラ 「XMLHttpRequestEventTarget.onload」 　コンテンツのフェッチに成功した後に、load イベントを受信したときに呼び出す関数が含まれています。

・進行中に処理されるハンドラ 「XMLHttpRequestEventTarget.onloadstart」 　HTTPリクエストがデータの読み込みを開始した際の、loadstartイベントを受信したときに呼び出す関数が含まれています。 「XMLHttpRequestEventTarget.onprogress」 　リクエストの進行状況を、progress イベントを受信したときに呼び出す関数が含まれています。

・リクエストエラーのハンドラ 「XMLHttpRequestEventTarget.onerror」 　リクエストでエラーが発生した際のerrorイベントを受信した際に呼び出すハンドラを記述します。 「XMLHttpRequestEventTarget.ontimeout」 　XMLHttpRequest オブジェクトの timeout 属性により、timeout イベントを受信したときに呼び出す関数が含まれています。 「XMLHttpRequestEventTarget.onloadend」 　ロード完了時のリクエストエラーを、loadendイベントとして受信したときに呼び出す関数が含まれています。

EventTargetインターフェイスは、DOM（Document Object Model）のAPIでイベント処理するために使用します。

・EventTargetオブジェクトの生成 「EventTarget()」 　EventTargetオブジェクトのインスタンスを生成します。

・EventTargetの提供メソッド 「EventTarget.addEventListener()」 　指定するイベントハンドラーをEventTargetに登録します。 「EventTarget.removeEventListener()」 　EventTargetからイベントリスナーを登録削除します。 「EventTarget.dispatchEvent()」 　EventTargetにイベント信号を発行します。

XMLHttpRequestでは同期通信と非同期通信が利用可能です。同期通信では処理が完了するまでブラウザがブロックされ、画面が固まったりブラウザ操作が反応しなかったりします。そのため同期通信（同期リクエスト）はオーバーヘッドが大きく性能上の問題がありますので、実用的ではありません。

非同期通信時のブラウザは通常通りの動作をしており、データ到着時のイベントを受けて表示が更新されます。このことにより、よりシステム負荷の低い非同期通信（非同期リクエスト）が推奨されています。同期通信（同期リクエスト）は非推奨となります。

同期・非同期リクエストを指定するには、XMLHttpRequest.open()の第3引数（async指定）にtrueまたはfalseを指定します。trueは非同期（デフォルト値）でfalseが同期となります。つまり未指定時には非同期リクエストの動作となりますのでご安心ください。

XMLHttpRequestを使用してJavaScriptでHTTP通信を実装しましょう

JavaScriptはスクリプト言語として動的ウェブコンテンツを作成できます。XMLHttpRequestはさらにHTTP通信を実装し、多様なコンテンツを動的に表示するものです。非同期処理によりユーザに負担をかけることなく、処理できるメリットがあります。

ぜひHTTPサーバー通信をXMLHttpRequestで実装し、ウェブコンテンツをよりリッチに作成することをおすすめします。