An Introduction to AJAX
What is Ajax? In simple terms, Ajax is an approach to rendering web pages that improves a web site's appeal and usability. It enhances user interaction by targeting updates from the server to specific areas of a web page. It allows information to be changed without long delays or frustrating page refreshes.
And its impact? Whilst the technology is not new, it is coming of age. You know how it's easy to tell the difference between a web application and a desktop application? Low speed of response, regular page refreshes, basic graphical interfaces, etc... well that distinction is going to become very blurred. Whilst this presents some very exciting possibilities, it also presents some challenges.
What does it mean? AJAX stands for Asynchronous JavaScript and XML. It is more a marketing term than a technical one as the technology behind it does not have to be asynchronous, and commonly doesn't use XML!
Where did it come from? The technology or approach was first devised in 1998 by Microsoft for their Web based Outlook interface. It is now supported in most common web browsers. Though used by Microsoft it was popularized by Google in its stunning interface for Google maps and the excellent usability of Gmail. The coining of the phrase Ajax: A New Approach to Web Applications secured it a place in history.
Just Another Fad? Is Ajax just another passing fad? The likes of Google, Microsoft, Yahoo and Amazon don't think so. And neither do the authors of the more than 3 million additional page references per month that are appearing in search engines for Ajax since the phrase was first used to describe this approach in February 2005!
What does it do? The easiest way to describe what it does is as follows. Pre Ajax the developer and therefore you, the page viewer, were limited to the information that was downloaded when the page was downloaded. A full page referesh was required before additional data could be presented. With Ajax this is no longer the case. Once the page has initially downloaded, JavaScript is used to make calls back to the server to retrieve additional information, usually based on how you, the viewer, has so far interacted with the page. The introduction of Reverse Ajax has added to this by increasing the ways the server can deliver updates to the browser.
Google Maps is a good graphical example of what is going on behind the scenes. The whole of the UK/US is not downloaded when you first view the page - this would take a while! But as you drag the page around, additional data is obtained in the background to provide what appears to be a continuous map.
How does it do it? For simplicity we can think about Ajax in 2 parts.
- Request & Retrieve is something that could not be done in a cross-platform way until recently. This is how the browser interacts with the server whilst the user is viewing a page. The browser uses what is known as the XmlHttpRequest (often shortened to XHR) to request information from the server whilst the user is still viewing the page. The information that is returned is then held by the browser until it is required, at which point it is displayed to the user. Wider support for XHR across different browsers has been a key factor in the growth of Ajax development.
- Display is the funky bit! This is how the information is presented to the user. There is little new in the technology here, mainly Javascript and DHTML, but the increase in dynamism of data (resulting from Request & Retrieve) has made spending the time needed to develop fancy graphics and displays worth the effort, and there are some great examples out there.
How to get started So how would you go about adding Ajax functionality into your own websites? If you enjoy re-inventing the wheel, have an otherwise unsolved problem or just feel you could do a better job, then why not write your own code from scratch. However, most developers will be content to employ one of the increasing number frameworks available. These not only provide the basic code and mechanisms to request and retrieve information from the server, but also help to overcome the common stumbling blocks and browser nuances.
Which framework you choose depends on your language preference, your commercial position, and your technical agility. Lets consider the main ones; Request & Retrieve - Your choice here is based on your server side language preference. Java, PHP, .NET and Ruby all have good frameworks, the most popular being DWR for JAVA, SAJAX for PHP, Atlas for .NET andRails/Prototype for Ruby. Other languages are less well supported. Display - For enhancing the display there are Javascript libraries like scriptaculous, moo.fx, dojo or rico which will help with the DHTML components. If you are using Java you may find JSP tag libraries like AjaxAnywhere a help, although these can be more restrictive.
What has it started? Interestingly one of the side effects of AJAX has been a renewed interest in the user interface. JavaScript, the main language that provides the user interaction, is having a renaissance. And we are seeing some pretty amazing results. Ajax is perhaps the catalyst for the web to take over from the desktop as the platform of choice.
Where now? ~ Find out what is Reverse Ajax? ~ Goto main Ajax Article on CMSWatch
Where else? My Blog ~ Home ~ Wikipedia ~ DWR easy AJAX for JAVA.