Your browser may have trouble rendering this page. See supported browsers for more information.

This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Using the XMLHttpRequest object

Description

If you make websites, pay careful attention to this JavaScript object: it's going to change everything about web application interfaces. Web pages can use this object to make an "in-place" request for data to another URL, then inject the results of the request (with optional post-processing in JavaScript) into the current document. All without refreshing the page. Google introduced the first really noticeable implementation of a web application using this technology in <a href="http://gmail.google.com">GMail</a>. It was so noticeable, it prompted Opera to finally implement the object in their JavaScript engine and release a new version of their browser. That means that it's also uniformly supported on all browsers on all platforms (Safari 1.2x, Mozilla 1.x, Opera 7.6x., IE 5.x). <a href="http://www.objectgraph.com/dictionary/blog/">Dictionary</a> is a simpler example of this technology, which also explains <a href="http://www.objectgraph.com/dictionary/how.html">how it works</a>. The gist is that you create an XMLHttpRequest object in your page and tell it retrieve data from a URL. When the response arrives, it triggers an event handler in your JavaScript and you can work with the response text. In Dictionary's case, the response is preformatted HTML which is assigned to the <c>innerHTML</c> property of a given DIV container in the page (which is pretty much the standard way of injecting/updating content in the DOM of a web page). The request is issued when the user types a new letter into the text box on the page and returns and displays the top ten definitions for the text entered. Other uses for this construct are limitless. Gone are the days of horrible workarounds for status pages during long operations; a page can request the status from the server directly, which queries the running process for an update and returns text describing the status. I would imagine that the content returned in the response should involve as little client-side processing as possible to avoid having to write complex JavaScript (server-side languages are usually easier to debug). Similarly, pages no longer need to refresh the entire page when loading content for interdependent drop-down boxes. Nor do they need to load all possible variations in JavaScript when the page is initially loaded (both horribly limited solutions both bandwidth- and usability-wise). Simply request the new contents of the dependent drop-down when the user makes a selection in the "master" drop-down. I, for one, am looking forward to the next generation of web applications based on this technology. For more information, see <a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple's developer documentation for XMLHttpRequest</a>.