What is an asynchronous request in AJAX ?

Last Updated : 23 Nov, 2022

In this article, we will have a deep look into Asynchronous AJAX requests. Basically, AJAX provides two types of requests namely Synchronous AJAX and Asynchronous AJAX. Asynchronous requests in AJAX don’t wait for a response from the server whereas synchronous waits for the response. When asynchronous requests are running JavaScript continues to execute other tasks once the response is generated. This allows any website to provide uninterrupted service and improves user experience.

Prerequisites: There are no such prerequisites for this article. Basic knowledge of HTML, CSS, JavaScript, and AJAX is sufficient. So, let us see how to use AJAX Async requests.

How does it work?

Whenever an AJAX request is sent, it consists of a body, and header information is sent to the server. The server interprets the request and generates a response and sends it back to the client. While this process takes time as the response is generated and sent over the network. So, if the script makes requests synchronously, it will make the page unresponsive until the response is received. Asynchronous AJAX requests allow JavaScript to send a request but not to wait for a response. JavaScript can continue to execute other tasks making the page responsive while the response is processed. Asynchronous requests can be used by setting the async parameter in the open method.

Syntax:

request.open(method,url,async parameter);

The async parameter has a default value of “true”, so it is by default asynchronous, but we can implicitly type “true”.

Example: In this example, we have implemented both synchronous and asynchronous requests to demonstrate the working of both. Text “OTHER TASK EXECUTED” is displayed to show the execution of other script tasks. For implementing an asynchronous request, we have used the below code where an async parameter is set to a “true” value.

request.open(‘GET’,’https://jsonplaceholder.typicode.com/todos/1′,true);

while in the case of synchronous request async parameter is set to false as shown below.

request.open(‘GET’,’https://jsonplaceholder.typicode.com/todos/1′,false);

We can see that for asynchronous tasks “OTHER TASK EXECUTED” is displayed before the response. So, when the request is sent JavaScript immediately executed the next statement and displayed the other task statement and after the response is received it is displayed. While in the case of synchronous requests, JavaScript waited until the response is received and displayed after it has executed the next statement and displayed other task statements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>AJAX Async Requests</title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            padding: 2px; 
            color: green; 
            font-size: 3rem; 
        } 
  
        h2 { 
            font-size: 2rem; 
        } 
  
        div { 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>AJAX Asynchronous Requests</h2> 
    <div id="response"></div> 
    <button onclick="SendAsyncRequest()">Async Request</button> 
    <button onclick="SendSyncRequest()">Sync Request</button> 
  
    <script> 
        function SendAsyncRequest() { 
            document.getElementById('response').innerText = ""; 
            var request = new XMLHttpRequest(); 
            request.open('GET',  
            'https://jsonplaceholder.typicode.com/todos/1', true); 
            request.onload = () => { 
                document.getElementById('response').innerText 
                    += "Response : \n" + request.responseText; 
            } 
            request.send(); 
            document.getElementById('response').innerText 
                += "\n\n OTHER TASK EXECUTED\n\n"; 
        } 
  
        function SendSyncRequest() { 
            document.getElementById('response').innerText = ""; 
            var request = new XMLHttpRequest(); 
            request.open('GET',  
            'https://jsonplaceholder.typicode.com/todos/1', false); 
            request.onload = () => { 
                document.getElementById('response').innerText 
                    += "Response : \n" + request.responseText; 
            } 
            request.send(); 
            document.getElementById('response').innerText 
                += "\n\n OTHER TASK EXECUTED\n\n"; 
        } 
    </script> 
</body> 
  
</html> 