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.

4 responses to “AJAX what is it? (it’s not DHTML)”

  1. Yeah this is an important distinction, and one that is being muddied by Designers in my experience. There seems to be more familiarity with DHTML techniques than Ajax amongst developers I’ve worked with, which makes a difference when you’re planning/resourcing a project.

    It’s worth adding that the xmlhttprequest doesn’t have to fetch xml, can be json or plain text (we do the latter in the refine-by bit of the BBC Food recipes search results).

  2. […] each optimised for different uses: HTML for web browsers, XHTML MB or WML for mobile, JSON for Ajax applications etc. You can start to expose your data to other web applications and then you can […]

  3. PiterJankovich Avatar

    My name is Piter Jankovich. oOnly want to tell, that your blog is really cool
    And want to ask you: is this blog your hobby?
    P.S. Sorry for my bad english

  4. […] each optimised for different uses: HTML for web browsers, XHTML MB or WML for mobile, JSON for Ajax applications […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: