Baseline Widely available *
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
.
The central interface in the XMLHttpRequest API is XMLHttpRequest
. To make an HTTP request:
XMLHttpRequest
instance by calling its constructor.XMLHttpRequest.open()
. At this point you provide the URL for the request, the HTTP method to use, and optionally, a username and password.load
event is fired when the request has successfully completed, and the error
event is fired in various error conditions.XMLHttpRequest.send()
.For an in-depth guide to the XMLHttpRequest API, see Using XMLHttpRequest.
InterfacesFormData
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.
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.
<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 See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4