JavaScript

How AJAX works

AJAX comprises a set of useful web development techniques utilized to develop dynamic and speedy web pages. Behind the scenes, it shares small chunks of the data, permitting the web pages to be updated asynchronously. This states that by using AJAX, HTML page elements will be updated without reloading.

This write-up will discuss the components of AJAX and how AJAX works. We will talk about the working of AJAX in some top web-based applications. Moreover, a comparison between the conventional and AJAX model will be provided. So, let’s start!

Components of AJAX

AJAX is a set of web development techniques. It is based on the below-given components:

  • In the AJAX model, the XHTML/HTML is considered core languages and Cascade Style Sheets (CSS) as the presentation language.
  • The Document Object Model is utilized to show dynamic content and interaction purposes.
  • For exchanging data, AJAX relies on XML, and XSLT is used for data manipulation.
  • The XMLHttpRequest Object is used for the asynchronous communication in the model.
  • Lastly, JavaScript is used to connect all of these technologies in AJAX.

How AJAX works

Whenever users send any request from the user interface, or an event occurs such as a button being clicked or the web page being loaded, JavaScript creates an “XMLHttpRequest” object. After that, the created object sends an HTTPRequest to the webserver. Then, the server process the received HTTPRequest by interacting with the database. When the required data gets fetched from the database, a response is generated, and the server sends back that JSON or XML data to the browser. In the next step, JavaScript processes the returned data and updates the web page accordingly.

The below-given image also illustrates the working of AJAX:

AJAX Practical Examples

Consider the autocomplete feature of the Google website. It assists you in completing the keywords as you type. The Google web pages remain the same when the keywords change in real-time. When the internet was not this much advance in the early 90s, the Google web page got reloaded whenever it showed a new recommendation of the browser screen.

In 2004, Google started to embed the AJAX model behind the scenes of Google Map and Google Mail. It permits data exchange and enables the presentation layer to work without interfering.

AJAX is now commonly utilized in several web-based applications for simplifying communication with the server. We have also compiled a list of some other practical AJAX examples:

  • Chat rooms: Nowadays, built-in chat rooms are among the most features of a website. Websites offer chat rooms on their homepage, using which you can communicate with their customer service representative. You can explore the web page while sending and receiving messages from chat rooms. AJAX does not reload the whole page during these simultaneous activities.
  • Rating and Voting systems: Have you ever participated in some online voting form, or have you given a product rating after buying it online? AJAX is utilized in both mentioned systems. After giving the rating or voting, the website will update the calculation section, while the rest remains unaltered.
  • Trending notification of Twitter: Twitter’s trendy notification is a great feature to keep up with what is going on in the world. AJAX was recently employed on Twitter for the updates, and it updates the application whenever new tweets are sent regarding trendy topics without impacting the main website.

In short, AJAX models facilitate multitasking. Suppose you notice an application executing two activities simultaneously, without putting one in idle and the other in an active state. In these scenarios, AJAX is working in the background.

Comparison of AJAX and Conventional Model

AJAX Model Conventional Model
When an event occurs, the browser defines a JavaScript call, activating XMLHttpRequest. The browser passes an HTTP request to the server in the conventional model.
The created object then sends an HTTP request to the server in the background. The data is received and then retrieved by the server.
The request is received, required data is retrieved, and sent back to the web browser. The web browser accepts the server response.
The fetched data is sent back to the browser and displayed directly on the page. In the AJAX model, no page reload operation is performed meanwhile. The browser reloads the page for updating it. During this operation, users have to wait until the page gets reloaded. This action is time-consuming and puts extra loads on the server.

Conclusion

AJAX permits web pages to be updated asynchronously while exchanging the data in the background. This states that web page elements can be updated without page reloading. This write-up discussed the components of AJAX and how AJAX works. We have talked about the working of AJAX in some top web-based applications. Moreover, a comparison between the Conventional and AJAX models is also provided.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.