AJAX Basics

 Introduction

AJAX stands for Asynchronous Javascript and XML. By asynchronous we mean performing the operation at the same time.

Why do we need AJAX?

In traditional systems (before AJAX) a user interacts with the browser to get some information from a website. The user clicks on some button to fetch specific details and sits back until the page loads with the requested information. In the meantime (after button click and complete page load with information) a user has to sit waiting until the page loads completely.

Let's see what is actually happening in the background,

• On the button click, the browser sends a request to the server for the content requested by the user, the server reads the request and generates a response
• After generating the response, the server sends the whole page as a response

The problem with the above scenario is,

• It is time-consuming(receiving a whole page from a server as a response will take a lot of time).
• whole page refresh was not required as the user only wants a specific detail (redundant information sent across from server to client)
• Until the page is loaded completely, the user can't perform any operation on the web page.
• This will get more annoying when the page size is large and the user wants only a small bit of information

To get rid of this and save time the modern browser was introduced which has the capability of caching data. Through caching we can store CSS, images and other resources locally and prevent the server from sending redundant pieces of data. But still, the problem is most of the data is still passing between client and server which consumes a lot of time and again the whole page is getting refreshed.

As a solution, AJAX was introduced in 2006. Using AJAX we can restrict the client to only request specific information from the server, as a result the server will send only the specific information requested by the client.

How does AJAX solve the problem?

Using AJAX a client makes an asynchronous request to the server, means the client senr a request to the server in parallel to the current operations performed by the user into the web page.

You can compare this with the Threads operation performed in the windows application, where the main thread keeps the application/user interface alive and a background thread will perform some operation and once the background operation gets completed the system joins the background thread with the main thread.

Here also using AJAX, an asynchronous call was made which will bring data from the server and update the web page once it completely arrives. In the meantime, the user can perform any task on the web page rather than wait for the whole page to get refreshed