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.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers, except for Service Workers.

The XMLHttpRequest API enables web apps to make HTTP requests to web servers and receive the responses programmatically using JavaScript. This in turn enables a website to update just part of a page with data from the server, rather than having to navigate to a whole new page. This practice is also sometimes known as AJAX.

The Fetch API is the more flexible and powerful replacement for the XMLHttpRequest API. The Fetch API uses promises instead of events to handle asynchronous responses, integrates well with service workers, and supports advanced aspects of HTTP such as CORS. For these reasons, the Fetch API is usually used in modern web apps instead of XMLHttpRequest.

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

html
<div class="controls">
  <button class="xhr" type="button">Click to start 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} 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

Specification
XMLHttpRequest

Browser compatibility

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.

See also