XMLHttpRequestの使い方ガイド

XMLHttpRequestオブジェクトの完全ガイド

XMLHttpRequest（XHR）は、JavaScriptの最も重要なオブジェクトの一つであり、ウェブアプリケーションにおける非同期通信を実現するための基本的な手段です。このオブジェクトは、クライアントサイド（ユーザーのブラウザ）で、サーバーとデータを交換する際に使用され、ページの再読み込みなしでデータをやりとりすることができます。この記事では、XMLHttpRequestの詳細について解説し、実際の使用方法や、モダンなアプローチであるFetch APIとの比較についても触れます。

1. XMLHttpRequestとは？

XMLHttpRequestは、ウェブブラウザに組み込まれたAPIで、サーバーとクライアント間でデータを非同期に送受信するために使用されます。これにより、ユーザーがページを再読み込みせずに、サーバーからデータを取得したり、サーバーにデータを送信したりすることができます。

XMLHttpRequestの主な用途としては、AJAX（Asynchronous JavaScript and XML）の実装に使われ、ウェブページをよりインタラクティブでダイナミックにします。

2. XMLHttpRequestの基本的な使用方法

2.1 XMLHttpRequestオブジェクトの作成

XMLHttpRequestオブジェクトは、以下のようにして作成できます。

javascript
CopyEdit
let xhr = new XMLHttpRequest();

この行で、xhrという変数に新しいXMLHttpRequestオブジェクトが代入され、これを使ってサーバーとの通信を行います。

2.2 リクエストの準備

サーバーに対してリクエストを送信する前に、リクエストの種類（GETやPOSTなど）、URL、非同期通信かどうかを設定する必要があります。例えば、以下のコードでは、GETリクエストをサーバーのURLに送信する準備をしています。

javascript
CopyEdit
xhr.open("GET", "https://example.com/data", true);

• 第1引数はリクエストの種類（”GET”, “POST”など）。
• 第2引数はリクエストを送信するURL。
• 第3引数は非同期通信かどうか（trueで非同期、falseで同期）。

2.3 リクエストヘッダの設定

POSTリクエストなどでサーバーにデータを送信する場合は、リクエストヘッダを設定することがあります。以下の例では、Content-Typeを設定して、サーバーに送信するデータの形式を指定しています。

javascript
CopyEdit
xhr.setRequestHeader("Content-Type", "application/json");

2.4 レスポンスの処理

リクエストが成功したときや失敗したときに、どのようにレスポンスを処理するかを指定する必要があります。これには、onreadystatechangeイベントを使用します。

javascript
CopyEdit
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

• readyState: リクエストの状態を表します。4はリクエストが完了した状態を示します。
• status: サーバーから返されたHTTPステータスコードです。200は成功を意味します。

2.5 リクエストの送信

設定が完了したら、リクエストを送信します。

javascript
CopyEdit
xhr.send();

POSTリクエストの場合、送信するデータを引数として渡すこともできます。

javascript
CopyEdit
let data = JSON.stringify({ name: "John", age: 30 });
xhr.send(data);

3. XMLHttpRequestの状態遷移

XMLHttpRequestには5つの状態があり、これをreadyStateプロパティで確認できます。各状態について詳しく見ていきます。

1. 0: リクエストが初期化されていない状態。open()メソッドが呼ばれていない状態。
2. 1: サーバーとの接続が確立された状態。send()が呼ばれた後の状態。
3. 2: サーバーにリクエストが送信された状態。サーバーからのレスポンスが処理され始めた状態。
4. 3: サーバーからレスポンスの一部が受信された状態。データが部分的に受信されている状態。
5. 4: サーバーからのレスポンスが完全に受信され、処理が完了した状態。

4. XMLHttpRequestのエラーハンドリング

リクエストが失敗した場合には、エラーハンドリングが重要です。onerrorイベントを使用して、エラー時の処理を指定できます。

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

また、statusコードが200以外の場合もエラーハンドリングが必要です。例えば、404（ページが見つからない）や500（サーバーエラー）などです。

5. XMLHttpRequestとFetch APIの比較

XMLHttpRequestは長い間使用されてきましたが、最近ではFetch APIが登場し、よりシンプルで直感的な使い方ができるようになりました。以下は、XMLHttpRequestとFetchの主な違いです。

• シンタックスの簡潔さ: Fetch APIはPromiseベースのAPIであり、非同期処理を簡単に書くことができます。例えば、XMLHttpRequestで非同期リクエストを行うためには複雑なコールバック関数が必要でしたが、Fetchではthen()メソッドを使って簡単に非同期処理を扱うことができます。

  XMLHttpRequestの例:

  javascript
  CopyEdit
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send();
  

  Fetchの例:

  javascript
  CopyEdit
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  

• エラーハンドリング: FetchはPromiseベースでエラーハンドリングが容易にできます。XMLHttpRequestでは、statusコードやonerrorイベントでエラー処理を行う必要がありますが、Fetchは.catch()でエラーハンドリングができます。

6. XMLHttpRequestの非同期通信と同期通信

非同期通信（async）と同期通信（sync）があります。非同期通信は、リクエストを送信した後に他の処理を実行できるため、ページのパフォーマンスを向上させます。一方、同期通信はリクエストの処理が完了するまで他の処理が止まるため、ユーザーの体験が悪化する可能性があります。

javascript
CopyEdit
// 非同期通信
xhr.open("GET", "https://example.com/data", true);

// 同期通信
xhr.open("GET", "https://example.com/data", false); // 推奨されません

7. XMLHttpRequestのセキュリティ

XMLHttpRequestを使用する際には、クロスオリジンリソース共有（CORS）というセキュリティ制限を理解しておくことが重要です。異なるドメインに対してリクエストを送信する場合、サーバーは適切なCORSヘッダを設定する必要があります。これがない場合、ブラウザはリクエストをブロックします。

結論

XMLHttpRequestは、JavaScriptで非同期通信を行うための強力なツールです。AJAX技術に基づいており、ウェブアプリケーションをよりインタラクティブでダイナミックにするために広く利用されています。Fetch APIの登場により、より簡潔で使いやすい方法が提供されていますが、XMLHttpRequestは依然として重要な技術であり、特に古いブラウザや既存のコードベースでは依然として使用されることが多いです。