What is AJAX? Asyncronous JavaScript and XML. That’s it. Well, not really…

AJAX is a new approach to web applications, further propelling the transition of desktop applications to the web. It makes use of existing technology to provide smoother, faster web applications by using JavaScript to refresh a page’s contents from a server without reloading an entire page.

How is this all possible? By making use of JavaScript’s XMLHttpRequest class within supportive browsers. Using AJAX, we can allow elements of a web page to interact with a server, notifying the client of the status from a ‘Ready’ state, to ‘Processing’ and ‘Complete’. The benefit of knowing the status of the interaction with the server, allows us to provide constant feedback to the client. For example in the ‘Processing’ stage we can display a simple animated GIF, showing that the element is interacting with the server.

The fact that you can update more specific areas of the page based on the server’s responses to those requests is what makes AJAX so unique. The ‘A’ in AJAX stands for Asynchronous system. This allows for multiple requests to be sent, with multiple responses returning back to the browser as soon as the server has processed the requests.

A Syncronous System

You can see that in a syncronous system, you (the client at the browser end) makes a request (A), then wait for the server to process the page and respond with response A. This cycle repeats in a syncronous system… one request at a time.

It’s almost like a race between two cars, but whoever leaves the start line first will cross the finish line first. Even if the car in the lead breaks down, all the other cars will stop and wait until the leading car continues and passes the finish line.

Traditional web applications use a syncronous system, whereby you must wait for the server to send you the first page of a system before you can requests the second page shown in this diagram.

An Asyncronous System

In this diagram of an asyncronous system, you can see that you can send multiple requests, and the server will send back responses to each request, possibly in a different order than they were requested

This makes the whole car race anecdote a little more exciting, as both cars may start at the same time, but car B may overtake car A at the first corner and finish first.

This results in an application that feels more responsive, as the client spends less time waiting for the requests to process.

Put simply, this asyncronous method allows us to load relevant content to specific areas of a web page without having to load the server any more than necessary.

The technologies used to build AJAX applications encompass a number of programming domains, so AJAX development is neither as straightforward as regular applications, nor as easy as old-school web development.

On the other hand, the mere fact that AJAX embraces so many different technologies makes is a lot more interesting and fun (if you’re a geek!). Here’s a brief listing of the technologies that work together to make an AJAX application:

• XML
• W3C Document Object Model
• CSS
• XMLHttpRequest
• JavaScript

Paused writing this tutorial so Laila can check it over for me!