XMLHttpRequest をマスターする: JavaScript での AJAX 呼び出しのガイド

AJAX 呼び出しの XMLHttpRequest

XMLHttpRequest (XHR) オブジェクトは、Web ページを更新せずにサーバーと非同期にデータを送受信できるようにする JavaScript の中核機能です。これは AJAX (非同期 JavaScript および XML) の基礎を形成し、動的でインタラクティブな Web アプリケーションを可能にします。

---

1. XMLHttpRequest とは何ですか?

XMLHttpRequest は、HTTP リクエストを介したサーバーとの通信を容易にする JavaScript の API です。以下をサポートします:

• ページをリロードせずにデータを取得します。
• JSON、XML、HTML、テキストなどのさまざまな形式を処理します。
• 同期操作と非同期操作の両方 (ただし、ほとんどのユースケースでは同期モードは非推奨です)。

---

2. XMLHttpRequest オブジェクトの作成

XHR を使用するには、XMLHttpRequest オブジェクトのインスタンスを作成します。

const xhr = new XMLHttpRequest();

---

3. XHR 通話を行う手順

1. XHR オブジェクトを作成します:

   const xhr = new XMLHttpRequest();

1. リクエストを初期化します: open() メソッドを使用して、HTTP メソッド、URL、および呼び出しが非同期かどうかを定義します。

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

1. 応答のコールバックを設定します: onreadystatechange イベントまたはloadイベントを使用します。

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. リクエストを送信します:

   xhr.send();

---

4.完全な例: GET リクエスト

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5. POST リクエストによるデータの送信

XHR では、POST を使用してサーバーにデータを送信できます。

例:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. XHR のプロパティとメソッド

主要なプロパティ:

• readyState: リクエストの状態 (0 ～ 4) を表します。

  • 0: 未送信
  • 1: 開いた状態
  • 2: HEADERS_RECEIVED
  • 3: 読み込み
  • 4: 完了

• status: HTTP ステータス コード (例: 成功の場合は 200、見つからない場合は 404)。

• responseText: テキスト文字列としての応答本文。

• responseXML: XML データとしての応答本文 (該当する場合)。

主要なメソッド:

• open(method, url, async): リクエストを初期化します。
• send(data): リクエストをサーバーに送信します。
• setRequestHeader(header, value): カスタム ヘッダーを設定します。
• abort(): リクエストをキャンセルします。

---

7.応答状態の処理

onreadystatechange イベントを使用して、XHR リクエストの進行状況を監視できます。

例:

const xhr = new XMLHttpRequest();

---

8. XHR を使用する利点

• 非同期通信: メインスレッドのブロックを回避します。
• クロスブラウザのサポート: 最新のブラウザと古いブラウザで動作します。
• 柔軟なデータ形式: JSON、XML、HTML、およびプレーン テキストをサポートします。

---

9. XHRの制限事項

• 詳細構文: フェッチなどの最新の API と比較して、より多くのコードが必要です。
• コールバック地獄: 複雑なリクエストは、深くネストされたコールバックにつながる可能性があります。
• 最新の機能が制限されています: Promise や async/await などの機能がありません。

---

10.最新の代替手段: Fetch API

XHR は依然として広くサポートされていますが、Fetch API は HTTP リクエストを作成するための最新の Promise ベースのアプローチを提供します。

フェッチ例:

   const xhr = new XMLHttpRequest();

---

11.結論

XMLHttpRequest は、AJAX 呼び出しを行うための信頼性が高く、十分にサポートされているツールですが、フェッチなどの最新の API や Axios などのライブラリの方が、そのシンプルさと拡張機能の点で一般に好まれます。ただし、XHR を理解することは、レガシー コードを保守し、JavaScript での非同期通信がどのように機能するかについてより深い知識を得るために不可欠です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がXMLHttpRequest をマスターする: JavaScript での AJAX 呼び出しのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。