XMLHttpRequest API

概念と使用方法

XMLHttpRequest API の中心となるインターフェイスは XMLHttpRequest です。 HTTP リクエストを行うには、以下のようにします。

1. 新しい XMLHttpRequest のインスタンスを、コンストラクターを呼び出すことで作成します。
2. XMLHttpRequest.open() を呼び出して初期化します。この時点で、リクエストの URL、使用する HTTP メソッド、オプションでユーザー名ーとパスワードを提供します。
3. リクエストの結果を取得するイベントハンドラーを取り付けます。例えば、 load イベントはリクエストが完全に完了した時に発行され、 error イベントは様々なエラー状態の時に発行されます。
4. XMLHttpRequest.send() を呼び出してリクエストを送信します。

XMLHttpRequest API の詳細なガイドについては、 XMLHttpRequest の使い方を参照してください。

インターフェイス

FormData

<form> のフィールドとその値を表すオブジェクトで、 XMLHttpRequest または fetch() を用いてサーバーに送信することができます。

ProgressEvent

Event のサブクラスで progress に渡され、リクエストがどれだけ進行したかの情報を格納します。

XMLHttpRequest

単一の HTTP リクエストを表します。

XMLHttpRequestEventTarget

XMLHttpRequest および XMLHttpRequestUpload のスーパークラスで、どちらでも利用できるイベントを定義しています。

XMLHttpRequestUpload

HTTP アップロードのアップロード処理を表します。コードがアップロードの進捗を追跡できるようにするイベントを提供します。

例

サーバーから JSON データを読み取り

この例では、 https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json から JSON ファイルを取得し、イベントの進捗状況を表示させるイベントリスナーを追加しています。

HTML

<div class="controls">
  <button class="xhr" type="button">クリックすると XHR を開始</button>
</div>

<textarea readonly class="event-log"></textarea>

.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}

JavaScript

const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} バイト転送しました\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});

結果

仕様書

ブラウザーの互換性

関連情報

• フェッチ API