AJAX stands for Asynchronous Javascript And XML, which is a bit of a misnomer, because the technology is only optionally asynchronous, and almost never uses XML anymore. The name describes the intentions of the original architects, and it has a nice ring to it, so it was kept in spite of the evolution of the technology itself.
AJAX is a technique whereby a script makes a direct request to a web server for information, without refreshing the page within which it is running. This single function has had an extremely powerful effect on the way websites function, and has underpinned the Web 2.0 revolution. We’ll discuss more about that in another post, but today we’ll look a little at how AJAX works and, more importantly, when it should be used.
The most common (and most efficient) way to implement AJAX is to use the XMLHttpRequest javascript method. This method has been part of the Javascript standard since 2006, although it was first released in Mozilla’s Gecko browser in 2000. The method quite simply allows the developer to make an HTTP request, and receive a response.
AJAX allows a developer to connect to the server to collect additional or conditional information without reloading the entire page. This allows the developer to update parts of the page in response to user actions on other parts of the page, and allows for a much richer and more efficient experience. It is used in a wide range of applications, but some examples include updating a shopping cart widget when you add an item to your cart, or processing the results of a popup form on the containing page. Facebook uses AJAX extensively (pretty much every time you see the little loading image, AJAX is being used), and online applications like Gmail and Google Docs simply could not exist without it.
Like many new internet technologies, AJAX became cool almost as soon as it hit. Developers have started using AJAX all over the place, and in many cases in completely unnecessary, and sometimes quite incomprehensible, places. It is a bit like the animated gif catastrophe of the late nineties. So the question is: when should AJAX actually be used?
Well, to start, let’s set some basic ground rules. AJAX, while simple enough, is much more complicated than simply reloading a page. There are many more risks for complications and failure. So, it should never be used when a simple link would do the same job. No matter how cool it might be.
The content supplied by AJAX is, obviously, not available in the original HTML that was downloaded, so search engines cannot see it. So AJAX should never be used to deliver publicly relevant content, because it will never be indexed.
So, we don’t use AJAX to refresh the entire page, but only to update small parts of the page, and we don’t use AJAX to deliver content, only user-specific information (or updates based on user actions). More definitively, however, when deciding whether or not to use AJAX, we need to identify the primary purpose of the page concerned. In most cases, a page will have a single primary purpose. This isn’t just coincidence – it is a good design strategy. Often, however, the page will also have supporting functions which are not the primary purpose. In this scenario, AJAX should be used for the supporting functions, while the page should reload (or load another page) to complete the primary purpose.
An example: you have an online shop, and each product has some complex options. On the product page, your primary purpose is to get the customer to add the product to their shopping cart. This is more complicated than just clicking a button – the user must choose from a range of options before they click the add button. You also have a feature that changes the picture being displayed based on the choices being made (maybe the customer chooses a different colour, so the preview image updates to show the product in the new colour). The picture should be changed with AJAX for two reasons. First, it allows the picture to change, giving the customer a better idea of the product they’re buying, without interrupting the flow of the process you have designed to get the customer to purchase. Second, it completely sidesteps the problem of maintaining the users’ selections when reloading the page. When the user clicks the “Add To Cart” button, however, they should be taken to a whole new page. They have fulfilled the purpose of the page, and have no more reason to be there. Also, moving to a new page provides gravity to the action – it makes the user feel that they have done something significant.
Next up, a short discussion on how AJAX should be used to enhance the user experience, and how it should not be used.
