JavaScript/XMLHttpRequest

XMLHttpRequest は、サーバーとの非同期通信を行うためのインターフェースです。このAPIは従来のAJAX通信の基盤として長く使用されてきましたが、現在ではfetch() APIがより推奨される手法となっています^[1]。

構文

constxhr=newXMLHttpRequest();

プロパティとメソッド

状態定数

XMLHttpRequest.UNSENT (0): リクエストが初期化されていない状態。
XMLHttpRequest.OPENED (1): open()メソッドが呼び出された状態。
XMLHttpRequest.HEADERS_RECEIVED (2): レスポンスヘッダーを受信した状態。
XMLHttpRequest.LOADING (3): レスポンスボディを受信中の状態。
XMLHttpRequest.DONE (4): リクエストが完了した状態。

リクエスト関連のメソッド

open(method, url[, async[, username[, password]]]): リクエストを初期化します。
send([body]): サーバーにリクエストを送信します。
setRequestHeader(name, value): HTTP リクエストヘッダーを設定します。
abort(): 既に送信されたリクエストを中止します。

レスポンス関連のプロパティ

responseType: レスポンスデータの型を指定します。
response: responseTypeに応じた型でレスポンスデータを返します。
responseText: テキスト形式でレスポンスデータを返します。
responseXML: XML/HTML形式でレスポンスデータを返します。
status: HTTPステータスコードを返します。
statusText: HTTPステータスメッセージを返します。

その他のメソッドとプロパティ

readyState: 現在のXHRの状態を表す数値を返します。
getResponseHeader(name): 指定した名前のレスポンスヘッダーの値を返します。
getAllResponseHeaders(): すべてのレスポンスヘッダーを文字列として返します。
overrideMimeType(mime): サーバーから返されるMIMEタイプを上書きします。

例

基本的なGETリクエスト (非推奨)

以下は従来のXMLHttpRequestを使用したGETリクエストの例ですが、新規開発ではfetch() APIの使用が推奨されています。

constxhr=newXMLHttpRequest();xhr.open('GET','https://api.example.com/data',true);xhr.onreadystatechange=function(){if(xhr.readyState===XMLHttpRequest.DONE){if(xhr.status===200){console.log(xhr.responseText);}else{console.error('エラーが発生しました:',xhr.status);}}};xhr.send();

推奨: fetchを使用したGETリクエスト

同じ機能をより簡潔に実装するfetch() APIの例:

fetch('https://api.example.com/data').then(response=>{if(!response.ok){thrownewError('Network response was not ok: '+response.status);}returnresponse.text();}).then(data=>{console.log(data);}).catch(error=>{console.error('エラーが発生しました:',error);});

JSONデータの送受信 (非推奨)

従来のXMLHttpRequestを使用したJSON送受信の例:

constxhr=newXMLHttpRequest();xhr.open('POST','https://api.example.com/json',true);xhr.setRequestHeader('Content-Type','application/json');xhr.responseType='json';xhr.onload=function(){if(xhr.status===200){constresponse=xhr.response;console.log('ユーザーID:',response.id);console.log('ユーザー名:',response.name);}else{console.error('エラーが発生しました:',xhr.status);}};constdata={name:'John Doe',email:'john@example.com',age:30};xhr.send(JSON.stringify(data));

推奨: fetchを使用したJSONデータの送受信

同じ機能をfetch() APIで実装した例:

constdata={name:'John Doe',email:'john@example.com',age:30};fetch('https://api.example.com/json',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}).then(response=>{if(!response.ok){thrownewError('Network response was not ok: '+response.status);}returnresponse.json();}).then(data=>{console.log('ユーザーID:',data.id);console.log('ユーザー名:',data.name);}).catch(error=>{console.error('エラーが発生しました:',error);});

注意点

レガシーサポート: XMLHttpRequestは古いブラウザでのサポートが必要な場合に使用できますが、新規開発ではfetch() APIの使用が強く推奨されます。
同期リクエスト: open()メソッドで同期リクエストが可能ですが、UIをブロックするため非推奨です。fetch() APIではこの問題が存在しません。
複雑なコードパターン: XMLHttpRequestはコールバックに依存するため、複雑なリクエストチェーンでは「コールバック地獄」を引き起こす可能性があります。fetch()はPromiseベースでより整理されたコードになります。
CORS: 異なるオリジン間のリクエストはCORS（Cross-Origin Resource Sharing）ポリシーに従います。この点はfetch() APIも同様です。
イベントハンドリングの複雑さ: XMLHttpRequestでは複数のイベントハンドラーが必要になることがありますが、fetch()ではPromiseベースの一貫したAPIで処理できます。
ワーカーでの使用: XMLHttpRequestとfetch()はどちらもDedicatedWorkerとSharedWorker内で使用可能です。

脚註

^モダンなウェブアプリケーション開発では、XMLHttpRequestよりもPromiseベースで使いやすいfetch APIの利用が推奨されています。

外部リンク

[1] モダンなウェブアプリケーション開発では、XMLHttpRequestよりもPromiseベースで使いやすいfetch APIの利用が推奨されています。

[1]