Open In App

Difference between synchronous and asynchronous requests in jQuery Ajax

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll look at the differences between synchronous and asynchronous JQuery Ajax requests.

JQuery provides several built-in methods for requesting data from the server: HTML, TXT, JSON, or String data can be requested.

$.ajax() is a popular JQuery method for making synchronous and asynchronous requests to the server or web pages. 

What are Synchronous Requests and Asynchronous Requests?

Synchronous Request: The synchronous request prevents the DOM or browser from executing additional code until the server responds.

If the request receives a response, only the next section of code will be executed; otherwise, the DOM/browser will wait for the response.
You cannot make another request until you have received the response to the previous request.

In synchronous requests, both the DOM and the browser are blocked until a response is received. 

You can make the synchronous ajax request using the async parameter in the ajax request. async is a boolean variable. Make it false to make a synchronous request.

Syntax:

// JQuery Ajax Synchronous Request Method:
$.ajax({
    url: "/path",
    type: "POST/GET",      // method of sending a request
    async: false,         // synchronous request
    success: function (response) {
        // task ...
    }
});

where,

  • path: It specifies from where you want to get the response.
  • type: It specifies the Method for requested data.
  • async: It specifies a synchronous Ajax Call.

Example 1: Creating two HTML pages – index.html and ajax.html. From Index.html page will request data by making a synchronous ajax request through the ajax.html page:

  • Index.html:

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Synchronous and Asynchronous Requests</h3>
</body>
  
</html>


  • ajax.html:

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
  
    <!-- DIV element will display response -->
    <div id="box"></div>
  
    <!-- Ajax-JQuery CDN Link -->
    <script src=
    </script>
  
    <script>
        // $.ajax() method.
        $.ajax({
  
            // Server page from where we
            // want to access the data.
            url: "index.html",
  
            // Method of requesting data.
            type: "GET",
  
            // Synchronous request.
            async: false,
  
            // Success function
            success: function (response) {
  
                // Get the response and insert into div element 
                // whose id is "#box".
                document.getElementById("box")
                      .innerHTML = response;
            },
  
            // Data type of requested data
            dataType: "HTML",
  
            // Error function will run if any error will occur.
            error: function (status) {
                alert(error);
            }
        });
    </script>
  
</body>
  
</html>


Output:

 

Asynchronous Request: The Asynchronous request will not prevent the DOM or browser from executing additional code until the server responds. The browser or DOM will not wait for the response. It will directly execute the rest of the code.

The browser can execute multiple Asynchronous requests simultaneously. You can make the Asynchronous ajax request using the async: true parameter in the ajax request. 

Syntax: The following is the syntax for an Asynchronous ajax request:

// JQuery Ajax Asynchronous Request Method:
$.ajax({
    url: "/path",
    type: "POST/GET", // method of sending request
    async: true, // Asynchronous request
    success: function (response) {
        // task ...
    }
});

Example 2: Using the same index.html and only updating the ajax.html file to make an Asynchronous ajax request:

  • ajax.html: Update the ajax.html file with the following code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
  
    <!-- DIV element will display response -->
    <div id="box">
          Ajax Request Data ( Asynchronous Call )
          will Display here:</div> <br><br>
  
    <!-- DIV second element to display random data -->
    <div id="box2">
          The data form javascript method 
          will display here.</div> <br><br>
  
    <!-- button -->
    <button onclick="call_function()">
          Click here</button>
  
    <!-- Ajax-JQuery CDN Link -->
    <script src=
      </script>
  
    <script>
  
        call_function = () => {
  
            // $.ajax() method.
            $.ajax({
  
                // Server page from where we
                // want to access the data.
                url: "index.html",
  
                // Method of requesting data.
                type: "GET",
  
                // Asynchronous request.
                async: true,
  
                // Success function
                success: function (response) {
                    // Get the response and insert into div element 
                    // whose id is "#box".
                    document.getElementById("box")
                          .innerHTML = response;
                },
  
                // data type of requested data
                dataType: "HTML",
  
                // Error function will run if any error will occur.
                error: function (status) {
                    alert(error);
                }
            });
  
            // Get the response of div whose ID is "box" 
            // and insert into div element 
            // whose id is "#box2".         
            document.getElementById("box2").innerHTML = document
                      .getElementById("box").innerHTML;
        }
    </script>
</body>
  
</html>


Output:

 

In the above Asynchronous request, we are requesting data from the index.html file but at the same time, we are changing the inner HTML of the second div element.

The first div will display the response from the asynchronous ajax request and we are trying to replace the content of the second div with this response using the following code just after the ajax request:

document.getElementById("box2").innerHTML = document.getElementById("box").innerHTML;

Is the content for both DIV elements the same or different? 

The content for both the DIV element will be different because as we discussed we are using an asynchronous request so the browser will not wait for the response it will directly run the next line of the code and the content of the first div will be “Ajax Request Data ( Asynchronous Call )will Display here:”. The request will be completed after executing the next line and whatever content the div-1 element was having before the completion of the request will assign to div-2.

The following table shows the major differences between Synchronous and Asynchronous Requests:

Sr No.

Synchronous Request

Asynchronous Request

1 Prevents the DOM or browser from executing the rest of the code the until the server responds. DOM or browser will execute several requests simultaneously.
2 async: false async: true
3

Syntax – 

// JQuery Ajax Synchronous Request Method:
$.ajax({
         url: “/path”,      
         type: “POST/GET”,      // method of sending a request
         async: false,         // synchronous request
         success: function(response) {
             // task …
         }
});

Syntax – 

// JQuery Ajax Asynchronous Request Method:
$.ajax({
         url: “/path”,      
         type: “POST/GET”,      // method of sending a request
         async: true,           // Asynchronous request
         success: function(response) {
             // task …
         }
});



Last Updated : 23 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads