AJAX is a technology that allows a website user to interact with the server without reloading the web page. This allows us to turn a web page from a static piece of content into a dynamic web application. It is possible to make a web page interactive with JavaScript alone, but to talk to the server we need AJAX. Usually, the reason we need to talk to the server is to talk to a database, either requesting data or recording changes.

AJAX Examples

Here’s some examples of typical use cases where AJAX is used in the operation of your website:

• You run an eCommerce store with products that a user can add to their virtual cart. When a user navigates to their cart they might increase the quantity of a certain product and click Update Cart. AJAX will send the new quantity to the server which will calculate a new total price. The new price is returned to the user’s web browser and displayed in the cart without the page reloading.
• You’ve built your website on a content management system and you want to delete a page. You navigate to the screen for managing pages which has a table showing all existing page. You click Delete on the relevant page. Without AJAX, you would now wait several seconds while the page is deleted from the database and the whole page is reloaded. You lose control of the screen while this operation is happening. With AJAX, you never lose control of the screen. The page is deleted from the database in the background, and when it is complete AJAX will send back confirmation to the web browser that the deletion was successful. A message is then dynamically displayed on the screen showing the deletion was successful without the page reloading.
• You have a business directory website where users can search for businesses using a variety of criteria like location and category. Users fill in a form and search results are tabulated in a grid or list view. With AJAX, the user can change the search criteria, and the table will automatically update with new results without the page reloading.

Some Technical Detail

Acronym Breakdown

AJAX stands for Asynchronous JavaScript And XML. To break that acronym down:

• Asynchronous –  means the operation happens in the background at any time, separate to the loading of the whole web page.
• JavaScript – AJAX is based on the XMLHttpRequest API which is written in the JavaScript scripting language.
• XML – is a language used to format data transported between the web browser and server. This suggests data in AJAX requests is always sent in XML but the data can be sent in many forms. In fact, most data sent via AJAX today is formatted in JSON because it is lightweight and native to JavaScript. AJAJ is much less catchy than AJAX though so the old name is still in use.

Implementing AJAX

The XMLHttpRequest API is a somewhat cumbersome beast to use. Rather than call it directly, most modern web applications use JavaScript libraries with AJAX functionality. These libraries wrap around the low level XMLHttpRequest API and abstract away the complexity. The most popular JavaScript library for this purpose is jQuery with its $.ajax() method.

Further Reading

Read more about AJAX at W3 Schools AJAX tutorials and the Wikipedia AJAX article.