【JavaScript入門】XMLHttpRequest（XHR）の使い方｜GET・POSTリクエストの実装方法を初心者向けに解説

XMLHttpRequest（XHR）は、fetch API が登場する以前に Ajax 通信の中心として使われていた古い非同期通信 API です。
現在ではレガシー扱いですが、GET・POST の基本構造や readyState の仕組みを理解しておくと、既存システムの保守やコード読解に役立ちます。

XMLHttpRequest（XHR）とは？

XMLHttpRequest（XHR）は、JavaScript でサーバーと非同期通信を行うための古くからある API です。
fetch API が登場するまでは Ajax の中心的存在でした。

現在でも一部のレガシー環境で使われているため、
基本的な使い方を理解しておくことは重要です。

XHR の基本構造

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api");
xhr.send();

最低限必要なのはこの3ステップです。

• ① new XMLHttpRequest()
• ② open(method, url)
• ③ send()

GETリクエストの書き方

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

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

xhr.send();

readyState の意味

値	状態
0	未初期化
1	open() 実行済み
2	ヘッダー受信
3	データ受信中
4	通信完了

実務では readyState === 4 と status === 200 をセットで確認します。

POSTリクエストの書き方（JSON送信）

const xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log(JSON.parse(xhr.responseText));
  }
};

const data = {
  title: "Hello",
  body: "XHR POST example",
  userId: 1
};

xhr.send(JSON.stringify(data));

POST の場合は setRequestHeader で
Content-Type を指定する必要があります。

エラー処理の書き方

xhr.onerror = () => {
  console.error("ネットワークエラーが発生しました");
};

fetch と違い、XHR はネットワークエラー時に onerror が発火します。

同期通信（非推奨）

XHR には同期通信（第3引数に false）もありますが、
ブラウザがフリーズするため完全に非推奨 です。

// 非推奨
xhr.open("GET", "/api", false);

まとめ

XMLHttpRequest（XHR）は古い API ですが、
GET・POST の基本構造を理解しておくと
レガシーコードの読み書きに役立ちます。

• GET → open("GET") + send()
• POST → setRequestHeader + JSON.stringify
• readyState と status のチェックが重要
• エラー処理は onerror を使う

現代では fetch API が主流ですが、
XHR の理解は非同期処理の基礎として重要です。