Ajax - The Basics

We are all familiar with using traditional web pages:

• Enter a URL, click 'GO', and wait for a page to load.
• Fill in a form, click 'Submit', wait for a page refresh.
• Click on a link, wait for a page to load ....

This familiar model has been with us since the early days of the internet. Requests to the server for more information are typically answered by the web server delivering a new page. Until that page has loaded, we sit and we wait.

In many cases, the new page contains many of the same elements we had before; the images and text making up the page's template, for instance. We didn't really want to wait for all this to be served to us again, but unfortunately we had to.

Ajax (Asynchronous Javascript And XML) allows to navigate web pages while the page itself - quietly and unobtrusively - sends requests to the server for more data, and can use that data to update the user interface without the user having to wait for a new page or a page refresh.

What this means in practice is that we can build interfaces to our web applications which a re much more like those our users are used to from their desktop applications. Forms, text boxes and images can be populated automatically with data retrieved from the server, data grids can be sorted or paginated, and server-side databases can be queried and edited - all without the user having to wait for pages to load.

How does it work?

Ajax may be thought of as a 'buffer layer' between the user and the server. When the user gives instructions to the web page (for instance by clicking a button or link) the message is sent not directly to the server, but to our Ajax 'engine'.

This engine, when it needs to, makes requests of the server. But these requests may not necessarily correspond one-to-one with the user's requests. Sometimes Ajax will have foreseen the user's requirement and will already have the information requested. This is the 'Asynchronous' bit.

And guess what? Our page talks to the Ajax engine using Javascript commands embedded in the source code of the page, taking care of the second letter of Ajax.

There are several means by which the server can send data back to the Ajax engine - and as you've probably guessed by now, one of the most useful is XML.

This article has been taken from crackajax.net.