JavaScript/XMLHttpRequest
XMLHttpRequest は、サーバーとの非同期通信を行うためのインターフェースです。このAPIは従来のAJAX通信の基盤として長く使用されてきましたが、現在ではfetch() APIがより推奨される手法となっています[1]。
構文
編集const xhr = new XMLHttpRequest();
プロパティとメソッド
編集状態定数
編集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の使用が推奨されています。
const xhr = new XMLHttpRequest(); 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) { throw new Error('Network response was not ok: ' + response.status); } return response.text(); }) .then(data => { console.log(data); }) .catch(error => { console.error('エラーが発生しました:', error); });
JSONデータの送受信 (非推奨)
編集従来のXMLHttpRequestを使用したJSON送受信の例:
const xhr = new XMLHttpRequest(); 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) { const response = xhr.response; console.log('ユーザーID:', response.id); console.log('ユーザー名:', response.name); } else { console.error('エラーが発生しました:', xhr.status); } }; const data = { name: 'John Doe', email: 'john@example.com', age: 30 }; xhr.send(JSON.stringify(data));
推奨: fetchを使用したJSONデータの送受信
編集同じ機能をfetch() APIで実装した例:
const data = { 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) { throw new Error('Network response was not ok: ' + response.status); } return response.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の利用が推奨されています。