AJAX : The Interactive Web

AJAX (Asynchronous JavaScript & XML, pronounced eh-jax) represents a set of tools and techniques that are commonly used to create interactive web applications, and can be said to be an important contributor to the Web 2.0 movement ^[1] . As the name suggests, the approach includes technologies such as Javascript, XML, DOM, JSON and CSS.

In a simple representation of the web environment, there are two main actors - the client and the server. Using traditional web technologies, a client would make a HTTP request for a page to the server, and the server will respond by transmitting the HTML data back to the client, which then reloads and renders the page through the browser (See Figure 1).

FIGURE 1 - Classic Web Model [ Adaptive Path http://www.adaptivepath.com ]

In an AJAX environment however, the client can make a HTTP request "behind-the-scenes", using an added actor called the AJAX engine. This is done such that data can be requested from the server without having to change the page being displayed in the browser (See Figure 2, notice the "Browser UI" is not interrupted). AJAX can thus be said to be client-execution oriented.

FIGURE 2 - AJAX Web Model [ Adaptive Path http://www.adaptivepath.com ]

A web page employing AJAX appears dynamic and interactive, since content is pulled "on-the-fly" without actually redirecting the browser to another page. This functionality, as we will explore later in this article, allows for some interesting and cool applications on the web when it is combined with a dose of developer creativity.

A Brief History

The term AJAX started with the advent of the XML HTTP Request object, which was first created in 1999 for Microsoft Internet Explorer and was subsequently adopted by all major browsers ^[2] . XML HTTP Request is incorporated into JavaScript, and in a nutshell, it allows developers to make a HTTP call and return the response into the calling script without leaving the page context.

The term AJAX was coined by Jesse James Garrett in 2005 ^[3] . Since then, many books, articles and tutorials have been published on AJAX, encompassing many facets from academic evaluation to how-to “recipes”.

Where Is AJAX Now?

Everywhere.

AJAX has gained widespread use and momentum because it transformed web applications and sites into highly responsive, dynamic and interactive environments. It is embraced by many developers, and there are several frameworks and libraries available that support the creation and implementation of AJAX functionality. The popular jQuery library, script.aculo.us, and Adobe’s Spry framework are some prominent examples.

Many popular sites employ AJAX techniques – in fact, the three top favorites according to Most Popular Websites ^[4] , Google, Facebook and Youtube, all contain AJAX implementations. So what’s the draw about AJAX?

FIGURE 3 – Google Suggest [ http://www.google.com ]

FIGURE 4 – Youtube Search Bar [ http://www.youtube.com ]

FIGURE 5 – Google Calendar [ http://calendar.google.com ]

AJAX allows an interactive and rich user experience.

Google and Youtube both employ AJAX auto complete functionality to suggest search terms (Figure 3, Figure 4). These help users to find what they are looking for faster by prompting them with the most relevant terms. Google Calendar also employs AJAX to add events into a user’s calendar (Figure 5). When a user adds a new event, the page does not refresh - instead, the Calendar engine sends the new event to the server using AJAX, and the calendar is updated without a page redirect, creating a highly visual and uninterrupted user experience.

FIGURE 6.1 – Facebook Loading [ http://www.facebook.com ]

FIGURE 6.2 – Facebook Loaded [ http://www.facebook.com ]

AJAX can lighten server load without compromising content.

Facebook also utilizes AJAX methods to create an interactive interface. When a user clicks on the notification icon, for example, the engine begins to load up the recent notifications for the user. As seen in Figure 6.1 and 6.2, the user experience is not disrupted. More importantly for a large site like Facebook, the notifications are not loaded immediately when the user first views the page. Instead, it is only retrieved when the user clicks on the notification icon. This reduces the server load and allows pages to be loaded in much shorter time.

In fact, according to a test conducted by Massive Technology Show, choosing AJAX over the classic architecture could represent as much as a 68% performance increase in speed ^[5] .

FIGURE 7 – Last.FM Username Check [ http://www.last.fm ]

AJAX allows a more responsive, less error-prone and highly visual interface.

AJAX also enables web applications to become more responsive and visual. Formerly, in order to register for a new account, a user would have to submit a form and be sent to another page to check if the username is available, before directing the user to a page to indicate either success or failure. However, using AJAX, as seen here on Last.FM (Figure 7), a user can immediately know the availability of his chosen username. This saves considerable time from being directed to-and-fro, and also enhances the visual appeal.

For businesses, this presents an opportunity for error prevention. With AJAX, it is possible for employees to get real-time responses as they interact with the system, such as prompts that highlight potential errors to the user as soon as it occurs. In Figure 8, you can see how AJAX can help find a Mr. Clover Scott, which saves employees the time of typing the full name and also minimizes typographical errors.

FIGURE 8 – AJAX Auto Suggest [ http://www.brandspankingnew.net/specials ]

There’s No Free Lunch, Is There?

Well, no. There are two major drawbacks of AJAX use – firstly, since content is generated on the fly, or on user-demand, search engine spiders are often unable to access the content. This may adversely impact search rankings since the spider cannot interact with the system as a human can.

However, some advances in spider engineering are beginning to enable these digital arachnoids to “see” AJAX-based pages ^[6] . Some development tweaks will also enable search engines to get a better picture of the content the site is serving. Algorithms such as peer-ranking would also help aggregate the results of these crawls by adding consideration for human factors.

The second drawback of AJAX is the inability of web browsers to accurately capture a history of AJAX pages. This happens because AJAX pages load content without changing the actual page, which deceives the browser into believing it is still on the same page. This drawback often renders the “back” and “refresh” functions on a browser ineffective.

There have been several proposed workarounds ^[7] for these functions, but most involve including additional code onto a site, which could spell more work for developers and would invariably increase the page size.

What Other Tricks Can AJAX Do?

Here are some snippets of AJAX applications on the web today. These will give an idea of what AJAX is capable of, and it is up to your creativity and imagination to determine how these functions can fit into a larger web application.

Jcrop by DeepLiquid allows users to crop images online, the same way Facebook allows you to crop an image to create your profile thumbnail. This application uses the jQuery library to allow online picture editing.

This Inline Editing Script from Yvo Schaap allows users to change content by simply clicking on the content area and typing directly. All the changes are then saved to the backend server using AJAX. No page refreshes required!

An AJAX Based Shopping Cart tutorial by tutorialzine.com teaches you how to create an application where users can drag and drop items they would like to purchase into a cart, simulating a supermarket trolley. Fancy a genuine online cart, anyone?

The StarBox project by Nick Stakenburg is a tool that allows users to rate items on the fly. Youtube implements a similar feature by allowing you to rate a video without having to leave the page or interrupting the video.

Where’s AJAX Headed Now?

That’s where it gets exciting – with HTML5 and CSS3, web interactivity has just gotten a booster shot. Combine the AJAX approach with these freshly minted standards, and you could well be in for some of the most exciting and engaging web sites ever created.

As sites become more dynamic and interactive, page sizes and loading times become a headache. Richer content means bigger page size, and that translates to higher load times. Where AJAX shines is that is allows the same content to be offered, but only to be loaded when it is requested by the user. In a nutshell, that means a sleeker, simpler and faster interface.

With Cloud Computing and the adoption of web applications (or software as a service) growing exponentially ^[8] , AJAX is required in order to replicate and advance the features currently available on desktop applications in a web environment. Auto-complete, drag and drop, and many other features are critical to reproducing that interface.

Of course, there are some incredibly cool stuff we can do with HTML5, CSS3 and AJAX.

Check out A World of Tweets – a tweet tracker that shows how many tweets are clocked around the world in real time. AJAX, HTML5 and CSS3.

Also take a look at The Wilderness Downtown, a Google experiment that demonstrates an interactive film created by Google Maps, HTML5, CSS3 and AJAX. The video is rendered on-the-fly, depending on your address.

AJAX: The Game Changer

AJAX is now in almost every major web application – Gmail, Youtube, Google Calendar, Yahoo, Hotmail, you name it. The way that we interact with the web has also changed dramatically. No longer are we constrained by page refreshes – it is now possible for us to enjoy rich content without ever leaving a page.

If it is not extremely clear at this point of how AJAX has transformed the web, just think of Facebook. Imagine that every button you clicked required a page refresh. Each time you add a friend, join a group, viewed your notifications, liked a post – it takes you to another page, runs a function, and then takes you back to your original page, refreshing it in the process.

You wouldn’t be clicking on too many buttons now will you?

Despite the fact that AJAX has gotten old – the AJAX World Conference was last held in 2008, it is nowhere near extinction. It is now tightly integrated with many frameworks and has become so pervasive that it is part and parcel of web development today.

AJAX is no longer the big hype it was in 2006 – but it is definitely here to stay.

References

¹ Introduction to AJAX Technologies; http://www.informit.com/articles/article.aspx?p=1310178
² Wikipedia, AJAX, History; http://en.wikipedia.org/wiki/Ajax_(programming)#History
³ AJAX: A New Approach to Web Applications; http://www.adaptivepath.com/ideas/essays/archives/000385.php
⁴ Most Popular Websites; http://mostpopularwebsites.net/
⁵ The Benefits of AJAX; http://www.massivetechshow.com/resources/ajax.asp
⁶ A Proposal For Making AJAX Crawlable; http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html
⁷ Ajax: How to Handle Bookmarks and Back Buttons; http://dev.aol.com/ajax-handling-bookmarks-and-back-button
⁸ SaaS Growth Shows Interest Now More Than Financial; http://www.itbusinessedge.com/cm/blogs/all/saas-growth-shows-interest-now-more-than-financial/?cs=44416