Rob Gonda

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

"Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability."
— from Wikipedia (www.wikipedia.org), the free encyclopedia

AJAX means that HTML pages communicate with the server in the background without having to refresh the page. It's not a specific technology, patent, recipe, or formula; AJAX is an umbrella that combines components used by Web developers on a daily basis to improve the user's experience.

AJAX uses the JavaScript XMLHttpRequest function to create a tunnel from the client's browser to the server and transmit information back and forth without having to refresh the page; hence, it is asynchronous. The response can contain XML data capable of transmitting complex objects over text. AJAX is not restricted to transmitting XML. XML is heavy, and it's being replaced by either JavaScript Object Notation (JSON) or native JavaScript objects and instructions.

Critics say AJAX is nothing more than a marketing term used to describe and monetize techniques that have been around for over a decade. Perhaps it's true and AJAX is only an acronym to describe a combination of techniques that used to take a couple of sentences to explain and was adopted simply so it would be easier to explain things to a non-technical business client. However, since the term was coined, AJAX has created a huge buzz among Web developers, designers, and business associates.

The chart below shows the spike in the AJAX tag in blogs aggregated by Technorati over the last year.

Traditional HTML is a cyclical process. The data flow goes through a full cycle before the user can request a new action. The user triggers an HTTP request to the server, which processes it and returns either a static HTML page or dispatches the request in a scripting language that creates and returns an HTML page for the browser to render. When this method retrieves new data from the server, it has to repost and reload another HTML file. Many times only a small part of the returned HTML code is different and the shell remains the same, which creates a huge overhead because the data has to be downloaded every time. This is where AJAX shines: it downloads only the information that is needed. An analogy can be drawn between AJAX and traditional desktop applications in the sense that they do not refresh the entire interface for every user event. There is no need to wait for a page reload; JavaScript is lightning fast and when interchanging small pieces of data, it makes for faster interactions, less waiting, and consequently a better experience.

In reality the main purpose of AJAX is to enhance the user experience, get out of the cyclical process, and bring back the feel of traditional desktop applications. With AJAX the user does not have to wait for a full-page refresh cycle and halt the interaction. Instead, the processing happens in the background so simultaneous requests can be made asynchronously.

In the past, DHTML modified the visual elements without having to reload the page; however, it usually had no affect whatsoever on the server or database. Now it is possible to use all the same DHTML widgets, but send information to the server in the background to allow real interaction.

The Characteristics of AJAX Applications
The technologies behind classical Web applications (HTML) are pretty simple and straightforward. This simplicity, however, comes at a cost. Classic Web pages have little intelligence and lack dynamic and interactive behavior.

AJAX changes the landscape. It allows Web pages to be interactive like desktop applications. Unlike classic HTML Web applications, AJAX applications have different characteristics.

The Web Page as an Application
AJAX blurs the boundary between Web pages and applications. In classical Web applications, a Web page is an HTML document that can be rendered by a browser for purposes of information display. It has limited to zero intelligence of its own.

In an AJAX application, the HTML page that the server sends to the browser includes code that makes the page "smarter" This code runs in the background, acting as the "brains," while the HTML document is rendered in the browser window. This code can detect events such as keystrokes or mouse clicks and responds to these events without making a round-trip to the server.

Through AJAX, a Web page feels more like a desktop application. It responds fast, almost immediately to user actions, without a full-page refresh. And it can continuously update the page by asynchronously retrieving data from the server in the background, similar to the desktop experience.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.