XMLHttpRequest API

BaselineWidely 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 inWeb Workers, except forService Workers.

TheXMLHttpRequest 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 asAJAX.

TheFetch API is the more flexible and powerful replacement for the XMLHttpRequest API. The Fetch API usespromises instead of events to handle asynchronous responses, integrates well withservice workers, and supports advanced aspects of HTTP such asCORS. For these reasons, the Fetch API is usually used in modern web apps instead ofXMLHttpRequest.

Concepts and usage

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

Create a newXMLHttpRequest instance by calling itsconstructor.
Initialize it by callingXMLHttpRequest.open(). At this point you provide the URL for the request, theHTTP method to use, and optionally, a username and password.
Attach event handlers to get the result of the request. For example, theload event is fired when the request has successfully completed, and theerror event is fired in various error conditions.
Send the request by callingXMLHttpRequest.send().

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

Interfaces

FormData: An object representing<form> fields and their values, which can be sent to a server usingXMLHttpRequest orfetch().
ProgressEvent: A subclass ofEvent which is passed into theprogress, and which contains information about how much of the request has been completed.
XMLHttpRequest: Represents a single HTTP request.
XMLHttpRequestEventTarget: A superclass of bothXMLHttpRequest andXMLHttpRequestUpload, 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 fromhttps://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json, adding event listeners to show the progress of the event.

HTML

html

<div>  <button type="button">Click to start XHR</button></div><textarea readonly></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();});