What is AJAX and How Does It Work?

AJAX stands for Asynchronous JavaScript and XML. It is a set of web development techniques which allow web applications to work asynchronously – processing any requests to the server in the background. Wait, what is AJAX again? Let’s go over each terminology separately.

JavaScript is a well-known coding language. Amongst its other functionality, it manages dynamic content of a website and allows dynamic user interaction. XML is another variant of a markup language like HTML, as suggested by the name – eXtensible Markup Language. If HTML is designed to display data, XML is designed to contain and carry data.

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

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.
• XML for the interchange of data and XSLT for its manipulation. Many developers have started to replace with JSON because it is closer in form to JavaScript.
• The XMLHttpRequest object for the asynchronous communication.
• Finally, JavaScript programming language to bring all these technologies together.

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.

Diagram:

Comparison table:

Conventional model

AJAX model

An HTTP request is sent from the web browser to the server. The server receives and, subsequently, retrieves the data. The server sends the requested data to the web browser. The web browser receives the data and reloads the page to make the data appear. 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.

The browser creates a JavaScript call which will then activate XMLHttpRequest. In the background, the web browser creates an HTTP request to the server. The server receives, retrieves, and sends the data back to the web browser. The web browser receives the requested data which will directly appear on the page. No Reloading is needed.

Wrap Up

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.