Traditional Web Applications tend to follow the pattern that is described in the figure below, the first page is loaded when the user performs some actions such as filling a form or clicking a link. The user activity is then submitted to a server side program for processing while the user waits until finally a result is sent back to the user, which reloads the entire web page.
The problem with this model is that it is slow as it retransmits the entire data of the web page over and over in order to display the webpage with the results. Ajax web applications use a different model where user actions trigger behind the scenes communication to the server fetching just the data needed to update the page in response to the submitted actions. This process happens asynchronously, allowing the user to perform other actions within the browser while data is returned. The only relevant portions of the web page are refreshed.
The video below describes the Introductions to Ajax in detail.
In this tutorial, we will see how Ajax works. First of all, we will see how the non-Ajax web application works.
This is a typical scenario in which we have a client and a web server
The client sends a request to the webserver and the webserver replies with a response, the full page is loaded.
The client again makes a request to the webserver and waits for the response, the webserver sends back the response and again the full web page is refreshed.
Then again a client might send a request to the webserver once the request is sent, the client will be waiting for the webserver to reply once the response is received the full page is again refreshed.
This leads to certain disadvantages:
First and foremost is the amount of data that is transmitted through multiple responses.
The whole web page is refreshed, again and again, this is also a time-consuming process
We will take the same scenario of a client and a web server communication. The client sends a request to the web server, web server replies back with a response, for the first response the full web page is loaded.
The client again sends a request back to the server, the server responds back and the only partial web page is refreshed.
The client may again send a web request and once the server responds back, again only a partial web page is refreshed.
This saves the amount of data that is transmitted between client and server as well as saves time.