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 2015年7月.
* Some parts of this feature may have varying levels of support.
XMLHttpRequest API を使用すことで、ウェブアプリケーションがウェブサーバーに HTTP リクエストを行い、JavaScript を使用してプログラムでレスポンスを受け取ることができます。これによりウェブサイトは、新しいページに移動することなく、サーバーからのデータでページの一部だけを更新することができます。この方法は、 AJAX としても知られています。
フェッチ API は XMLHttpRequest API をより柔軟で強力に置き換えたものです。フェッチ API は、非同期レスポンスを処理するためにイベントの代わりにプロミスを使用し、サービスワーカーとうまく統合し、 CORS のような HTTP の高度な側面に対応しています。これらの理由から、現代のウェブアプリケーションでは、XMLHttpRequest の代わりにフェッチ API を使用するのが一般的です。
概念と使用方法
XMLHttpRequest API の中心となるインターフェイスは XMLHttpRequest です。 HTTP リクエストを行うには、以下のようにします。
- 新しい
XMLHttpRequestのインスタンスを、コンストラクターを呼び出すことで作成します。 XMLHttpRequest.open()を呼び出して初期化します。この時点で、リクエストの URL、使用する HTTP メソッド、オプションでユーザー名ーとパスワードを提供します。- リクエストの結果を取得するイベントハンドラーを取り付けます。例えば、
loadイベントはリクエストが完全に完了した時に発行され、errorイベントは様々なエラー状態の時に発行されます。 XMLHttpRequest.send()を呼び出してリクエストを送信します。
XMLHttpRequest API の詳細なガイドについては、 XMLHttpRequest の使い方を参照してください。
インターフェイス
FormData-
<form>のフィールドとその値を表すオブジェクトで、XMLHttpRequestまたはfetch()を用いてサーバーに送信することができます。 ProgressEventXMLHttpRequest-
単一の 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> 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(); }); 結果
仕様書
| Specification |
|---|
| XMLHttpRequest |