También disponible en Español

Inf@Vis!

The digital magazine of InfoVis.net

Ajax
by Juan C. Dürsteler [message nº 177]

This is the name given to a set of web technologies that promise to make the user experience advance towards more interactive surroundings and closer to the immediacy of the work within the desktop metaphor environment, with all the advantages of Internet.

When we connect to a web site, be it static or dynamic, we are used to moving through hyperlinks that, once clicked upon, cancel the current page and show, after a brief or sometimes not so brief lapse, a new page. Unlike what happens in the desktop metaphor of our computer, where the applications respond very quickly once loaded and we are able to interact in a very fluid way, web pages require the downloading of a new page for most of the operations, for example zooms or links to new pages.

Java and JavaScript were born as technologies that enable, once the computer program is downloaded, real time interaction without the need to continuously send requests to the web server. Ajax goes one step further by combining different technologies in order to achieve a higher agility in the interaction. 

Ajax is the acronym of Asynchronous JavaScript and XML apparently coined by the people at Adaptive Path that are actively promoting this new approach to web interaction. Basically Ajax uses:

  • HTML or XHTML and CSS (Cascading Style Sheets), as most web applications do.

  • Document Object Model (DOM) and Javascript with the objective of providing interactivity easing the dynamic representation of data.

    DOM is a W3C (World Wide Web Consortium) standard that appeared to ensure the compatibility among software manufacturers when making JavaScript programs behaving in a predictable and homogeneous way, independently of the browser they were executed in. Conceived to avoid commercial wars like the one between Microsoft and Netscape where each one created non standard extensions, it hasn't been able to avoid Microsoft, when already a de facto standard, having created its own extensions to DOM (!).

  • XML and XLST to provide the asynchronous data exchange with web server.

The operating model of Ajax transforms the usual way the data is processed in web applications. Let's see how it's done

Ajax_en.gif (23259 bytes)

Traditional Web Aplication

In a typical web application the browser interacts with the user in his or her computer. When the interaction is initiated, an HTML page is downloaded from the server following a request of the browser. When the user clicks on a hyperlink, fills in a form or issues a query, the browser builds up an http request that is sent to the web server that can be placed elsewhere in the world. 

With this information the server performs the operation requested, that can involve querying a database, producing a chart or performing a complex computation, and builds a new page using HTML and possibly CSS. Alternatively it can simply identify which preexistent page fits the operation. In any case it erases the former page and substitutes it with the new one. In many cases the new page is very similar to the former one, maybe with just a field validated or a graphic zoomed in or out.

The (well known) problem with this model is that while the server is busy processing our request (among many others) we are just waiting patiently forthe arrival of the new page, what very often doesn't happen very quickly. Everything happens in the server side while in the user side the browser just waits.

Ajax application

As  Jesse James Garrett explains in his very interesting and referential article about Ajax in this case the model changes in the following way:

Ajax introduces an intermediary between the interaction with the user and the server that is called an "Ajax engine". The page that the browser receives when the session is initiated no longer contains a regular HTML page, but it holds an Ajax engine sent by the server, written in JavaScript and usually embedded in a hidden frame.

The Ajax engine provides a flexible framework that is independent from the server that is responsible for all the interaction with the user. It can contain computing algorithms, sophisticated systems for the production of graphics or any other thing that could be written using JavaScript.

This way interaction becomes unlinked from the server (it becomes asynchronous, as the A of Ajax states) and while we are interacting with the application, the browser can communicate with the server without us waiting for the end of the data transmission.

This is possible since every interaction is issued against the Ajax engine instead of against the server. Once the data is downloaded you can interact with it through the also downloaded JavaScript programs. Anything that is not yet present but is needed can be requested from the server using XML and it happens in the background, without erasing the page or stopping the user interaction.

Usually the first Ajax application is considered to be the one that contains the web client of Microsoft Exchange Server. Nevertheless the one who is making a deep and systematic use of this interaction model is our old friend Google, that incorporates it (in a brilliant way I dare to say) in applications like

But not only Google is making proficient use of Ajax, other companies are gradually introducing this system. Among them you find, of course, Amazon with its A9 search engine or Flickr, an online photo album, among many others. See the Wikipedia entry for Ajax to get a more extended listing.

An interesting example is Writely  an online word processor that can be used from anywhere in the world (as any web application) but whose interaction is so fluid and familiar like any other word processor run directly in our computer.

Ajax is an interesting proposal that brings closer together the rigid and not so interactive world of the web to the more flexible and friendly one of the desktop metaphor. Not yet being the definitive proposal it provides a significant methodological and technical advance that begins to enable the union of the best of two worlds: the ubiquity and simplicity of the web with the interactivity of the desktop.

Links of this issue:

http://www.adaptivepath.com   Adaptive Path website
http://www.adaptivepath.com/team/jjg.php   Jesse James Garrett personal page
http://www.adaptivepath.com/publications/essays/archives/000385.php   Jesse James Garrett key article on Ajax
http://groups.google.com/   Google Groups
http://www.google.com/webhp?complete=1&hl=en   Google Suggest
http://maps.google.com/   Google Maps
http://www.gmail.com/   Google Electronic Mail
http://www.a9.com/   Amazon.com's A9 search engine
http://www.flickr.com/   Flickr.com
http://en.wikipedia.org/wiki/AJAX   Entry about Ajax in the Wikipedia
http://www.writely.com/   Writely an Ajax based word processor
© Copyright InfoVis.net 2000-2014