XMLHttpRequest API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

メモ: この機能はウェブワーカー内で利用可能ですが、サービスワーカーでは使用できません。

XMLHttpRequest API を使用すことで、ウェブアプリケーションがウェブサーバーに HTTP リクエストを行い、JavaScript を使用してプログラムでレスポンスを受け取ることができます。これによりウェブサイトは、新しいページに移動することなく、サーバーからのデータでページの一部だけを更新することができます。この方法は、 Ajax としても知られています。

フェッチ API は XMLHttpRequest API をより柔軟で強力に置き換えたものです。フェッチ API は、非同期レスポンスを処理するためにイベントの代わりにプロミスを使用し、サービスワーカーとうまく統合し、 CORS のような HTTP の高度な側面に対応しています。これらの理由から、現代のウェブアプリケーションでは、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/ から JSON ファイルを取得し、イベントの進捗状況を表示させるイベントリスナーを追加しています。

HTML

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

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

JavaScript

js
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();
});

結果

仕様書

Specification
XMLHttpRequest Standard

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
XMLHttpRequest
XMLHttpRequest() constructor
abort
abort event
Authorization header removed from cross-origin redirects
error event
getAllResponseHeaders
Header names returned in all lower case
getResponseHeader
load event
loadend event
loadstart event
open
overrideMimeType
progress event
readyState
readystatechange event
response
responseText
responseType
responseType.arraybuffer_value
responseType.blob_value
responseType.document_value
responseType.json_value
responseURL
responseXML
send
ArrayBufferView as parameter to send()
ArrayBuffer as parameter to send()
Blob as parameter to send()
FormData as parameter to send()
URLSearchParams as parameter to send()
setAttributionReporting
Experimental
setPrivateToken
Experimental
setRequestHeader
status
statusText
timeout
timeout event
upload
withCredentials
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

関連情報