XML HTTP Example

This is a simple demo of how to make calls to a web server from within JavaScript without reloading the page (and without messing with hidden frames!). This is the technique put to so much good use by the Google geeks working on Gmail. The implications of being able to do this in web apps are big!

• The ability to make an asynchronous request coupled with dynamic HTML pages means you can now return a response to the user almost instantly (well as quick as your server can return a tiny page) then fill-out more info as your JavaScript downloads it in the background. E.g. have you noticed how Gmail displays a "Loading" message when you first go into your Inbox?
• It means we can POST a form in the background without refreshing the page - a good way to get around the way some pesky browsers sometimes lose all form data. This also allows you to write all your validation on the server (no more stupid JS arithmetic!).
• It means we can kick off server side tasks, display progress indicators, then display results when the task is complete.
• I can see this being a great help to portal pages that display lots of user defined portlets. Getting carried away, you could even have your JS requesting an XML feed and rendering it itself!
• Pages on your site that query other web pages (like the Bill Gates Personal Wealth Clock) can now move the load of these requests to the client browser.

Update 06/03/05: Just found an article for developers on Apple which says the last two points above aren't possible. You can't request anything from a domain different to that of the parent page. It's not clear whether this is the default security setting or whether it is never possible.

The example below does none of these wonderous things. It is supposed to be the bare minimum amount of code for an XML HTTP request to work. All it does is request this page and put the result into the text area. Just click the link at the bottom of the page.

This code is a rip-off of slightly more in-depth examples here, by a guy who I've come across before when looking into fun with FOAF.

My colleague Paul Fitzsimons @ iQ Content recently pointed out this article which summarises the technique Google is using on it's new services. It calls it Ajax - Asynchronous JavaScript and XML.