XMLHTTP is a set of APIs 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 Client-Side and Server-Side.
XMLHTTP 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 XMLHTTP applications include Google's Gmail service, Google Suggest dynamic lookup interface, MSN Virtual Earth and MapQuest dynamic map interface.
Besides XML, XMLHTTP can be used to fetch data in other formats, e.g. JSON or even plain text, including data provided by executing back-end database queries.
History and support
The object was originally developed by Microsoft, available since Internet Explorer 5.0 as an ActiveX object, via JScript, VBScript, or other scripting languages supported by the browser. Mozilla contributors then implemented a compatible native version in Mozilla 1.0. This was later followed by Apple since Safari 1.2 and Opera Software since Opera 8.0. Additional, Open Laszlo added support in version 3.1.
Most well-designed web pages using XMLHTTP are designed to hide the minor differences in these XMLHTTP object implementations by encapsulating the invocation of the XMLHTTP object in a simple JavaScript wrapper.
Traditionally there have been other methods to achieve a similar effect of server dynamic applications using scripting languages and/or plugin technology:
- Invisible IFrames.
- 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 using POST request method, which is never cached, but is intended for non-idempotent operations. A solution using the GET request method is to include a unique 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" );
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 coders use the techniques above indescriminately, with sometimes massive reduction in performance.
Safari POST Content-Type
When using Safari to generate an XMLHttpRequest POST to a PHP script you have to send the data as urlencoded by default and available in $_POST
req.open("POST", "xml.php");
req.send("variable=value&var2=value");
If you wish to send other content (like a full XML document) you must set the Content-Type header and the entire content will be available in the $HTTP_RAW_POST_DATA
req.open("POST", "xml.php");
req.setRequestHeader('Content-Type','text/xml');
req.send('<xmldoc><tag val="test"/><value>test</value></xmldoc>');
Accents and Non-ASCII characters problem
If the server answer does not encapsulate the result in an XML format, the 'responseText' will work correctly unless you use accents like 'é' or other non ASCII characters. In that latter case, everything will work fine on Firefox and on your first request with Internet Explorer (you might have minor display problem). But if you ask a second time, IE will use the cache result and generate a JavaScript error.
XML formatted results and the use of the slightly more complex 'responseXML' method will work with any UTF-8 characters.
External links
Technical information
Browser implementations/documentation
Tutorials
- Dynamic HTML and XML: The XMLHttpRequest Object with example
- Very Dynamic Web Interfaces
- Cross-browser XMLHttpRequest Tutorial using the Sarissa library.
- Guide to Using XMLHttpRequest (with Baby Steps)
- Using the XML HTTP Request object
- A Sortable Data Grid Using XMLHTTPRequest