XMLHttpRequest

XMLHttpRequest (XHR) is an API in the form of a JavaScript object whose methods transmit HTTP requests from a web browser to a web server. The methods allow a browser-based application to make a fine-grained server call and store the results in XMLHttpRequest's responseText attribute. The XMLHttpRequest class is a component of Ajax programming. Prior to Ajax, an HTML form needed to be completely sent to the server followed by a complete browser page refresh.

History

The concept behind XMLHttpRequest was conceived in 2000 by the developers of Microsoft Outlook – available on the Windows 2000 operating system. The concept was then implemented within the Internet Explorer 5 (2001) browser's interpreter. However, the original syntax did not use the XMLHttpRequest identifier. Instead, the developers used the identifiers ActiveXObject("Msxml2.XMLHTTP") and ActiveXObject("Microsoft.XMLHTTP"). As of Internet Explorer 7 (2006), all browsers support the XMLHttpRequest identifier.

The XMLHttpRequest identifier is now the de facto standard in all the major browsers, including Mozilla's Gecko layout engine (2002), Konqueror (2002), Safari 1.2 (2004), Opera 8.0 (2005),, and iCab (2005).

With the advent of cross-browser JavaScript libraries such as jQuery, developers can invoke XMLHttpRequest functionality indirectly.

Standards

The World Wide Web Consortium (W3C) published a Working Draft specification for the XMLHttpRequest object on April 5, 2006. On February 25, 2008, the W3C published the Working Draft Level 2 specification. 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.

At the end of 2012, the WHATWG took over development and maintains a living document using Web IDL.

XMLHttpRequest usage

Generally, sending a request with XMLHttpRequest has several programming steps.

1. Create an XMLHttpRequest object by calling a constructor:

   var request = new XMLHttpRequest();
   

2. Call the "open" method to specify the request type, identify the requested resource, and select asynchronous or synchronous operation:

   request.open('GET', 'https://example.com/products/12', true /* asynchronous */);
   

3. Set an event listener that will be notified when the request's state changes:

   request.onreadystatechange = listener;
   

4. Initiate the request by calling the "send" method:

   request.send()
   

5. Respond to state changes in the event listener. If the server sends a response object, by default it is captured in the "responseText" property. When the object stops processing response data, 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 header fields can be added to the request to indicate how the server should fulfill it, and an object to upload in the request can be provided in the "send" call. The response can be automatically parsed from the JSON format into a readily usable JavaScript object, or processed gradually as it arrives rather than waiting for the entire text. The request can be aborted prematurely or set to fail automatically if not completed in a specified amount of time.

See also

• WebSocket
• Representational state transfer (REST)

External links

• XMLHttpRequest Living Standard by the WHATWG
• XMLHttpRequest Level 1 draft by the W3C