Editorial Articles

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 (without requiring a page refresh) between a web server and browser but is frequently associated incorrectly with simple JavaScript effects. So, when isn’t AJAX actually AJAX?

For starters, the acronym is something of a misnomer. 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 server replied in XML format. However, a number of different data transfer methods have existed for many years – and are indeed 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 (HTML - like the BBC website does in places) aren’t quite as catchy – so AJAX remains the acronym of choice.

AJAX is mostly used to interact with a web server and update part of a 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 required but doing so would result in a large amount of overhead on page load. An example of simple JavaScript is the Coolpink team page. Hovering over each person’s thumbnail shows a pop-up with limited information about them. We expect that users will hover over some thumbnails before clicking one to read more about that person – so we use JavaScript to achieve the desired effect. All information is sent to the browser on page request and hidden until a user hovers over the relevant thumbnail. Even if they never hover over any of the thumbnails, the amount of extra data transferred is negligible and means the pop-up can be shown instantly without a further request to the server – so the trade off is worth it.

Now imagine there were 100 thumbnails and hovering over each revealed an extensive biography about the individual. 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 considerably. AJAX would be perfect here – we’d load in the thumbnails, and on roll over we’d request the biography for the relevant person from the server, giving a far more efficient and responsive web page.

Take an extreme example: Google Maps. This sort of application simply wouldn’t be possible without AJAX as it would have to load in every image at every resolution for the entire map of the world without it – or alternatively refresh the entire page every time a user needed to look at a new part of the map or change the scale of it. The server has no way of predicting what data is required, so it is all requested on the fly via multiple AJAX calls.

The next time you see a 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. 

Nick Payne
Lead Developer, Coolpink