Jeremy Stallard's Site

AJAX – Asynchronous Javascript and XML

While testing out different web architectures to keep on top of what is available and often used, I found that AJAX was being used much more than I had previously realized. Google uses it for the new GMail and Google Maps. Quite a few online MMORPG games use it to a certain extent, and there are examples of it found all over the Internet.

It has a nice advantage providing updated data when compared to static and dynamic web pages which are created and displayed to the user and then not updated until the user refreshes the page or navigates away. Using javascript and the XMLHttpRequest object a web developer can update portions of a displayed page without needing to navigate away from the current page.  While this doesn’t offer the server side “push” capabilities of BlazeDS and Adobe Flex, it is significantly less complex.

Using a javascript timer, a webpage can periodically request updated information from the server and then update the webpage. This is useful for web based chat applications which update once a second or so. It is also useful for the purpose that Google used it with GMail in which notifications are received when new email is received, and only the affected part of the screen changes with some menu clicks rather than reloading the page over and over again.

AJAX is also used in WordPress for saving drafts, and custom contact forms to allow users to submit questions or email without navigating away from the page they are on.

As a sample page, I pulled out the Shakespeare in XML format which John Bosak released to the public domain back in the 1990’s, XSL, and used PHP to apply the transformation.  The XML files are available at http://xml.coverpages.org/bosakShakespeare200.html. The sample can be found below in the internal frame.

The ‘select’ input forms are loaded from xml files which contain the file names and descriptions. The “onchange” event is tied to the javascript function which uses XMLHttpRequest to fetch the XML and XSL files. If only one of the selections is made (for example, just the play name), the raw XML is displayed. If just the XSL stylesheet is selected, just the stylesheet is displayed, and when both are selected, the combined result is displayed. A decent AJAX tutorial can be found at http://www.w3schools.com/ajax/ajax_intro.asp.