XMLHttpRequest
 |
|---|
| Request methods |
| Header fields |
| Response status codes |
| Security access control methods |
| Security vulnerabilities |
XMLHttpRequest (XHR) is an
History
The concept behind the XMLHttpRequest object was originally created by the developers of
Internet Explorer versions 5 and 6 did not define the XMLHttpRequest object identifier in their scripting languages as the XMLHttpRequest identifier itself was not standard at the time of their releases.
The
With the advent of cross-browser JavaScript libraries such as jQuery, developers can invoke XMLHttpRequest functionality indirectly.
Standards
The
The W3C also published another Working Draft specification for the XMLHttpRequest object, "XMLHttpRequest Level 2", on February 25, 2008.[17] Level 2 consists of extended functionality to the XMLHttpRequest object, including, but not limited to, progress events, support for cross-site requests, and the handling of byte streams. At the end of 2011, the Level 2 specification was abandoned and absorbed into the original specification.[18]
At the end of 2012, the WHATWG took over development and maintains a living standard using Web IDL.[19] W3C's current drafts are based on snapshots of the WHATWG standard.
HTTP request
 | ) |
The following sections demonstrate how a request using the XMLHttpRequest object functions within a conforming user agent based on the W3C Working Draft. As the W3C standard for the XMLHttpRequest object is still a draft, user agents may not abide by all the functionings of the W3C definition and any of the following is subject to change. Extreme care should be taken into consideration when scripting with the XMLHttpRequest object across multiple user agents. This article will try to list the inconsistencies between the major user agents.
The open method
 | This section may be confusing or unclear to readers. (October 2017) |
