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]