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の利用が推奨されています。

外部リンク

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

[1]