Poor old AJAX. One of the most misunderstood and misused acronyms the web industry has to offer. Once the preserve of house-proud cleaners and football fans, the term was pinched in 2005 by Jesse James Garret to summarise a collection of technologies responsible for transferring data asynchronously (i.e. without requiring a page refresh) between a web server and a user’s browser but is all too frequently associated incorrectly with simple JavaScript animations, Flash, or plain old browser behaviour. So, when isn’t AJAX actually AJAX?

For starters, the acronym is something of a misnomer these days. It was originally coined to mean “Asynchronous Javascript and XML” – the Asynchronous JavaScript bit generated the request from the browser to the web server, and the web server replied in XML format – the de facto method for distributing arbitrary textual data over the internet. However, a number of different data transfer methods have existed for many years – and indeed are far more popular than XML as the data type of choice for AJAX requests. However, AJAJ (if JSON is your data type of choice like Google’s suggestive search), or AJAH (if you prefer good old HTML like the BBC website does in places) aren’t quite as catchy – so AJAX remains the acronym of choice. Even if they know you don’t really mean the ‘X’ part of it, people know what you mean when you say it. Or do they?

Misleading acronyms aside, there’s a far more widespread misunderstanding of what AJAX actually is. Most developers worth their salt should be able to spot an AJAX request from bog standard JavaScript (particularly with the help of tools such as Firebug), but outside of this inner sanctum the term is applied liberally to things it simply is not, by people who should know better. Got some nice animation on a page? Ooh, that’s AJAX that is. Using a fancy lightbox/window/etc instead of an old school popup? That must be AJAX. Got extra content fading in and out when rolling over a menu item? AJAX. Gotta be.

No, no, no. In all likelihood, none of the above examples would utilise AJAX. They’re just plain old Javascript.

AJAX is mostly used when you need to interact with a web server and update part of your web page based on its response, when you can’t predict the data you need to give to a user ahead of time, or when you probably can predict the data you need to give to a user but doing so would result in a large amount of overhead on page load. A good example of simple JavaScript is the Coolpink team page. Hovering over each person’s thumbnail shows a context-sensitive popup with a small amount of information about them. We can pretty confidently predict that users will hover over some of the thumbnails before probably clicking one of them to read more about that person – so we use JavaScript to achieve the desired effect. We send all the information to the browser when they request the page, and then just hide it until a user hovers over the relevant thumbnail. Even if the user never hovers over any of the thumbnails, the amount of extra data we’ve transferred over is negligible and means we can show the popup instantly without a further request to the server – so the trade off is worth it.

Now, imagine that there were 100 thumbnails on that page, and hovering over each of them revealed an extensive biography about each individual. Yes, we could load all the data when the user requested the page, but we’d be loading an awful lot of information we probably wouldn’t need and slow the page load time quite considerably. AJAX would be perfect here – we’d load in the thumbnails, and on roll over we’d request the biography for the individual in question from the server. This would give us a far more efficient and responsive web page – just the sort of problem AJAX should be used to solve.

Taking the example to its most extreme for a moment, have a think about google maps. This sort of application simply wouldn’t be possible without AJAX as it would have to load in every single image at every single resolution for the entire map of the world without it – or alternatively spend forever refreshing the entire page every time you needed to look at a new part of the map or change the scale of it. Obviously, the system has no way of predicting what data you want, so it is all requested on the fly via multiple AJAX calls. Similarly, search mechanisms are increasingly leveraging the power of AJAX to refine searches on the fly in order to eliminate the possibility of a “no results found” scenario. Autotrader started using this approach last year, and we gave it a crack back in 2007 on one of our client’s websites. These systems would be nigh-on impossible without the power of AJAX.

A good indication as to whether something uses AJAX or not is if there’s a delay between an action and a response – if there is, it’s quite possible that there’s an AJAX request going on in the background fetching the data you’re after. If this delay is accompanied by a commonly seen ‘spinner‘ indicating that something is loading, then you can probably bet your bottom dollar that you’ve triggered an AJAX request.

So, the next time you see a nifty piece of functionality on a website and aren’t sure whether it uses AJAX or not, stop and have a think about what the functionality is doing and whether it appears to be making a round trip to the web server in order to achieve it. In the mean time, enjoy some examples of both plain old Javascript and AJAX enhanced web pages. In the words of Alan Partridge: ‘lovely stuff’.

Javascript examples – AJAX free!

• iNettuts – good demo of ‘drag & drop’ functionality which most would presume to be AJAX but is not.
• Simple CSS & JQuery Toggle – a simple show / hide example; no interaction with the server is required after the initial page load
• Lightbox – the classic lightbox. Not a drop of AJAX in sight.
• BBC Homepage – No! That drag & drop functionality does not use AJAX. Promise.

Nifty AJAX examples

• Google Maps – relatively self explanatory; probably the ultimate demonstration of the power of AJAX.
• TweetPaperScissors – shameless self promotion ahoy! The classic game of Rock Paper Scissors, online, in real time, using nothing but HTML and AJAX (oh, and your twitter login details).
• Multicolr Search Lab – one of the coolest uses of AJAX I’ve seen in the last few years. Awesome!
• keyboardr – lots of AJAX search goodness & cool use of Javascript keyboard input
• BBC Homepage – Yes! All the options which appear when you click ‘Edit’ on the various homepage pods are retrieved via an AJAX request.

Oh, one last thing – not a single one of the examples demonstrating AJAX in this post actually use XML to return data from the server. Maybe it should be called AJAJ after all…