javascript,tips,tutorials

Asynchronous and Synchronous AJAX calls

23 Aug , 2010  

AJAX as you might be knowing stands for Asynchronous JavaScript and XML, but in this article we are going to see what is the difference between Asynchronous and Synchronous AJAX call ? Let’s see how an AJAX call is made from client and what it involves.

  1. An object of the browser’s XML HTTP Request is created and a request is sent to a particular URL with some data either via POST or GET method.
  2. The request is processed and the response is returned by the server.
  3. Using JavaScript this response is then show on the browser or is used as per the requirement.

Both Asynchronous or Synchronous AJAX requests involve the same process of making the request and getting the response from the server. The only difference is that in an Asynchronous request the process is handled independently and is not dependent on following processes. So that the script do not wait for the server request to complete before executing the remaining lines of code. As soon as the server response is completed it is sent back to the client, but during the complete round-trip the client is not halted.

However in case of Synchronous AJAX request, the request is sent to the server and the client waits for the server’s response before it executes the script further. So this is the special case when the further script is dependent on the results returned by the server.

How do we make these requests?

It is very simple to set what type of AJAX request you want to make. All you need to do is pass true or false while sending the request. Look the code snippet below to see how it is done.

function pullAJAX()
{
  var obj; 
 
  obj = new XMLHttpRequest();
 
  obj.onreadystatechange = function()
  {
    if(obj.readyState == 4)
    {
      //process the response
    }
  }
  //true - makes the Asynchronous AJAX request, false makes it Synchronous
  obj.open("POST", "myscript.php", true);
  obj.send(null);
}

In the above lines of code the open function accepts three parameters, they are :

First param, is the request method which can be POST or GET

Second param, is the script name on the server.

Third param, is responsible for changing AJAX request to Asynchronous or Synchronous. If we pass it true then the AJAX request is made asynchronous, however if passed false it is a synchronous request.

Hope this clarifies the difference between the two. Now it depends upon the scenario as to what AJAX request is needed.

Stay Digified !!
Sachin Khosla

, , ,


4 Responses to “Asynchronous and Synchronous AJAX calls”

  1. Roshan Bhattarai says:

    Be careful with using ajax synchrous call .. If request is not complete or there is error in request then page gets hung or crashed sometime…and if you’re using 2-3 ajax request in your page then synchronous is not the way to go with for sure…

  2. Thanks for adding that up. Also we should always use timed ajax request if its a Synchronous call.

  3. Nitin Kumar Jain says:

    Nice article … Ajax is something that can never be outdated …

More in javascript, tips, tutorials (107 of 215 articles)


In this post we will learn how to change or add JavaScript function on the onclick event for the anchor ...