XHR 応答を深く理解する: タイプ、属性、実践的なアプリケーション

Web 開発において、サーバーとの非同期通信は不可欠な要素となっています。そして、その中心的な役割を担うのが XMLHttpRequest (XHR) です。XHR を使用することで、ページ遷移を伴わずにデータの送受信が可能となり、動的な Web アプリケーションを構築することができます。

本記事では、XHR の中でも特に重要な **レスポンス** に焦点を当て、その詳細について解説していきます。レスポンスには、サーバーから送信されたデータやステータスコードなどが含まれており、適切に処理することで、柔軟かつ堅牢な Web アプリケーションを実現できます。

1. XHR レスポンスタイプ: 必要なデータ形式を取得する

XHR から返されるデータは、テキスト、バイナリデータ、JSON など、さまざまな形式をとることができます。`responseType` プロパティを使用することで、取得したいデータ形式を指定することができます。

適切な `responseType` を選択することで、データ処理を効率化し、コードの可読性を向上させることができます。

// JSON データを取得する場合
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response); // JavaScript オブジェクトとしてアクセス可能
  }
};

xhr.send();

2. response 属性: XHR レスポンスデータへのアクセス

`response` 属性は、XHR レスポンスデータにアクセスするためのキーとなります。ただし、`response` 属性の値は、`responseType` の設定によって異なります。

• `responseType` が設定されていない場合、または "text" に設定されている場合は、`response` 属性は DOMString 型のテキストデータを返します。
• その他の `responseType` の値が設定されている場合、`response` 属性は対応する型のデータ (ArrayBuffer、Blob、Document、JavaScript オブジェクトなど) を返します。

重要な点は、`readyState` が 4 (リクエストが完了している) かつ `status` が 200 (リクエストが成功している) の場合にのみ、`response` 属性から完全なデータを取得できるということです。

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response); // レスポンスデータへのアクセス
  }
};

3. XHR エラー処理: ネットワークリクエストの失敗への対処

ネットワークリクエストは、様々な理由で失敗する可能性があります。XHR では、`status` 属性と `onerror` イベントを使用して、リクエストの成否判定とエラー処理を行うことができます。

`status` 属性は、HTTP ステータスコード (200 OK, 404 Not Found, 500 Internal Server Error など) を表します。

`onerror` イベントは、ネットワークエラーやサーバーエラーなど、XHR リクエストが失敗した場合に発生します。

xhr.onerror = function() {
  console.error('リクエストエラーが発生しました。');
};

4. XHR レスポンスの実践的なアプリケーション: 動的な Web アプリケーションの構築

XHR レスポンスは、動的な Web アプリケーションを構築するための強力なツールとなります。例えば、以下のようなケースで活用できます。

• AJAX フォーム送信: ページ遷移を伴わずにフォームデータを送信し、サーバーからの応答を動的に表示できます。
• 非同期データ読み込み: ページ全体を再読み込みすることなく、必要なデータだけを取得して表示できます。
• リアルタイムアップデート: チャットアプリケーションや通知機能など、リアルタイムな情報更新を実現できます。

これらのアプリケーションを通じて、XHR レスポンスを効果的に利用することで、ユーザーエクスペリエンスを向上させ、より魅力的な Web アプリケーションを開発できます。

関連資料

• XMLHttpRequest - Web API | MDN
• XMLHttpRequest Standard

Q&A

Q1. `responseType` を設定せずに XHR リクエストを送信した場合、`response` 属性にはどのような値が格納されますか？

A1. `responseType` を設定しない場合、`response` 属性には DOMString 型のテキストデータが格納されます。これは、`responseType` のデフォルト値が "text" であるためです。

Q2. `onerror` イベントは、どのような状況で発生しますか？

A2. `onerror` イベントは、ネットワークエラーやサーバーエラーなど、XHR リクエストが失敗した場合に発生します。例えば、サーバーに接続できなかった場合や、サーバーがエラーレスポンスを返した場合などに発生します。

Q3. XHR を使用してファイルアップロードを行うことはできますか？

A3. はい、XHR を使用してファイルアップロードを行うことができます。`FormData` オブジェクトを使用することで、ファイルをリクエストに含めることができます。詳細については、関連資料などを参照してください。