The
open( Method, URL, Asynchronous, UserName, Password )
The first parameter of the method is a
- GET (supported by Internet Explorer 7+, Mozilla 1+)
- POST (supported by IE7+, Mozilla 1+)
- HEAD (supported by IE7+)
- PUT
- DELETE
- OPTIONS (supported by IE7+)
However, request methods are not limited to the ones listed above. The W3C draft states that a browser may support additional request methods at their own discretion.
The second parameter of the method is another
The third parameter, a
The fourth and fifth parameters are the username and password, respectively. These parameters, or just the username, may be provided for authentication and authorization if required by the server for this request.
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filepath, false);
xmlhttp.send(null);
}
The setRequestHeader method
Upon successful initialization of a request, the setRequestHeader method of the XMLHttpRequest object can be invoked to send
setRequestHeader( Name, Value )
The first parameter of this method is the text string name of the header. The second parameter is the text string value. This method must be invoked for each header that needs to be sent with the request. Any headers attached here will be removed the next time the open method is invoked in a W3C conforming user agent.
The send method
To send an HTTP request, the send method of the XMLHttpRequest must be invoked. This method accepts a single parameter containing the content to be sent with the request.
send( Data )
This parameter may be omitted if no content needs to be sent. The W3C draft states that this parameter may be any type available to the scripting language as long as it can be turned into a text string, with the exception of the DOM document object. If a user agent cannot serialise the parameter, then the parameter should be ignored. Firefox 3.0.x and previous versions will however throw an exception if send is called without an argument.[22]
If the parameter is a DOM document object, a user agent should assure the document is turned into well-formed XML using the encoding indicated by the inputEncoding property of the document object. If the Content-Type request header was not added through setRequestHeader yet, it should automatically be added by a conforming user agent as "application/xml;charset=charset," where charset is the encoding used to encode the document.
If the user agent is configured to use a proxy server, then the XMLHttpRequest object will modify the request appropriately so as to connect to the proxy instead of the origin server, and send Proxy-Authorization headers as configured.
The onreadystatechange event listener
If the open method of the XMLHttpRequest object was invoked with the third parameter set to true for an asynchronous request, the onreadystatechange event listener will be automatically invoked for each of the following actions that change the readyState property of the XMLHttpRequest object.
State changes work like this:
- State Description
0 The request is not initialized. 1 The request has been set up. 2 The request has been sent. 3 The request is in process. 4 The request is completed.
- After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1 (OPENED).
- After the send method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object should be assigned a value of 2 (HEADERS_RECEIVED).
- Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3 (LOADING).
- Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4 (DONE).
The listener will only respond to state changes which occur after the listener is defined. To detect states 1 and 2, the listener must be defined before the open method is invoked. The open method must be invoked before the send method is invoked.
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
alert(this.readyState);
}
};
request.open('GET', 'somepage.xml', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Tells server that this call is made for ajax purposes.
// Most libraries like jQuery/Prototype/Dojo do this
request.send(null); // No data needs to be sent along with the request.
The HTTP response
After a successful and completed call to the send method of the XMLHttpRequest, if the server response was
Cross-domain requests
In the early development of the
foo.example.com for information from bar.example.com will normally fail.
Various alternatives exist to circumvent this security feature, including using
The CORS protocol has several restrictions, with two models of support. The simple model does not allow setting custom request headers and omits
Fetch alternative
Program flow using asynchronous XHR callbacks can present difficulty with readability and maintenance.
Fetch is also standardized by WHATWG.[27]
Example
fetch("somepage.xml", {
method: "GET",
headers: {
"X-Requested-With": "XMLHttpRequest" // Tells the server that this call is made for AJAX purposes.
// Most libraries like jQuery/Prototype/Dojo do this
}
}).then((response) => {
if (response.status == 200) {
alert(response.status);
}
});
See also
References
- ^ "The responseXML attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
- ^ "Response entity body of XMLHttpRequest, W3C Editor's Draft". W3.org. 2012-02-06. Retrieved 2012-02-05.
- ^ "The responseText attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
- ^ a b "Article on the history of XMLHTTP by an original developer". Alexhopmann.com. 2007-01-31. Archived from the original on 2009-01-30. Retrieved 2009-07-14.
- ^ "Specification of the IXMLHTTPRequest interface from the Microsoft Developer Network". Msdn.microsoft.com. Retrieved 2009-07-14.
- ^ a b c Dutta, Sunava (2006-01-23). "Native XMLHTTPRequest object". IEBlog. Microsoft. Retrieved 2006-11-30.
- ^ "Ajax Reference (XMLHttpRequest object)". JavaScript Kit. 2008-07-22. Retrieved 2009-07-14.
- ^ "Specification of the nsIXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2008-05-16. Archived from the original on 2008-10-17. Retrieved 2009-07-14.
- ^ "Specification of the nsIJSXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Archived from the original on 2008-11-17. Retrieved 2009-07-14.
- ^ "Specification of the XMLHttpRequest object from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Retrieved 2009-07-14.
- ^ a b "Version history for the Mozilla Application Suite". Mozilla.org. Retrieved 2009-07-14.
- ^ a b "Downloadable, archived releases for the Mozilla browser". Archive.mozilla.org. Retrieved 2009-07-14.
- ^ "Archived news from Mozillazine stating the release date of Safari 1.2". Weblogs.mozillazine.org. Archived from the original on 2009-06-02. Retrieved 2009-07-14.
- ^ "Press release stating the release date of Opera 8.0 from the Opera website". Opera.com. 2005-04-19. Retrieved 2009-07-14.
- ^ Soft-Info.org. "Detailed browser information stating the release date of iCab 3.0b352 from". Soft-Info.com. Retrieved 2009-07-14.
- ^ "Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006". W3.org. Retrieved 2009-07-14.
- ^ "Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008". W3.org. Retrieved 2009-07-14.
- ^ "XMLHttpRequest Editor's Draft 5 December 2011". w3.org. Retrieved 5 December 2011.
- ^ "XMLHttpRequest Standard". xhr.spec.whatwg.org.
- ^ "Dependencies of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
- ^ "The "open" method of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-10-13.
- ^ Test-Driven JavaScript Development, Christian Johansen, ADDISON-WESLEY, 2010, p. 270
- ^ "XMLHttpRequest Level 2". Retrieved 2013-11-14.
- ^ "Can I use Cross-Origin Resource Sharing?". Retrieved 2013-11-14.
- ^ "XDomainRequest - Restrictions, Limitations and Workarounds". Retrieved 2013-11-14.
- ^ "7.1.5 Cross-Origin Request with Preflight". Retrieved 2014-04-25.
- ^ "Fetch Standard".
External links
- XMLHttpRequest Living Standard by the WHATWG
- XMLHttpRequest Level 1 draft by the W3C
| Versions |
| ||||
|---|---|---|---|---|---|
| Overview | |||||
| Technologies | |||||
| Software and engines | |||||
| Implementations |
| ||||
| Events | |||||
| People |
| ||||
