AJAX what is it? (it’s not DHTML)

Despite the fact that AJAX is at the centre of the current Web 2.0 movement it is still a greatly misunderstood technology. So what is it?

Ajax, is short for Asynchronous JavaScript and XML – its not a technology in it own right rather a set of established technologies, a development technique if you will, for creating more responsive, interactive web applications such as Google maps.

Traditional web applications require the entire page to refresh whenever the user interacts with the system this is because the entire webpage is rebuilt following the transfer of data between the browser and the server (there is a synchronicity between a user’s action and data transfer between the web browser and the web server – the user clicks on something, data is transfered and the page is rebuilt).

Rebuilding the page in this way introduces a delay and interrupts the user from achieving their goal, which is obviously a bad thing; at least for web applications if not for sites such as this blog or a news site.

The objective of Ajax is to make web applications, more responsive by separating the data transfer (which happens in the background) from the users’ actions. This is achieved by placing a piece of code (JavaScript) between the user and the server – the JavaScript (running on the users’ browser) requests data (as XML) in the background and uses this to build the webpage (by using iFrames the JavaScript can be made to only rebuild parts of the page at a time). This separation means there is an asynchronous relationship between data transfer and the user’s interaction with the application.

Ajax model

I would now like to draw a distinction between Ajax and DHTML (Dynamic HTML) which is often used to make rollover or drop-down buttons on a web page and is often confused with Ajax.

DHTML, like Ajax uses client-side scripting (such as JavaScript) to change the presentation of the page, but unlike Ajax where the JavaScript is used to request data from the server, DHTML is only used to modify an otherwise “static” HTML page after the page has been fully loaded (the page is requested and delivered synchronously with the users request as per the traditional model).

In other words if there is no data transfer between the server and the browser – it’s not Ajax.