XHRリクエスト

深度解析 XHR リクエスト：データ送信からレスポンス処理まで

この記事では、JavaScript の XHR オブジェクトについて掘り下げ、`XMLHttpRequest.send()` メソッドを使用してさまざまな種類のデータを送信する方法、リクエストヘッダーの設定方法、サーバーレスポンスの処理方法について詳しく説明します。

1. XHR リクエストとは？

XHR（XMLHttpRequest）は、Web ページがページ全体をリフレッシュすることなく、サーバーと非同期にデータ交換できるようにする API です。AJAX の中核的な技術であり、動的な Web アプリケーションの構築に不可欠な要素となっています。

XHR は、1990 年代後半に Microsoft が Internet Explorer 5 で初めて導入しました。その後、他のブラウザも追随し、今日では Web 開発の標準技術となっています。

2. `XMLHttpRequest.send()` を使用したデータ送信

`XMLHttpRequest.send()` メソッドは、XHR リクエストを開始する上で重要な役割を果たします。このメソッドを使用して、さまざまな種類のデータをサーバーに送信することができます。

2.1. null の送信 (GET リクエスト)

`send()` メソッドに `null` を渡すと、GET リクエストが送信されます。GET リクエストは、通常、サーバーからデータを取得するために使用されます。


const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send(null);

2.2. 文字列の送信 (POST リクエスト)

`send()` メソッドに文字列を渡すと、POST リクエストが送信されます。POST リクエストは、通常、サーバーにデータを送信するために使用されます。フォームデータなどです。


const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');

2.3. FormData オブジェクトの送信

`FormData` オブジェクトを使用すると、ファイルのアップロードやフォームデータの処理が容易になります。


const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.send(formData);

2.4. Blob オブジェクトの送信

`Blob` オブジェクトは、画像などのバイナリデータを送信するために使用できます。


const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.send(blob);

2.5. ArrayBuffer、DataView、TypedArray オブジェクトの送信

`ArrayBuffer`、`DataView`、`TypedArray` オブジェクトを使用して、バイナリデータを送信することもできます。


const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

view.setInt32(0, 12345);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.send(buffer);

2.6. 同期・非同期リクエストとタイムアウト

XHR リクエストは、同期または非同期に送信できます。同期リクエストは、レスポンスが返されるまでブラウザをブロックするため、推奨されません。非同期リクエストは、レスポンスが返されるまでブラウザをブロックしません。

`timeout` プロパティを使用して、リクエストのタイムアウト時間をミリ秒単位で設定できます。


const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // true は非同期リクエストを指定します
xhr.timeout = 5000; // 5 秒後にタイムアウト
xhr.send();

3. リクエストヘッダーの設定

リクエストヘッダーは、リクエストに関する追加情報をサーバーに提供するために使用されます。`setRequestHeader()` メソッドを使用して、リクエストヘッダーを設定できます。


const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your_token');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));

一般的なリクエストヘッダーには、次のようなものがあります。

ヘッダー	説明
Content-Type	送信されるデータのタイプを指定します。
Authorization	リクエストの認証情報を指定します。
Accept	サーバーが返すことができるレスポンスのタイプを指定します。

4. サーバーレスポンスの処理

`XMLHttpRequest` オブジェクトには、サーバーレスポンスを取得および処理するためのプロパティとイベントが用意されています。

プロパティ/イベント	説明
`status`	HTTP ステータスコード (例: 200, 404) を返します。
`statusText`	HTTP ステータスメッセージ (例: "OK", "Not Found") を返します。
`responseText`	レスポンスをテキストとして取得します。
`responseXML`	レスポンスを XML として取得します。
`response`	`responseType` に基づいて解析されたレスポンスを取得します。
`onload`	リクエストが正常に完了したときに発生します。
`onerror`	リクエスト中にエラーが発生したときに発生します。

4.1. レスポンスデータの処理


const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    console.log(xhr.responseText); // レスポンスデータ (テキスト)
  } else {
    console.error(xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('リクエストエラー');
};
xhr.send();

5. よくある問題とベストプラクティス

5.1. クロスオリジンリクエスト

クロスオリジンリクエストは、セキュリティ上の理由から制限されています。CORS（クロスオリジンリソースシェアリング）を使用すると、クロスオリジンリクエストを許可できます。

5.2. エラー処理

`onerror` イベントを使用して、リクエストエラーを処理します。

5.3. セキュリティ

機密情報を含むリクエストを送信する場合は、HTTPS を使用します。

まとめ

この記事では、XHR リクエストの基本から応用までを解説しました。XHR は、動的な Web アプリケーションを構築するための強力なツールです。

Fetch API など、XHR の後継となる技術も登場していますが、XHR は依然として重要な技術です。