How to use AJAX: 5 Real World&nbspExamples

The author's views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

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.

Nice post. Also remember there are other RIAs like Lazlo and Flex that can do amazing things as well.
I believe they key to using these tools is the answer to a simple question. Does using an RIA for this particular purpose solve a problem?

This is great! We have been using AJAX in a few of the Federal Government sponsored Web sites in a very limited way. One of the main concerns with the Federal Gov sites is that it has to be Section 508 compliant. Can anyone shed some light on the use of AJAX and 508 compliance?

As far as I'm aware, AJAX isn't 508 compliant, but I'm not really all that familiar with section 508. Essentially, you're shooting for this...

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

Brilliant first post, Jeff. Nice work.
I have to admit that of all the examples above - Kayak's use of AJAX is, to me, the most compelling. It makes finding the perfect flight very easy, especially once you're on the results page and can automatically add/remove criteria and have the page insta-refresh.

Rand, also check out a kw query like "houston flights" from Kayaks Google ads. In fact I just mentioned it today on my blog.
Kayak is taking the city kw parameter from the URL and parsing it into the destination field on the landing page. Great optimization.
Bottom line: Kayak rocks.

Hey Jeff - regarding bad movies and special features.
Beast Master, one of the worst movies of all time and one of my favorites as a kid, has an incredible "making of Beast Master" special feature.
In the 30 minute documentary the directors discuss their work so seriously and felt they had contributed profoundly to the barbarian genre.
When I borrowed this film from a buddy a few years back I ended up enjoying the documentary far more than the movie.
I definitely agree that special features add so much to the movies I love too :)
Thanks for this great Ajax write up - I keep hearing the term and have never really dug in to learn anything about it.

That screams all sorts of pretentiousness. Watching the documentary more than the movie, however, is something I tend to do a lot too. I've watched the Ron Livingston video diary as many, if not more, as I've watched any single episode of BoB.

I can't believe that you left out the most critical and useful of them all, Fluxx ... Paging.
Anytime you have content divded between pages, AJAX is a great way to keep the user experience intact, add a little flair, and reduce the need for pointless page loads. Of course, most websites avoid doing this so that they can inflate traffic statistics and boost ad revenue, but from an end-user perspective, AJAX page loading is probably the best way to go.
Edited for spelling.

Hey all, we just developed an SEO ROI tool using some sliders and whatnot...I will not post the URL to look like I am hijacking the thread...but I am looking for feedback on it...if rand/fluxx says it is OK I willI can send it to you guys personally and then you decide. Let me know, while it is topical I don't want to be seen as trying to "self promote" cause I hate people like that on the boards that I run.