XMLHttpRequest

Summary of the specification by W3C, and usage
This server side object is used by JavaScript to exchange data with the server, in plain text, XML or JSON format. The XML format is automatically parsed by the object at loading and accessible by DOM's methods. JSON files are parsed by the eval() JavaScript command. In Internet Explorer, it is an Active X object.

 

Brief history 

XMLHttpRequest, was first implemented by Internet Explorer since the 4.0 version. The same concept was named XMLHTTP some times, before the Ajax name becomes commonly used. The use of XMLHttpRequest in 2005 by Google, in Gmail and GoogleMaps has contributed to the success of this technology.

 

Description 

This is a class that is recognized by all current browsers, and by the JavaScript client side programming language. For each request to the server, a new instance is created by a call to the constructor. The open method starts the connection, in read or write mode, to receive data from the server or send it. It will be processed by the server with a server side language as PHP, Java, etc...
The connection takes several successive states that are assigned to the readyState attribute of the object. When the final state is reached, the data may be found in another attribute. It may be a plain text or an XML document. The JSON format is loaded as plain text and parsed by JavaScript. More details on the use of the class in the Ajax tutorial.

 

Attributes 

The purpose of attributes of the class is to be assigned the status of the connection, and to hold data.

unsigned short readyState 

The code successively changes value until the server is ready, from 0 to 4 .
0 Not initialized
1 Open
2 Sent
3 Received
4 Loaded

status(unsigned short) 

200 is ok
404 if the page is not found.

statusText(DOMString) 

Holds the label of the status, corresponding to the status code.

responseText(DOMString)

 Holds loaded data as a string of characters. It is completely filled when the status is 4.

responseXml(DOMDocument) 

Holds an XML loaded file, and DOM's methods allow to extract data. It is filled only when the code is 4 and null otherwise.

onreadystatechange(EventListener) 

Invoked when readyState is assigned.

 

Methods

 Apart the constructor, the class has two main methods, open to create a session and designate the distant file, and send to move data to the server.

abort() 

Resets the object and stops any activity created by the object.

getAllResponseHeaders() 

 Return all headers into a string, separated by CR and LF codes.

getResponseHeader(DOMString) 

Return the header of data received, after the last request. Several headers should be separated by a comma plus a space.

open(mode, url, boolean [,login, password]) 

mode: type of request, GET, POST, HEAD or other http methods.
 url: the location of the file, with a path. boolean: true (asynchronous) / false (synchronous). optionally, a login and a password as additional arguments.

send("string") 

null or empty with a GET command, a string otherwise. Raises a DOMException (INVALID_STATE_ERR) if the readyState code is not1. setRequestHeader(DOMString,DomString) Arguments are the name of the header and the value. Several values may be successively sent. Raises a DOMException (INVALID_STATE_ERR) if the readyState code is not 1.

How to use XMLHttpRequest 

The class is a part of ECMAScript (JavaScript) and used as any other class of the language, but there are several constructors according to the browser. Here is a complete code to open an Ajax session, by creating a new XMLHttpRequest object and loading some data. The code may be tested with several demos on the Ajax tutorial and in the Ajax sub-domain.

function submitForm()
{
    var xhr=null;
    try
    {
        xhr = new XMLHttpRequest();
    } 
    catch(e)
    {
        try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e2)
        {
            try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
            catch (e) {}
    }
}

xhr.onreadystatechange = function(){
    document.ajax.dyn.value="Wait server...";
    if(xhr.readyState == 4)
    {
        if(xhr.status == 200)
        {
            document.ajax.dyn.value="Received:" +
            xhr.responseText;
        }
        else
        {
            document.ajax.dyn.value="Error: returned statuscode " + xhr.status + " " + xhr.statusText;
        }
    }
};
xhr.open("GET", "data.xml", true);
xhr.send(null);
} 

 

Caching problem 

Memory cache does not work properly with the object. Often, the file loaded by the GET method is not the last version, but an older version taken from the memory buffer. If the file is not too big, this can be overcomed easily by adding a parameter to the command. Replace: xhr.open("GET", "data.xml", true); by: xhr.open("GET", "data.xml?nocache=" + Math.random(),true);

The HTML format 

We can load XML files, can we load also HTML or XHTML files? Actually, this is planned for the next specification of the XMLHttpRequest object as it is planned to access cross-domains files. It is planned that, in this case, the text/html mime type will be used, while the text/xml type is used for XML documents, in the content type header. For now, a replacing solution exists, the pseudo responseHTML attribute, that is given on this site.

Specification 

W3C Working Draft specification for XMLHttpRequest. The W3C is working on a new version of the standard, called XMLHttpRequest Level 2. New improvements are cross-site requests, progress events, and the handling of byte streams for both sending and receiving. Besides the XMLHttpRequest object itself, W3C has established a specification for cross-site exchanges named Access Control. However Microsoft has choosen to not support the proptocol and offers in Internet Explorer 8 an alternative named XDomainRequest. This object could replace XMLHttpRequest or not depending its support for all features of XHR in the final version.