XMLHttpRequest

XMLHttpRequest is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.

XMLHttpRequest is an important part of the Ajax web development technique, and it is used by many websites to implement responsive and dynamic web applications. Examples of XMLHttpRequest applications include Google's Gmail service, Google Suggest dynamic lookup interface, Meebo, MSN's Virtual Earth and the MapQuest dynamic map interface.

The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even plain text.

History and support

The XMLHttpRequest concept was originally developed by Microsoft Corp. The Microsoft implementation is called XMLHTTP, and, as an ActiveX object, it differs from the published standard in a few small ways. It has been available since Internet Explorer 5.0 and is accessible via JScript, VBScript and other scripting languages supported by IE browsers.

The Mozilla project incorporated the first compatible native implementation of XMLHttpRequest in Mozilla 1.0. This implementation was later followed by Apple since Safari 1.2, Konqueror, Opera Software since Opera 8.0 and iCab since 3.0b352.

The World Wide Web Consortium published a Working Draft specification for the XMLHttpRequest object's API on 05 April 2006[1]. While this is still a work in progress, 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 draft specification is based upon existing popular implementations, to help improve and ensure interoperability of code across web platforms.

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.

Traditionally, there have been other methods to achieve a similar effect of server dynamic applications using scripting languages and/or plugin technology:

• Invisible inline frames
• Netscape's LiveConnect
• Microsoft's ActiveX
• Macromedia Flash Player
• Java Applets

Known problems

Microsoft Internet Explorer Cache issues

Internet Explorer implements caching for GET requests. Authors who are not familiar with HTTP caching expect GET requests not to be cached, or for the cache to be avoided as with the refresh button. In some situations, failing to circumvent caching is a bug. One solution to this is to use the POST request method, which is never cached; however, it is intended for non-idempotent operations. A solution using the GET request method is to include a unique (unprecedented) querystring with each call, as shown in the example below.

req.open("GET", "xmlprovider.php?hash=" + Math.random());

or set the Expires header to an old date in your script that generates the XML content. For PHP that would be

header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );  // disable IE caching
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header( "Cache-Control: no-cache, must-revalidate" ); 
header( "Pragma: no-cache" );

For Java Servlets one might use

response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "must-revalidate");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);  

Alternatively, force the XMLHttpRequest object to retrieve the content anyway by including this in the request:

req.open("GET", "xmlprovider.php");
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);

It is important to note that these techniques should be used only if the caching is inappropriate. Generally it is better to obtain the performance benefits of caching, perhaps combined with explicitly detailing modification dates or other relevant headers on the server so as to get as much caching as possible without it causing poor results.

Many programmers use the techniques above indiscriminately, which can result in a massive reduction in performance.

Accented and non-ASCII characters problem

If the server answer does not encapsulate the result in an XML format, the 'responseText' may not work correctly if you use accented characters like 'é' or other non-ASCII characters. In that latter case, everything will work fine on Firefox and on your first request with Internet Explorer (although you might have minor display problems). But if you ask a second time and IE uses a cached result it will generate a JavaScript error.

XML formatted results and the use of a slightly more complex 'responseXML' method will work with any UTF-8 characters.

See also

• Ajax
• SOAP
• Representational State Transfer (REST)

External links

Documentation/Browser implementations

• The XMLHttpRequest Object — W3C Working Draft
• Apple Safari 1.2
• Microsoft IXMLHTTPRequest
• Mozilla XML Extras

Tutorials

• Mozilla XMLHttpRequest object HowTo
• Cross-browser XMLHttpRequest Tutorial using the Sarissa library.
• Very Dynamic Web Interfaces