How to use AJAX: 5 Real World Examples

I’ve always subscribed to the “content, content, content” philosophy of developing successful web sites.  In my former life as a freelance web developer, I’ve far too often seen clients get neck deep in logo and font choices — subsequently ignoring the main reason they got on the web in the first place: content.  Unless you have useful, reliable and frequently updated content, no amount of fancy graphics will give you a popular and well known website.  This isn’t to say that extra goodies like a killer design won’t help you — they obviously will — but they aren’t strong enough to support the site on their own.

Think of the extra goodies as the special features on a DVD.  Often you’ll hear DVDs advertised with “over 8 hours of special features,” in an attempt to get you to buy some lame movie (Poseidon, I’m looking in your general direction).  But no matter how you slice it, you’re still stuck with 8 hours of extras about a crappy movie.  If the movie is really awesome, however, those 8 hours of extras are totally worth it.  They elevate the movie from something you like in to something that you love.  Website extras are the same way: they can’t make a bad website good, but they can make a good website great.

Recently AJAX has come to the forefront as the next “buzzword complaint” thing on the internet.  Sometimes it seems that in order to be taken seriously, your site has to have some kind AJAX functionality built in.  But, much like Flash and other such tools, AJAX should be used sparingly to compliment the design, function and content of a website — not dominate it.  With this ethos in mind, I’d like to take a look at a few sites that use AJAX correctly, in hopes that other developers may do the same.

1. In Place Submission

Many websites thrive on users simply reviewing or marking one small piece of content.  In the “good ol’ days” of form submission, a user would click a link to offer their contribution, the action would be recorded by the site software, and they would be taken back to a new (or sometimes the same) page.  No more, now with AJAX!

At Netflix, rating movies is crucial to building good recommendations.  If you give a movie your ranking on their site by clicking on the star icon, a tiny bit of AJAX submits your review and you stay on the same page — refresh free.  This is not only quick, easy, and simple, but also lets the user review multiple movies on the same page with ease.

2. Malleable Content

Sometimes, websites require users to do a lot of editing of their content to get it ready for incorporation in to the mainstream portions of the site.  Whether it’s tagging, adding descriptions, or writing reviews, often times someone will have to do a lot of editing on one (or a set of) items over and over again.  Enter malleable content.  With malleable content, the user can edit site content in place, without having to go through an entire form submission process.

Over at Flickr, you are able to add titles and captions to your pictures easily.  Above and below each picture are inputs for titles and captions, respectively.  With the malleable content in place, all a user needs to do is mouse over and click on a title or caption to open an edit box.   Then the user types in his/her text, hits save, and the data is written.  That’s it.  The user doesn’t have to reload anything, which saves both them and Flickr bandwidth.  Moreover, it makes the edit process more instinctual for the user than having to deal with multiple forms on the same page.

3. Sliders and Other Controls

The web is not simply used to load up a page of static content and display it.  This should be obvious, and if it isn’t, well…you should just turn off your computer and go outside to play with your cat.  Sometimes you need to let the user decide how and/or what content is displayed on the page.  A control fills this need perfectly.  The user manipulates a control on a site to modify the content that is displayed in front of them.  This may sound like just a worthless extra, but it can be very useful.

Following hurricane Katrina, Boston.com created a control which overlays a map of the flooded area of New Orleans with a map of the Boston area.  Not only does this provide an effective way to allow people from Boston to understand the size of the flooded area, but because it’s a slider it allows users to go back and forth comparing the two maps easily.  You never have to wait for a page refresh and get a much better overview of the comparitive differences.

4. Draggable Content

Web applications often have a “user homepage” which displays all relevant information and links for that user.  I remember way back to when I first discovered myYahoo; I thought it was so cool thar I could customize how a website looked to me.  It was so…personal.  But back then, you customized your page through 3 multiple dropdown boxes and some clever JavaScript.  But not anymore; now we have AJAX.

I’m sure everyone is familiar with Google’s Personalized Homepage, but it is a very good example of just how useful draggable content is.  Instead of the old style dropdown list and form submission to setup your page, all you do here is drag and drop.  Again, it not only requires less bandwidth for Google and the user, but it is also more instinctual and faster for the user.

5. Suggestions

Never assume anything from your users.  This especially applies to security, where you need to hold all user collected content with a 500′ pole away from your site until you’ve scrubbed away all of its nasty XSS/Injection bits.  But you should also never assume that your user knows what they’re looking for.  The world is a big place, and misunderstandings are common — especially when traveling.  But it doesn’t have to be that way!  Now we have AJAX, and it is here to offer up suggestions.

With Kayak.com‘s search box, as you type in a query it will display results dynamically via some AJAX.  While this subtle suggestion may be annoying to some, I’m sure you’ll be singing its praises when you can’t remember what the names of all the New York Airports are, or you’re trying to remember how to spell the Raleigh-Durham International Airport.  It’s cases like this when the suggestion feature becomes very useful, and AJAX comes in to lend a helping hand.

Conclusion

In each of the preceding examples, their functionality can be accomplished AJAX-free.  Some may argue that this is the preferred method, as the usability of AJAX is still debated in some web standards and usability circles.  And while it may be true that not everyone on the internet is going to be able to use every single AJAX feature, that doesn’t mean they shouldn’t be implemented.  They help drive forward user interface and web functionality to places beyond the standard flat HTML page.

At the same time, AJAX can be obtrusive and used “just because.”  While poking around Netflix, I found out that after you add a movie to your queue via the “Add” button, a box occupying 80% of the screen comes up offering additional suggestions for me to take a look at.  You have another click to get it closed or to go back to the main site.  I find this annoying — especially since the same suggestion functionality is available in another place on their site.  The AJAX gets in the way and becomes a blockage to content, not a complimentary player on the site.

When used correctly, AJAX is a very nice tool in the web developers arsenal.  It allows quick and easy completion of repetitive tasks, complete customization of a site’s layout by a user, and offers helpful suggestions.  Just remember the golden rule: content. Without it, you’re just stringing pearls on a manatee.