May 18, 2021
What is AJAX and How Does It Work?
Practical Examples of AJAX
Think of the Google Autocomplete feature. It helps you complete your keywords while you are typing them. The keywords change in real time yet the page remains the same. In the early 90s, where the internet wasn’t as advanced, the same feature would require Google to reload your page every time a new recommendation popping up on your screen. AJAX allows data interchange and the presentation layer to work simultaneously without interfering each other’s function.
The AJAX concept has actually been around since the mid-90s. However, it gained wider recognition when Google started to incorporate the concept on Google Mail and Google Maps in 2004. Today, it is widely used in various web applications to streamline the server communication process.
Here are more helpful examples of AJAX being used in our everyday lives.
- Voting and rating system
Have you ever given a rating for a product you purchased online? Have you ever filled out an online voting form? Either way, both operations use AJAX. Once you click the rating or voting button, the website will update the calculation but the entire page remains unchanged.
- Chat rooms
Some websites implement a built-in chat room on their main page, with which you can talk to their customer support officer. You don’t need to worry if you want to explore the page at the same time. AJAX will not reload your page every time you send and receive a new message.
- Twitter’s trending notification
Twitter has recently used AJAX for their updates. Every time new tweets have been made about certain trending subjects, Twitter will update the new figures without affecting the main page.
Simply put, AJAX makes multitasking easy. If you ever notice a similar situation where two operations work simultaneously, with one running and one being idle, that might be AJAX doing its thing.
How Does It Work?
Bear in mind that AJAX is not a single technology, nor is it a programming language. As stated before, AJAX is a set of web development techniques. The system generally comprises of:
- HTML/XHTML for the main language and CSS for the presentation.
- The Document Object Model (DOM) for dynamic display data and its interaction.
- The XMLHttpRequest object for the asynchronous communication.
You may need some technical knowledge to understand it fully. However, the general procedure of how AJAX works is quite simple. Take a look at the diagram and table below for further comparison.
|Conventional model||AJAX model|
During this process, users have no choice but to wait until the whole process is done. Not only is it time-consuming, but it will also place an unnecessary load on the server.
Definition aside, the best perk of using AJAX is that it streamlines the user experience. Your visitors do not have to wait long to access your content. However, it depends on what you need as well. Google, for instance, lets the users choose between AJAX and a conventional version when using Google Mail. Put your users’ need at the top of your list and use AJAX accordingly.