XMLHttpRequest

If you've been using the web of late you'll have noticed some funky things being done with client side HTML that pulls data from a server without the need to refresh the page. Such techniques are used in pages like Google's Suggest, (www.google.com/webhp?complete=1&hl=en) Maps (maps.google.com/)and Gmail (www.gmail.com), along with a number of other applications from web professionals trying out the technology. It's similar to how Flash can pull XML data and utilise it, but using plain old HTML and JavaScript.

In this tutorial we're going to look at the basics of how this is done using XMLHttpRequest, and show a simple application you can put it to.

To use this tutorial you'll need an understanding of JavaScript and basic XML and PHP, if you're only familiar with server behaviors the tutorial is probably a bit advanced for you. I've tried to keep the example as un-cluttered as possible to focus on the core idea behind the technology.

How it works

Normally when you request a web page, your browser sends a request for the page and then the page is returned. The browser only interacts with the server at the page request, so our only way to get an update to the page based on user data is to request a new one or use a plug-in like Flash or Java.

XMLHttpRequest allows us to request additional data from the server via JavaScript. A series of calls to the XMLHttpRequest object allow us to request small batches of XML data from a server source over a web connection. Because they're small, the technique is ideal for small dynamic updates to page information. For security reasons these requests can only go to the server that the JavaScript was originally downloaded from.

The technology was originally created by Microsoft as an Active X object, but other browsers have followed suit with a native JavaScript Object. This object is actually part of the W3C standard, but is obscurely hidden within the depths of the SVG specification.

Overview

Caveats

Before we go any further a few issues need to be put forward for your consideration. Firstly, though this method of interaction can save you bandwidth by making smaller requests for updated information, particular uses can result in your server getting lots more requests. For example, a chat application built with this kind of script wills till be requesting data once every few seconds, and if you have a lot of users this could mount up quickly.

Our second consideration is that these scripts use JavaScript, and as anybody with some accessibility knowledge knows, this is not always an accessible solution since many browsers don't have it or have disabled it. If accessibility is of a primary concern to you, you'll need to provide some alternative method of interaction that produces a similar result, not always an easy prospect. Similarly, this technique will not work with browsers earlier than IE 5.5, Firefox and Opera 7.63.

Since this technology works over HTTP, you'll need a proper web server to test it. The script won't work if you just try and test locally via the filesystem. Because of this it's useful to set up the site in Dreamweaver to use a testing server for previewing purposes. I used a local install of Apache, and store the files in a directory that mapped to http://localhost/xmlhttp/

Matt Machell

Matt Machell A man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Reviews

Be the first to write a review

You must me logged in to write a review.