Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in Ajax programming.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">XMLHttpRequestEventTarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#D4DDE4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">XMLHttpRequest</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).
If your communication needs involve receiving event or message data from the server, consider using server-sent events through the EventSource interface. For full-duplex communication, WebSockets may be a better choice.
Constructor
XMLHttpRequest()- The constructor initializes an XMLHttpRequest. It must be called before any other method calls.
Properties
This interface also inherits properties of XMLHttpRequestEventTarget and of EventTarget.
XMLHttpRequest.onreadystatechange- An
EventHandlerthat is called whenever thereadyStateattribute changes. XMLHttpRequest.readyStateRead only- Returns an
unsigned short, the state of the request. XMLHttpRequest.responseRead only- Returns an
ArrayBuffer,Blob,Document, JavaScript object, or aDOMString, depending on the value ofXMLHttpRequest.responseType. that contains the response entity body. XMLHttpRequest.responseTextRead only- Returns a
DOMStringthat contains the response to the request as text, ornullif the request was unsuccessful or has not yet been sent. XMLHttpRequest.responseType- Is an enumerated value that defines the response type.
XMLHttpRequest.responseURLRead only- Returns the serialized URL of the response or the empty string if the URL is null.
XMLHttpRequest.responseXMLRead only Not available to workers- Returns a
Documentcontaining the response to the request, ornullif the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. XMLHttpRequest.statusRead only- Returns an
unsigned shortwith the status of the response of the request. XMLHttpRequest.statusTextRead only- Returns a
DOMStringcontaining the response string returned by the HTTP server. UnlikeXMLHTTPRequest.status, this includes the entire text of the response message ("200 OK", for example).
Note: The HTTP/2 specification (8.1.2.4 Response Pseudo-Header Fields), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.
XMLHttpRequest.timeout- Is an
unsigned longrepresenting the number of milliseconds a request can take before automatically being terminated. XMLHttpRequestEventTarget.ontimeout- Is an
EventHandlerthat is called whenever the request times out. XMLHttpRequest.uploadRead only- Is an
XMLHttpRequestUpload, representing the upload process. XMLHttpRequest.withCredentials- Is a
Booleanthat indicates whether or not cross-siteAccess-Controlrequests should be made using credentials such as cookies or authorization headers.
Non-standard properties
XMLHttpRequest.channelRead only- Is a
nsIChannel. The channel used by the object when performing the request. XMLHttpRequest.mozAnonRead only- Is a boolean. If true, the request will be sent without cookie and authentication headers.
XMLHttpRequest.mozSystemRead only- Is a boolean. If true, the same origin policy will not be enforced on the request.
XMLHttpRequest.mozBackgroundRequest- Is a boolean. It indicates whether or not the object represents a background service request.
XMLHttpRequest.mozResponseArrayBufferObsolete since Gecko 6 Read only- Is an
ArrayBuffer. The response to the request, as a JavaScript typed array. XMLHttpRequest.multipartObsolete since Gecko 22- This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or
responseTextfrom progress events instead.
Event handlers
onreadystatechange as a property of the XMLHttpRequest instance is supported in all browsers.
Since then, a number of additional event handlers have been implemented in various browsers (onload, onerror, onprogress, etc.). See Using XMLHttpRequest.
More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener() APIs in addition to setting on* properties to a handler function.
Methods
XMLHttpRequest.abort()- Aborts the request if it has already been sent.
XMLHttpRequest.getAllResponseHeaders()- Returns all the response headers, separated by CRLF, as a string, or
nullif no response has been received. XMLHttpRequest.getResponseHeader()- Returns the string containing the text of the specified header, or
nullif either the response has not yet been received or the header doesn't exist in the response. XMLHttpRequest.open()- Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use
openRequest()instead. XMLHttpRequest.overrideMimeType()- Overrides the MIME type returned by the server.
XMLHttpRequest.send()- Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
XMLHttpRequest.setRequestHeader()- Sets the value of an HTTP request header. You must call
setRequestHeader()afteropen(), but beforesend().
Non-standard methods
XMLHttpRequest.init()- Initializes the object for use from C++ code.
XMLHttpRequest.openRequest()- Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use
open()instead. See the documentation foropen(). XMLHttpRequest.sendAsBinary()- A variant of the
send()method that sends binary data.
Specifications
| Specification | Status | Comment |
|---|---|---|
| XMLHttpRequest | Living Standard | Live standard, latest version |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | Yes | 1 | 7 | Yes | 1.2 |
onreadystatechange | 1 | 12 | 1 | 71 | Yes | 1.2 |
readyState | 1 | 12 | 1 | 7 | Yes | 1.2 |
response | Yes | 12 | Yes | ? | Yes | Yes |
responseText | Yes | 12 | Yes | ?2 | Yes | 10 |
responseType | 31 | 12 | 6 | 10 | 18 | 7 |
responseURL | 37 | 14 | 32 | No | 24 | 8 |
responseXML | Yes | 12 | Yes3 | Yes | Yes | Yes |
status | 1 | 12 | 1 | 71 | Yes | 1.2 |
statusText | 1 | 12 | 1 | 71 | Yes | 1.2 |
timeout | 29 | 12 | 12 | 8 | 17 12 — 16 | Yes |
upload | 1 | 12 | Yes | ? | Yes | 10 |
withCredentials | Yes | 12 | 3.54 | 105 | 12 | 4 |
abort | 1 | 12 | Yes | 7 56 | Yes | 1.2 |
getAllResponseHeaders | 1 | 12 | 47 | 7 56 | Yes | 1.2 |
getResponseHeader | 1 | 12 | Yes7 | 7 56 | Yes | 1.2 |
open | 1 | 12 | Yes8 | 7 56 | Yes | 1.2 |
overrideMimeType | 1 | 12 | Yes | 11 56 | Yes | 1.2 |
send | 1 | 12 | 1 | 7 56 | Yes | 1.2 |
sendAsBinary | No9 | No | 2 — 31 | No | No | No |
setRequestHeader | 1 | 12 | Yes | 7 56 | Yes | 1.2 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | 1 | 12 | 4 | Yes | ? | Yes |
onreadystatechange | 1 | 1 | Yes | 4 | Yes | ? | Yes |
readyState | Yes | 1 | Yes | 4 | Yes | ? | Yes |
response | Yes | Yes | Yes | Yes | Yes | ? | Yes |
responseText | Yes | Yes | Yes | Yes | Yes | ? | Yes |
responseType | 55 | 55 | Yes | 50 | Yes | ? | 6.0 |
responseURL | 37 | 37 | ? | 32 | 24 | ? | Yes |
responseXML | Yes | Yes | Yes | Yes3 | Yes | Yes | Yes |
status | Yes | Yes | Yes | 4 | Yes | ? | Yes |
statusText | Yes | 1 | Yes | 4 | Yes | ? | Yes |
timeout | Yes | Yes | Yes | Yes | Yes | ? | Yes |
upload | Yes | 1 | ? | ? | Yes | ? | Yes |
withCredentials | Yes | Yes | ? | 44 | Yes | ? | Yes |
abort | Yes | Yes | Yes | Yes | Yes | ? | Yes |
getAllResponseHeaders | Yes | Yes | Yes | 47 | Yes | ? | Yes |
getResponseHeader | Yes | 1 | Yes | Yes7 | Yes | ? | Yes |
open | Yes | 1 | Yes | Yes8 | Yes | Yes | Yes |
overrideMimeType | Yes | 1 | Yes | Yes | Yes | Yes | Yes |
send | Yes | 1 | Yes | 4 | Yes | Yes | Yes |
sendAsBinary | No9 | No9 | No | 4 — 31 | No | No | No |
setRequestHeader | Yes | 1 | Yes | Yes | Yes | Yes | Yes |
1. Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()
2. Before IE 10, the value of XMLHttpRequest.responseText could be read only once the request was complete.
3. Prior to Firefox 51, an error parsing the received data added a <parsererror> node to the top of the Document and then returned the Document in whatever state it happens to be in. This was inconsistent with the specification. Starting with Firefox 51, this scenario now correctly returns null as per the spec.
4. Starting with Firefox 11, it's no longer supported to use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.
5. Internet Explorer versions 8 and 9 supported cross-domain requests (CORS) using XDomainRequest
6. Implemented via ActiveXObject
7. Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.
8. Starting in Firefox 30, synchronous requests on the main thread have been deprecated due to their negative impact on performance and the user experience. Therefore, the async parameter may not be false except in a Worker.
9. There is a polyfill available to support sendAsBinary().
See also
XMLSerializer: Serializing a DOM tree into XML- MDN tutorials covering
XMLHttpRequest: - HTML5 Rocks — New Tricks in XMLHttpRequest2