XMLHttpRequest

HTTP

Persistence · Compression · HTTP Secure

Headers

ETag · Cookie · Referrer · Location

Status codes

301 Moved permanently

302 Found

303 See Other

403 Forbidden

404 Not Found

XMLHttpRequest (XHR) is a DOM API that can be used inside a web browser scripting language, such as JavaScript, to send an HTTP or an HTTPS request directly to a web server and load the server response data directly back into the scripting language. Once the data is within the scripting language, it is available as both an XML document, if the response was valid XML markup, and as plain text. The XML data can be used to manipulate the currently active document in the browser window without the need of the client loading a new web page document. Plain text data can be evaluated within the scripting language to manipulate the document, too; in the example of JavaScript, the plain text may be formatted as JSON by the web server and evaluated within JavaScript to create an object of data for use on the current DOM.

XMLHttpRequest has an important role in the AJAX web development technique. It is currently used by many websites to implement responsive and dynamic web applications. Examples of these web applications include Gmail, Google Maps, Bing Maps, the MapQuest dynamic map interface, Facebook, and others.

History and support

The concept behind the XMLHttpRequest object was originally created by the developers of Outlook Web Access for Microsoft Exchange Server 2000. An interface called IXMLHTTPRequest was developed and implemented into the second version of the MSXML library using this concept. The second version of the MSXML library was shipped with Internet Explorer 5.0 in March of 1999, allowing access, via ActiveX, to the IXMLHTTPRequest interface using the XMLHTTP wrapper of the MSXML library.

The Mozilla Foundation developed and implemented an interface called nsIXMLHttpRequest into the Gecko layout engine. This interface was modelled to work as closely to Microsoft's IXMLHTTPRequest interface as possible. Mozilla created a wrapper to use this interface through a JavaScript object which they called XMLHttpRequest. The XMLHttpRequest object was accessible as early as Gecko version 0.6 released on December 6th of 2000, but it was not completely functional until as late as version 1.0 of Gecko released on June 5th of 2002. The XMLHttpRequest object became a de facto standard amongst other major user agents, implemented in Safari 1.2 released in February of 2004, Konqueror, Opera 8.0 released in April of 2005, and iCab 3.0b352 released in September of 2005.

The World Wide Web Consortium ("W3C") published a Working Draft specification for the XMLHttpRequest object on April 5th of 2006, edited by Anne van Kesteren of Opera Software and Dean Jackson of W3C. Its goal is "to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code." The last revision to the XMLHttpRequest object specification was on November 19th of 2009, being a last call working draft.

Microsoft added the XMLHttpRequest object identifier to its scripting languages in Internet Explorer 7.0 released in October of 2006, six months after the initial draft of the XMLHttpRequest specification.

The W3C has since published another Working Draft specification for the XMLHttpRequest object, "XMLHttpRequest Level 2," on February 25th of 2008. Level 2 consists of extended functionality to the XMLHttpRequest object, including, but not currently limited to, progress events, support for cross-site requests, and the handling of byte streams. The last revision to the XMLHttpRequest Level 2 specification was on September 30th of 2008, still being a working draft.

Support in Internet Explorer versions 5, 5.5 and 6

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. Backward compatibility can be achieved through object detection if the XMLHttpRequest identifier does not exist.

An example of how to instantiate an XMLHttpRequest object with support for Internet Explorer versions 5 and 6 in JavaScript is below.

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
if (typeof XMLHttpRequest == "undefined") {
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e1) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e2) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e3) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
      catch (e4) {}
    throw new Error("This browser does not support XMLHttpRequest.");
  };
}

Web pages that use XMLHttpRequest or XMLHTTP can mitigate the current minor differences in the implementations either by encapsulating the XMLHttpRequest object in a JavaScript wrapper, or by using an existing framework that does so. In either case, the wrapper should detect the abilities of current implementation and work within its requirements.

HTTP request

The following is how a request using the XMLHttpRequest object functions in 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

The HTTP and HTTPS requests of the XMLHttpRequest object must be initialized through the open method. This method must be invoked prior to the actual sending of a request to validate and resolve the request method, URL, and URI user information to be used for the request. This method does not assure that the URL exists or the user information is correct. This method can accept up to five parameters, but requires only two, to initialize a request.

The first parameter of the method is a text string indicating the HTTP request method to use. The request methods that must be supported by a conforming user agent, defined by the W3C draft for the XMLHttpRequest object, are currently listed as the following.

• GET (Supported by IE7+, 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 text string, this one indicating the URL of the HTTP request. The W3C recommends that browsers should raise an error and not allow the request of a URL with either a different port or ihost URI component from the current document.

The third parameter, a boolean value indicating whether or not the request will be asynchronous, is not a required parameter by the W3C draft. The default value of this parameter should be assumed to be true by a W3C conforming user agent if it is not provided. An asynchronous request ("true") will not wait on a server response before continuing on with the execution of the current script. It will instead invoke the onreadystatechange event listener of the XMLHttpRequest object throughout the various stages of the request. A synchronous request ("false") however will hang execution of the current script until the request has been completed, not invoking the onreadystatechange event listener.

The fourth and fifth parameters are the URI user and password, respectively. These parameters are not required and should default to the current user and password of the document if not supplied, as defined by the W3C draft.

The setRequestHeader method

Upon successful initialization of a request, the setRequestHeader method of the XMLHttpRequest object can be invoked to send HTTP headers with the request. 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. 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 stringify the parameter, then the parameter should be ignored.

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.

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.

• After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1.
• 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.
• Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3.
• Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4.

The major user agents are inconsistent with the handling of the onreadystatechange event listener.

The HTTP response

After a successful and completed call to the send method of the XMLHttpRequest, if the server response was valid XML and the Content-Type header sent by the server is understood by the user agent as an Internet media type for XML, the responseXML property of the XMLHttpRequest object will contain a DOM document object. Another property, responseText will contain the response of the server in plain text by a conforming user agent, regardless of whether or not it was understood as XML.

See also

• Hypertext Transfer Protocol
• Representational State Transfer
• Ajax
• JsHttpRequest

External links

• Level 1 specification of the XMLHttpRequest object from W3C
• Level 2 specification of the XMLHttpRequest object from W3C
• Specification of the XMLHttpRequest object for Apple developers
• Specification of the XMLHttpRequest object for Microsoft developers
• Specification of the XMLHttpRequest object for Mozilla developers
• Specification of the XMLHttpRequest object for Opera developers
• "Attacking AJAX Applications", a presentation given at the Black Hat security conference. Discusses several issues involving XHR and the future of cross-domain AJAX.