【JavaScript入門】XMLHttpRequestで通信をする

　XMLHttpRequest（XHR） は Fetch API 以前から存在するクラシックな通信インターフェースです。イベントとコールバックで制御するためコードが長くなりがちですが、古いブラウザやレガシーなライブラリとの互換性を保つ場面では今でも使われています。ここでは「最小の GET リクエスト」を題材に、API の要点と実装例を整理します。

１．ローカルサーバーの起動手順

1.1. Node.js のインストール

　01章のイントロダクション「10 開発環境の準備：Node.jsのインストール」の Node.js の環境準備ができているという前提で話を進めます。Node.js の環境準備ができていない場合は、以下のリンク先をご確認ください。

1.2. index.js の作成

以下の index.js を作成して、例えば「C:\Users\<ユーザー名>\Desktop\node-js\app2」に保存します。

ファイル名： index.js

// index.js
const express = require("express");
const app = express();

// ルート
app.get("/", (_, res) => res.send("Hello World"));

// 静的ファイル（/net, /web-worker 配下）
[
  { path: "/net",         root: __dirname + "/net" },
  { path: "/web-worker",  root: __dirname + "/web-worker" }
].forEach(opt => app.use(opt.path, express.static(opt.root)));

app.listen(3000, () => console.log("Server started: http://localhost:3000/"));

1.3. PowerShell を起動し、index.js を置いたフォルダへ移動します。

移動例：

PS C:\Users\joeac\Desktop\node-js\app2>

1.4. ターミナルで `node .` を実行

node .

1.5. ブラウザのURLに「http://localhost:3000/ 」を入力

すると「Hello World」が表示されます。

２．XHR 基本フロー

手順	コード例	意味
① インスタンス生成	const req = new XMLHttpRequest();	通信オブジェクトを作る
② ハンドラ登録	req.addEventListener('load', e => { ... });	完了時（成功・失敗どちらでも）に呼ばれる
③ リクエスト設定	req.open('GET', url);	HTTP メソッドと URL を指定
④ 送信	req.send();	通信スタート

代表的プロパティ

プロパティ	内容
`status`	200, 404 などの HTTP ステータス
`statusText`	`OK`, `Not Found` など
`responseURL`	実際にアクセスした URL
`response / responseText`	生データ（型は `responseType` 設定で変化）

３．サンプルファイル構成

app2/
├─ net/
│  ├─ data.json
│  └─ xml-http-demo.html
└─ index.js   ← Express サーバー（"Fetch APIで通信をする"で使用したものと同じ）

ファイル名： data.json

{ "menu": ["ホットコーヒー", "アイスコーヒー"] }

４．xml-http-demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>📡 XMLHttpRequest デモ</title>
  <style>
    body{font-family:"Segoe UI",sans-serif;background:#f8fcff;margin:2rem}
    h1{text-align:center;font-size:1.8rem;margin-bottom:1rem}
    button{padding:.6rem 1.2rem;border:none;border-radius:6px;
           background:#0078d4;color:#fff;font-weight:bold;cursor:pointer}
    button:hover{opacity:.85}
    #log{white-space:pre-wrap;background:#fff;border:1px solid #ccc;
         border-radius:8px;margin-top:1rem;padding:1rem;min-height:6rem}
  </style>
</head>
<body>
  <h1>📡 XMLHttpRequest デモ</h1>
  <button id="loadBtn">JSON を取得</button>
  <div id="log">ここに結果が表示されます</div>

  <script>
  const log = txt => document.getElementById("log").textContent += txt + "\n";

  document.getElementById("loadBtn").onclick = () => {
    document.getElementById("log").textContent = "";     // ログクリア
    const url = "./data.json";                           // 相対パス

    const req = new XMLHttpRequest();                    // ➀
    req.addEventListener("load", function(){             // ➁ (this === req)
      log("--- this ---");
      log(this.status);
      log(this.statusText);
      log(this.responseURL);
      log(this.responseText);

      log("--- req ---");
      log(req.status);
      log(req.statusText);
      log(req.responseURL);
      log(req.responseText);
    });

    req.open("GET", url);   // ➂
    req.send();             // ➃
  };
  </script>
</body>
</html>

ブラウザの出力例

ブラウザのURLに「http://localhost:3000/ net/xml-http-demo.html」と入力します。

５．プログラム解説

インスタンス生成 — new XMLHttpRequest() は毎回新しく作成する。
load イベント — HTTP 200 でも 404 でも発火するため、status 判定が必要。
open() — async 引数（第３引数）を省略すると既定で true（非同期）。
send() — POST の場合は send(body) でデータを渡す。
this と req — イベント内の this は送信したインスタンスを指すので、同じ値が得られる。

まとめ

XMLHttpRequest は イベント駆動 + 状態管理 が必須で、Fetch API より冗長ですが、

旧ブラウザ互換（IE11 など）
プログレスイベント（progress）によるアップロード／ダウンロード監視
といった用途で役立ちます。まずは GET リクエストを動かし、readyState 監視や POST・FormData 送信へ発展させてみてください。

【JavaScript入門】XMLHttpRequestで通信をする