What is AJAX?

AJAX is a not a new technology used in web development. This statement is encouraged by the endless news articles showing sites made with AJAX. In fact AJAX is neither new, nor a technology. It can be seen as a mix of several popular technologies put together to build a friendlier web.

The name itself is an acronym for Asynchronous JAvaScript and XML, which already contains two technologies and a technique for loading information. The name was coined by Jesse James Garrett in this essay from the Adaptive Path website.

In this mix, XML is used to store and move information between the client and server, HTML and CSS to format the output and JavaScript to bind all of these elements together in a dynamic manner.

The asynchronous part comes from the fact that when a change has to be made to the current page (the user clicks on a link, or submits some information), only the part to change is transferred from the server, and not the entire page.

Besides these, AJAX is about much more:

• The way information is displayed in a browser - using HTML/XHTML and CSS. To present information to the client, you still need to use the language that browsers understand: HTML for content and CSS for layout and formatting.
• In the age of dynamic websites, displaying content is not enough. You have to first retrieve it from a dynamic data source, and process it for final output. This is where XML and XSLT come into play.Tip: Not familiar with XML and XSLT? Read more here!
• Getting the information from the server and in the user's browser is the next step. The XMLHttpRequest JavaScript object is used for this part. This JavaScript object will be covered in detail later on this article.
• Once the information is displayed you need to modify it dynamically. For this you will use the Document Object Model (or DOM, for short). To provide dynamics to a static HTML page, DOM manipulation is used to alter the properties of already created page elements. It is done through JavaScript and allows (for example) a div element to become visible, or a button to gray-out when a certain selection has been made.Tip: To learn more about the Document Object Model check out this article from W3 Consortium.
• The glue that holds all these elements together is JavaScript. This allows retrieving dynamic information, displaying and modifying the page elements. JavaScript is a lightweight programming language used to perform various tasks on the web client.

The notion AJAX has come to define a development framework which aims to improve web page usability.

As you can see from the list above, none of the technologies used within AJAX are new. What is new is the way these technologies are used together to create new types of web applications that are much more responsive and intuitive than the existing ones. To illustrate this, just have a look at Gmail and Google Maps. The user interfaces are quick in providing the user with the desired information, while performing the minimum of page reloads possible.

This new approach to user interaction and application responsiveness is part of a wider technology trend, aimed at making the Internet more friendly and faster.