XMLHttpRequest API

Concepts and usage

The central interface in the XMLHttpRequest API is XMLHttpRequest. To make an HTTP request:

1. Create a new XMLHttpRequest instance by calling its constructor.
2. Initialize it by calling XMLHttpRequest.open(). At this point you provide the URL for the request, the HTTP method to use, and optionally, a username and password.
3. Attach event handlers to get the result of the request. For example, the load event is fired when the request has successfully completed, and the error event is fired in various error conditions.
4. Send the request by calling XMLHttpRequest.send().

For an in-depth guide to the XMLHttpRequest API, see Using XMLHttpRequest.

Interfaces

FormData

An object representing <form> fields and their values, which can be sent to a server using XMLHttpRequest or fetch().

ProgressEvent

A subclass of Event which is passed into the progress, and which contains information about how much of the request has been completed.

XMLHttpRequest

Represents a single HTTP request.

XMLHttpRequestEventTarget

A superclass of both XMLHttpRequest and XMLHttpRequestUpload, defining the events that are available in both of those interfaces.

XMLHttpRequestUpload

Represents the upload process for an HTTP upload. Provides events enabling code to track the progress of an upload.

Examples

Fetching JSON data from the server

In this example we fetch a JSON file from https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json, adding event listeners to show the progress of the event.

HTML

<div class="controls">
  <button class="xhr" type="button">Click to start 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} bytes transferred\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();
});

Result

Specifications

Browser compatibility