BACK TO BASICS: Ajax in a Nutshell

by Danielle Sahiner, May 15, 2007

Ajax, what is it, is it cool, and if it is, should you use it? If you haven't heard of it by name yet, you've probably already used it in one form or another. Google Maps, The Wall Street Journal Online, and Flickr, just to name a few Web sites, all use it. So what is Ajax and what does it do?

Ajax stands for Asynchronous JavaScript + XML. It's a term that was coined by Jesses James Garrett, several years ago, to define a technology, not a new web application. He says,

Ajax isn't something you can download. It's an approach - a way of thinking about the architecture of web applications using certain technologies. Ajax applications inevitably involve running complex JavaScript code on the client. Making that complex code efficient and bug-free is not a task to be taken lightly, and better development tools and frameworks will be needed to help us meet that challenge.

Designing a web site using Ajax involves several phases. You must create three pages -- XHTML, CSS and JavaScript. This may make the development of the site a little longer, but in the end it can be worth it if your visitor's interaction with your site is enhanced. Ajax technology allows the actions on the page to be taken care of client-side, not server-side. This makes for less waiting and less frustration for the site visitor.

How does Ajax do that? It eliminates the "click, wait and refresh" approach of traditional pages. Therefore, once you hit the submit button after filling out a form, you won't be watching a spinning hourglass or a timer counting down the seconds, etc. until the server is able to return a thank you page or other results that you might be looking for. Basically, what happens is that the data travels across the internet wires instead of through HTML pages. This data exchange is via a specific browser object called XMLHttpRequest; which updates a region of the page instead of the entire page. The results are more speed, less traffic, and better control of information delivery. Users are not forced to interrupt their workflow while waiting for pages to reload. This is where the asynchronous part of Ajax comes in - the client-side script is asynchronously "talking" to the server while the user is still entering data. It's invisible to the user and it gives the server more time to process the request. This is why Ajax can be better than traditional web applications.

Now, not all web developers/designers may know how to write JavaScript. So is requiring them to do just that a drawback? Not necessarily. Learning how to write JavaScript is not hard or time consuming, plus, there are plenty of free JavaScript examples available on the web for the picking. And, you don't even need JavaScript to be enabled on your browser (though you do need a JavaScript enabled browser). To use an Ajax designed site, users don't have to download anything or learn new interfaces; it's all taken care of by the site developer. Plus, Ajax is not dependent on server-platforms; it can be used with PHP, Java, .NET, ColdFusion, etc.

Basically, Ajax allows web pages to behave like desktop applications. You can sort columns on pages, move chunks of text from one side of the page to the other, enter information into a form and get information back as you type, all without having to wait for the information to be sent to the server and then returned to you, and without having to download any software to your computer.

Ajax is cool. But should everyone start redesigning their sites to use it? Not necessarily. Morris Panner, CEO of OpenAir, who are implementing Ajax on their site, says,

Look at what usability problem you want to solve. If what you're offering is fairly static, you don't need it." But, he adds, where a dynamic interface is needed, Ajax is well worth the effort. "It narrows the gap between browser interface and rich client interface, and that's very meaningful for people who believe in ASPs. It's tremendously empowering to be able to answer user experience issues.

Another thing to keep in mind, which Lisa Barone has touched upon, Ajax isn't SEO friendly. "[Search] engines don't run JavaScript and can't see AJAX-delivered content. AJAX created navigation goes nowhere; spiders can't see the links so they won't follow anything." Also, Ajax is not easily accessible to people who have vision difficulties (site readers cannot read it). Therefore, if you want to rank (and who doesn't?) and be ADA compliant, you need to continue doing some things the old-fashioned way. That means creating static HTML pages, using a sitemap, having text links, and writing lots of great content for the spiders to follow and find.

Although Ajax isn't search engine friendly, there is a new Ajax powered search engine that was recently unveiled. According to Search Engine Journal, "Younanimous is an AJAX-powered social search engine that provides users with additional details such as the Alexa Ranking, Google Page Rank and domain age for each website." It's worth checking out.

Using Ajax for form submissions, photo storage, and map interfaces, among other things, greatly enhances your web site's usability and makes for a greater experience for your visitors. And hopefully that will keep them coming back. According to the Open Ajax Alliance:

Ajax is all about ways to create a more interactive and productive connection between a user and a Web-based application. Because Ajax provides similar advanced user interface features to those in desktop applications ... users spend less time learning and operating the application. The Ajax partial page update feature minimizes user delays ... due to open source alternatives, Ajax provides zero-cost deployment options. ...Ajax deployment offers several additional long-term strategic benefits, including:

• Replacement for desktop applications - Ajax offers a desktop-like user experience while retaining the benefits of server-based application deployment, centralized infrastructure administration, easier scalability, and immediate availability of application updates to all users. As a result, Ajax helps accelerate the movement away from installable, two-tier, client-server applications to multi-tier web applications.
• Higher customer expectations around user interface - The industry is embracing richer, more desktop-like, user interfaces for customer-facing Web applications. In many circumstances, adopting Ajax techniques is becoming a business requirement to maintain parity with the rest of the industry and match growing user expectations about Web-based user experiences.
• Operations efficiencies - In today's global economy, cost efficiency is more important than ever. Ajax techniques can help maintain efficiency and competitiveness of internal systems.

In closing, I want to leave you with two great reasons why Ajax web applications are so advantageous. Number one, they don't require installation nor do they require upgrades. Every time the server is upgraded, the application is upgraded. This makes it easier on the end users, and definitely easier on business IT departments, since they don't have to upgrade every one's computer each time something changes.

The second plus is that all you need to gain access to your application anywhere in the world, is a connection to the internet, your username and password. How easy is that? Unless you can't remember your username and password or connect to the internet in which case you have bigger problems.

Check out Carlos Focus's Blog for a list of great ideas on where to use Ajax. Another good site is http://www.ajaxlines.com/, as well as http://script.aculo.us/ which showcases how to use Ajax and provides some of the JavaScript libraries needed to make an Ajax site.

For permission to reprint or reuse any materials, please contact us. To learn more about our authors, please visit the Bruce Clay Authors page. Copyright 2007 Bruce Clay, Inc.