XMLHttpRequest
HTTP |
---|
Request methods |
Header fields |
Response status codes |
Security access control methods |
Security vulnerabilities |
XMLHttpRequest (XHR) is an
History
The concept behind XMLHttpRequest was conceived in 2000 by the developers of Microsoft Outlook.[3] The concept was then implemented within the Internet Explorer 5 browser (2001). However, the original syntax did not use the XMLHttpRequest
identifier. Instead, the developers used the identifiers ActiveXObject("Msxml2.XMLHTTP")
and ActiveXObject("Microsoft.XMLHTTP")
.[4] As of Internet Explorer 7 (2006), all browsers support the XMLHttpRequest
identifier.[4]
The XMLHttpRequest
identifier is now the
Standards
The World Wide Web Consortium (W3C) published a Working Draft specification for the XMLHttpRequest object on April 5, 2006.[7] [a] On February 25, 2008, the W3C published the Working Draft Level 2 specification.[8] Level 2 added methods to monitor event progress, allow cross-site requests, and handle byte streams. At the end of 2011, the Level 2 specification was absorbed into the original specification.[9]
At the end of 2012, the WHATWG took over development and maintains a living document using Web IDL.[10]
Usage
Generally, sending a request with XMLHttpRequest has several programming steps.[11]
- Create an XMLHttpRequest object by calling a constructor:
const request = new XMLHttpRequest();
- Call the "open" method to specify the request type, identify the relevant resource, and select synchronous or asynchronous operation:
request.open('GET', '/api/message', true /* asynchronous */);
- For an asynchronous request, set a listener that will be notified when the request's state changes:
request.onreadystatechange = listener;
- Initiate the request by calling the "send" method:
request.send();
- Respond to state changes in the event listener. If the server sends response data, by default it is captured in the "responseText" property. When the object stops processing the response, it changes to state 4, the "done" state.
function listener() { // Check whether the request is done and successful. if (request.readyState == 4 && request.status == 200) console.log(request.responseText); // Display the text. }
Aside from these general steps, XMLHttpRequest has many options to control how the request is sent and how the response is processed. Custom
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.[21]
Example
fetch('/api/message')
.then(response => {
if (response.status != 200) throw new Error('Request failed');
return response.text();
})
.then(text => {
console.log(text);
});
See also
- WebSocket
- Representational state transfer(REST)
References
- ISBN 978-0-596-10180-0.
Javascript lacks a portable mechanism for general network communication[.] ... But thanks to the XMLHttpRequest object, ... Javascript code can make HTTP calls back to its originating server[.]
- ^ ISBN 978-0-596-10180-0.
- ^ "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.
The reality is that the client architecture of GMail appears to follow the rough design of the Exchange 2000 implementation of Outlook Web Access for IE5 and later which shipped way back in 2000.
- ^ ISBN 978-0-596-10180-0.
- ^ "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.
- ^ "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.
- ^ van Kesteren, Anne (February 19, 2024). XMLHttpRequest Living Standard (Report). Retrieved 2024-04-09.
- ^ Holdener, Anthony T. III (2008). Ajax: The Definitive Guide. pp. 70–71, 76.
- ^ van Kesteren 2024, 3.5.2.
- ^ van Kesteren 2024, 3.5.6.
- ^ van Kesteren 2024, 3.6.9.
- ^ van Kesteren 2024, 3.5.7.
- ^ van Kesteren 2024, 3.5.3.
- ^ "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".
Notes
- Opera Softwareand Dean Jackson of W3C.
External links
- XMLHttpRequest Living Standard by the WHATWG
- XMLHttpRequest Level 1 draft by the W3C