XHR readyState の完全ガイド： AJAX リクエストの状態を追跡する

この包括的なガイドでは、AJAX リクエストの進捗状況を追跡するために不可欠な XHR readyState プロパティについて詳しく解説します。さまざまなreadyState 値とその意味、そして動的なウェブ体験を構築するためにそれらを効果的に使用する方法について学びましょう。

1. XHR readyState とは？

XMLHttpRequest (XHR) は、ウェブブラウザとウェブサーバー間でデータの送受信を可能にする API です。AJAX (Asynchronous JavaScript and XML) の基盤であり、ページ全体をリロードすることなく、ウェブページのコンテンツを動的に更新することを可能にします。

readyState プロパティは、XHR リクエストの現在の状態を表す数値です。このプロパティは、リクエストが送信されてから応答が完全に受信されるまで、さまざまな段階を経て変化します。

readyState を理解することは、応答を処理し、スムーズな非同期ウェブインタラクションを構築するために非常に重要です。これにより、開発者はリクエストのライフサイクルの特定の時点で特定のアクションを実行できます。

2. XHR readyState の 5 つの値

XHR readyState プロパティは、以下の 5 つの値を取ります。

3. コードでの readyState の使用

3.1. onreadystatechange イベント

onreadystatechange イベントは、readyState プロパティが変更されるたびに発生します。このイベントをリッスンすることで、リクエストの進捗状況を追跡し、適切なアクションを実行できます。

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');

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

xhr.send();

3.2. 条件分岐

if/else 文を使用して、現在の readyState に応じて異なるコードブロックを実行できます。

if (xhr.readyState === 0) {
  console.log('リクエストが初期化されました');
} else if (xhr.readyState === 1) {
  console.log('リクエストがオープンされました');
} else if (xhr.readyState === 4) {
  if (xhr.status === 200) {
    console.log('リクエストが成功しました');
  } else {
    console.log('リクエストが失敗しました');
  }
}

3.3. 実用的な例

• ローディングインジケータの表示
• エラー処理
• コンテンツの動的更新

4. よくあるエラーとベストプラクティス

4.1. タイミングの問題

readyState が 4 になる前に応答にアクセスしようとすると、問題が発生する可能性があります。

4.2. エラー処理

リクエストが成功したことを確認するには、readyState と共に HTTP ステータスコード (status) もチェックする必要があります。

4.3. コードの明確さと可読性

readyState と XHR イベントを使用する場合、クリーンで保守しやすいコードを作成するためのヒントを紹介します。

5. XHR の代替手段

5.1. Fetch API

Fetch API は、XHR の現代的な代替手段です。より簡潔な構文と Promise ベースのアプローチを提供します。

Fetch API の詳細については、https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch を参照してください。

関連する質問と回答

Q1: readyState が 4 であっても、リクエストが失敗する可能性はありますか？

A1: はい、readyState が 4 は操作の完了を示すだけで、成功を保証するものではありません。サーバーがエラーコード（例：404 Not Found、500 Internal Server Error）を返す場合があります。リクエストの成否を確認するには、常に HTTP ステータスコードを確認する必要があります。

Q2: XHR リクエストのタイムアウトを設定するにはどうすればよいですか？

A2: timeout プロパティを使用して、ミリ秒単位でタイムアウトを設定できます。タイムアウトを超過すると、リクエストは自動的に中止されます。

xhr.timeout = 5000; // 5秒のタイムアウトを設定

Q3: Fetch API と XHR のどちらを使用するべきですか？

A3: Fetch API は、よりモダンで簡潔な API を提供するため、ほとんどの場合に推奨されます。ただし、古いブラウザとの互換性が必要な場合は、XHR を使用する必要がある場合があります。