What is AJAX and how does it work?

AJAX stands for Asynchronous JavaScript and XML. It is a set of web development techniques that allow web applications to work asynchronously, processing any request to the server in the background. Wait, what is AJAX again? Let’s review each term separately.

JavaScript is a well-known programming language. Among other functions, it manages the dynamic content of a website and allows dynamic user interaction. XML is another variant of a markup language like , as its name suggests: eXtensible Markup Language. While HTML is designed to display data, XML is designed to contain and transport data.

Both JavaScript and XML work asynchronously in AJAX. As a result, any web application that uses AJAX can send and retrieve data from the server without the need to reload the entire page.

AJAX practical examples

Take Google’s autocomplete feature as an example; it helps you fill in your keywords as you type them. The keywords change in real time, however the page itself does not change. Back in the early ’90s, when the internet wasn’t that advanced, the same function would require Google to reload the page every time a new recommendation appeared on your screen. AJAX allows the data exchange and the presentation layer to work simultaneously without interfering with each other.

Google autocomplete

The concept of AJAX has been around since the mid-1990s. However, it gained wider recognition when Google began incorporating the concept into Google Mail and Google Maps in 2004. Today, it is widely used in various web applications for streamline the server communication process.

Here are more useful examples of AJAX in our daily lives.

• Voting and rating systems

Have you ever rated a product you bought 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 will remain unchanged.

Some websites have a built-in chat on their main page, through which you can speak with a customer service agent. You don’t have to worry if you want to browse the page at the same time. AJAX will not reload the page every time you send and receive a new message.

• Twitter trending notification

Twitter has recently incorporated AJAX for its updates. Every time new tweets are created on certain trending topics, Twitter will update the new figures without affecting the front page.

In a nutshell, AJAX makes multitasking easy. If you ever see a similar situation where two operations work simultaneously, with one running and the other sitting idle, it might be AJAX in action.

How does AJAX work?

Keep in mind that AJAX is not a single technology, nor is it a programming language. As said before, AJAX is a set of web development techniques. The system generally comprises:

• HTML/XHTML for the main language and CSS for the presentation.
• The Document Object Model (DOM) for dynamic display data and its interaction.
• XML for data exchange and XSLT for data manipulation. Many developers have started to replace it with JSON because it is more similar to JavaScript in form.
• The object XMLHttpRequest for asynchronous communication.
• Finally, the programming language javascript to unite all these technologies.

Some technical knowledge is necessary to fully understand it. However, the general procedure of how AJAX works is quite simple. Take a look at the following diagram and table for further explanation.

Diagram:

Comparison table:

conventional modelAJAX model1. An HTTP request is sent from the web browser to the server.1. The browser creates a JavaScript call that will then fire XMLHttpRequest.2. The server receives and later retrieves the data.2. In the background, the web browser creates an HTTP request to the server.3. The server sends the requested data to the web browser.3. The server receives, retrieves and sends the data to the web browser.4. The web browser receives the data and reloads the page for the data to appear.4. The web browser receives the requested data that will appear directly on the page. No need to recharge. During this process, users have no choice but to wait until the whole process is completed. It is not only time consuming, but also puts an unnecessary load on the server.

In summary

Leaving the definition aside, the biggest advantage of using AJAX is that it optimizes the user experience. Your visitors don’t have to wait long to access your content. However, it also depends on what you need. Google, for example, allows users to choose between AJAX and a conventional version when using Google Mail. It’s best to put the user’s needs at the top of your list and use AJAX accordingly.

Gustavo is passionate about creating websites. He focuses on the application of SEO strategies at for Spain and Latin America, as well as the creation of high-level content. When he is not applying new WordPress tricks you can find him playing the guitar, traveling or taking an online course.