One of the core technologies behind AJAX is the XMLHTTP Request object - think of it as a tiny hidden web browser. The XMLHTTPRequest method was actually pioneered by Microsoft in IE4 for their Outlook Web Access email client software. When a user interacts with a page this tiny browser requests, in the background, just the information needed. Another technology, the XML Document Object Model (DOM), allows the developer to treat each page as a tree with branches and leaves that are easily added or changed.
Using AJAX is a tradeoff. You gain greater control over a document and reduce the amount of information that must be passed from client to server. You also avoid the annoying flicker of page refreshes on pages that need to be frequently updated. Unfortunately, you also increase the complexity of the application and risk browser incompatibilities. Instead of simply printing text back at the request of a client browser you now have to script the interaction back and forth between the client and server. These drawbacks and not ignorance, as some articles have implied, have caused developers to shy away from AJAX. Developers want to maximize the number of people who can see their pages. But times have changed. The vast majority of web surfers now use browsers that support AJAX.
Here is a simple application(download source here) to display funny definitions from a dictionary document located on the Project Gutenberg site titled 1811 Dictionary of the Vulgar Tongue by Captain Grose. On the server we will have a PHP Application server connecting to a MySQL database to query for random definitions. In PHP we will convert the recordset to XML for consumption by the client. On the client we will query the server at a timed interval using XMLHTTP and use the XML DOM to update the page using XML DOM methods.
Remember the tradeoff I mentioned? To use AJAX in the most beneficial way, you should focus on efficiency. Not just replacing the part of the page you wish to replace, but also minimizing bandwidth. For instance, assume this page weighs in at a slim 10Kb. If you wanted to display updated definitions (or stock quotes) by refreshing the page that comes to 60Kb per minute, 3600Kb per hour and so on. Using AJAX we can query our server for just the definitions, that weigh in around 1KB.
Before you go off and jump into a bathtub full of saved bytes to celebrate, remember to be miserly with the XML being passed each time. Don't waste space with hugeElementNamesThatWasteSpace. Below is an example XML fragment to demonstrate the "definition" XML being used on this page. I saved space by having one letter element and attribute names and placing the data in the attributes of each element. For those wanderering off in a rant over this technique, the purpose of this XML is simply transporting data within an application, not between applications. If the information were for external consumption I too fall into the camp with folks demanding self-describing syntax
<r t="PELL-MELL" d="Tumultuously, helter skelter, jumbled together.">
<r t="LURRIES" d="Money, watches, rings, or other moveablcs.">
<r t="SNEAKING BUDGE" d="One that robs alone.">
<r t="DEVIL'S DAUGHTER'S PORTION:" d="Deal, Dover, and Harwich, The Devil gave with his daughter in marriage; And, by a codicil to his will, He added Helvoet and the Brill; a saying occasioned by the shameful impositions practised by the inhabitants of those places, on sailors and travellers">
<r t="STAR LAG" d="Breaking shop-windows, and stealing some article thereout.">
Also keep in mind that AJAX is much more powerful than simply a tool to build rotating banners. You can interact with the data to, for instance change the number of records returned, the refresh rate or toggle the program. It can be a methodology to build rich web applications that are much more responsive than typical click and refresh programs.
For this article I have intentionally kept the server end of things simple. We could create a Web Service with a nice WSDL definition, but I'll save that for another article if anyone is interested.