11.3 XMLHttpRequest とは

XMLHttpRequest とは古くから使われている非同期通信の方法です。設定項目が多く、処理の流れが少し複雑なのが特徴です。もはや使われることも少なくなった技術ですので、この節は、流し読み程度でも OK です。

ソースコードを例示すると、以下のような形になります。前項で紹介した https://jsonplaceholder.typicode.com/users/1（ユーザー一覧ではなく、ID:1 のユーザー情報のみ）からデータを取ってくる場合、XMLHttpRequest では、こんな記述になります。

// 1. 通信用のオブジェクトを作成します
const xhr = new XMLHttpRequest();

// 2. リクエストの設定（GET メソッドで指定の URL へ）
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);

// 3. 通信完了時の処理を定義します
xhr.onload = () => {
    if (xhr.status === 200) {
    // 通信成功：受け取ったテキストをオブジェクトに変換
    const user = JSON.parse(xhr.responseText);
        alert("【成功】取得したユーザー名: " + user.name);
    } else {
        // サーバーエラーなど
        alert(`エラーが発生しました。ステータス: ${xhr.status}`);
    }
};

// 4. 通信エラー時の処理
xhr.onerror = () => {
    alert("ネットワークエラーが発生しました。");
};

// 5. 実際にリクエストを送信します
xhr.send();

NEXT>> 11.4 Fetch API とは