When not to use AJAX for Dummies

UPDATE: This blog has moved to http://marcelo.sampasite.com/brave-tech-world/default.htm . Please, update your subscription. Click to subscribe on Bloglines.

---

Somehow, AJAX became synonymous with rich UI, and that is the same thing as saying that HDTV signals will result in better TV content.

Some sites are using AJAX in the wrong place.

IMHO, Ajax works great if you have a dynamic UI that can't load all data to do its job at once, or, the data is dynamic and refreshing the page costs a lot more than the AJAX overhead.

These are a few examples where Ajax makes sense:

• Google Suggests: You can't have the client load 60 million query terms, so, as the user types characters, you only fetch from the server the top 10 terms that start with those characters.
• List of Cities: If you want to have a rich Address input that suggests countries, states and cities, you might want to do Ajax since loading all countries, all states and all cities of the world it is certainly too much.
• Large Lists: Pictures (Flickr, SampaSite), Pages, Documents, E-mails (OWA, Mailroom), etc. If you have a list with 10 items, AJAX is useless. Embed the content on the page and you're good. If you have lists with 100 or more items and each has several attributes, using AJAX allows you to do nice paging, sorting, without the user having to wait an eternity for the content to load.

Here's where AJAX is just plain unnecessary (some are cool, but not necessary):

• Subscribe to a site e-news. Instead of sending you to a page to confirm, they just do an AJAX call to register you and give you the OK right there on the page.
• Post a comment on a blog: AJAX posting is neat, but not necessary. I would say that it is sometimes confusing, since users are so used to clicking on a Submit button and being sent to a confirmation page.

Now, some dumb examples of AJAX usage:

• Loading a page, and firing an AJAX call to load 10 items from a list.
• Loading the name of countries.

Why do I say it is dumb to do those things?

Four reasons: Latency, overhead, parsing, rendering time.

• Latency: Every AJAX call requires at least one HTTP request and one HTTP response. Even on the fastest network that will be several milliseconds, maybe more depending on the state of the network and the load on the server. That can also be aggravated by other calls being done simultaneously to the same server, like other IFrames, Images, JS Files or other AJAX calls.
• Overhead: The HTTP Request/Response overhead of an AJAX call can be 1-2K just for the HTTP Header, TCP Header, IP Header, etc. This doesn't include the data that are being sent back. So unless, you are sending a lot more than 2K of data back, just stick it on the page.
• Parsing: I know this is so fast that might be insignificant, but you should be aware that every time there is an AJAX response, IE or Firefox needs to parse that content into the XML DOM.
• Rendering: Instead of sending plain HTML embedded on a page, you send an HTML+JS to the client that makes an AJAX request, receives a response, you parse the content and now you need to build the HTML on the client and stick it into the current view. This can easily be done the wrong way and make the page/browser unresponsive for several seconds. There is nothing that makes a user angrier than unresponsive UI (ok, maybe there are a few things).

Back to my dumb examples...

Loading a list of 10 items, like for example, tags/categories being used by a blog into an auto-complete box is just stupid. Actually, loading a list of 50 or 100 tags using AJAX continues to be stupid. If the user uses 100 different tags and each has about 10 characters that would be just about 1.5K of data in JS (or 2K in XML). It is much easier to stick on a JS variable on the page. Want to do it really fancy? Generate a JS file on the fly that has some checksum, like mytags357395.js and include all the tags on that file, if tags are added/removed/renamed a new JS is generated, otherwise the content is cached on the client.

The list of countries is also stupid not only because the name of all countries can fit in just 8K of data (assuming all the <SELECT>/<OPTION> is present as well), but also the name of countries don't change (mostly). A third reason for not using AJAX on this case (assuming that you are asking the Country because he/she is subscribing to your site) is because you will prevent users that have JavaScript disabled, or, are using a browser that doesn't support JS (e.g., Mobile phones) from using that page.

Conclusion

If you want to use AJAX, do so for the right reasons and if you are doing a large scale website, make sure to measure different solutions to find out if certain things are really worth using it.

Comments

[Sérgio Jardim]

Very nice article, Marcelo! Maybe I'll translate it into portuguese. If I do so I'll drop a line to ya.

Cheers.

[Jon]

Overall, I agree with your assessment, though I have to say the way Flickr does in-place title and description editing is cool (yes, not necessary, but definitely improves the user experience). One thing worth noting: you assume that the data coming back from the Ajax call is XML and needs parsing, but it may very well be plain text or HTML generated by a server-side script.