【JS応用】XMLHttpRequest

XMLHttpRequestの全貌：レガシー技術から学ぶ非同期通信の原点

現代のフロントエンド開発において、データの取得といえばFetch APIやAxiosが標準となっています。しかし、それらの基盤となっているのがXMLHttpRequest（XHR）です。歴史的な経緯から「古い技術」として敬遠されがちですが、その仕様を深く理解することは、ブラウザの通信モデルを理解する上で避けては通れない道です。本稿では、XMLHttpRequestの内部構造から、実務における扱い方、そして現代における立ち位置までを網羅的に解説します。

XMLHttpRequestの歴史的背景と役割

XMLHttpRequestは、1999年にMicrosoftがOutlook Web Accessのために開発したActiveXオブジェクトが起源です。その後、MozillaやApple、Googleなどが追随し、現在のW3C標準に至りました。この技術がなければ、ページ遷移を伴わない動的なコンテンツの更新、すなわち「AJAX（Asynchronous JavaScript and XML）」の爆発的な普及はあり得ませんでした。

XHRの最大の特徴は、ページ全体を再読み込みすることなく、サーバーからXMLやJSON、テキストデータなどを非同期に取得できる点にあります。この「非同期」という概念こそが、現在のSPA（Single Page Application）の礎です。

XMLHttpRequestの内部メカニズムとライフサイクル

XMLHttpRequestオブジェクトは、通信状態を管理するために「readyState」というプロパティを持っています。この状態遷移を理解することが、XHRを使いこなすための第一歩です。

0: UNSENT – オブジェクトが作成されたが、open()が呼び出されていない
1: OPENED – open()が呼び出された
2: HEADERS_RECEIVED – send()が呼び出され、ヘッダーが受信された
3: LOADING – データを受信中
4: DONE – 全ての処理が完了

このreadyStateが変化するたびに「onreadystatechange」イベントが発生します。このイベントを監視することで、通信の進行状況に応じた適切な処理を実行することが可能です。

サンプルコード：堅牢なXHRの実装

現代的な開発ではasync/awaitが主流ですが、XHRはイベント駆動型であるため、Promiseでラップすることで扱いやすくなります。以下に、現代的な設計思想を取り入れたXHRのラッパー実装例を示します。

function fetchWithXHR(url, method = 'GET', data = null) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          try {
            const response = JSON.parse(xhr.responseText);
            resolve(response);
          } catch (e) {
            reject(new Error('JSON parse error'));
          }
        } else {
          reject(new Error(`Request failed with status ${xhr.status}`));
        }
      }
    };

    xhr.onerror = () => reject(new Error('Network error'));
    
    // 進捗状況の監視も可能
    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Progress: ${percentComplete}%`);
      }
    };

    xhr.send(data ? JSON.stringify(data) : null);
  });
}