Ajax Working

In the previous chapter we have learnt basic concept of AJAX, in this chapter we will be learning the working of the AJAX.

In this tutorial we will be learning the working of the ajax application.

Working of ajax application

Consider the JS –

  1. Suppose we want to get some fields from the database tables of server then we need to send request to a server
  2. Server request would be made using the HTML form and GET or POST methods.
  3. In this case user need to click on the “Submit” button to send the form details to the server. As server will send the updated page as response to the browser, browser have to load complete page.
  4. It is the main reason behind performance issue of the application. As time gets wasted for requesting,processing and binding the response.
  5. Using AJAX, JS communicates directly with the server, through the JavaScript XMLHttpRequest object.
  6. Using an HTTP request, a web page makes a request to, and get a response from a web server, without reloading the page.
  7. The user will stay on the same page and webpage gets updated just by modifying the part of the webpage.

Pictorial representation

ajax working

Description and Explanation

The working of the AJAX can be divided in the 4 steps that are explained below table –

Steps Explanation
Step 1 User need to create the XMLhttpRequest object to request the server.
Step 2 open() and send() methods are used to send the request to the server.
Step 3 We need to write the sever side script which will process the request.
Step 4 After processing the request, server will send response back to the browser. Browser will have to consume the response and bind it to the HTML element.

Further reading

More information : StackOverflow | Noupe Ajax

We will see, Programmatic implementation of the AJAX in the upcoming chapters.