How Ajax Works?

At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XMLHttpRequest is what makes this possible. Ajax makes it possible to update a page without a refresh.
By Ajax, we can refresh a particular DOM object without refreshing the full page. Let’s see now what actually happens when a user submits a request:

In the above image we define 6 steps.
(1) User sends a request from the UI and a javascript call.
(2) It goes to XMLHttpRequest object.
(3) HTTP Request is sent to the server by XMLHttpRequest object.
(4) Web Server interacts with the database using JSP, PHP, Servlet, etc and Data is retrieved.
(5) Server sends XML data or JSON data to the XMLHttpRequest callback function.
(6) HTML and CSS data is displayed on the browser.