Difference between synchronous and asynchronous requests in jQuery Ajax
Last Updated :
26 Apr, 2025
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: "/https/www.geeksforgeeks.org/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:
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Synchronous and Asynchronous Requests</h3>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div id="box"></div>
<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: "/https/www.geeksforgeeks.org/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 id="box">
Ajax Request Data ( Asynchronous Call )
will Display here:</div> <br><br>
<div id="box2">
The data form javascript method
will display here.</div> <br><br>
<button onclick="call_function()">
Click here</button>
<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 …
}
});
|
Similar Reads
Difference Between Synchronous and Asynchronous Action Creators
In web development, Redux has become very popular for managing application state. Action creators play an important role in Redux, which helps the dispatching of actions to update the state. In this article, we will understand the difference between synchronous and asynchronous action creators. What
4 min read
How ajax works? Difference between angular js and jquery
Ajax: Ajax communicates with the server by using XMLHttpRequest Object. User send request from User Interface and JavaScript call goes to the XMLHttpRequest Object after that XMLHttp request is sent to the XMLHttpRequest Object. At that time server interacts with the database using php, servlet, ASP
2 min read
Difference between Node.js AJAX and jQuery
In web development, Node.js, AJAX, and jQuery play pivotal roles in creating dynamic and interactive web applications. Each technology serves a distinct purpose and is often used together to build modern web solutions. Node.js is a server-side runtime environment for JavaScript, AJAX is a technique
4 min read
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests ?
In this article, we are going to see how we can use jQuery's ajax() function to call backend function asynchronously or in other words HTTP Requests. AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands fo
4 min read
Difference between Asynchronous and Non-blocking
Asynchronous and non-blocking are related but distinct concepts in programming, particularly in the context of I/O operations. Asynchronous: Asynchronous refers to the ability of a program or system to perform multiple tasks simultaneously without waiting for each task to be complete before starting
2 min read
What is an asynchronous request in AJAX ?
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 asynchrono
3 min read
Difference Between Microtask Queue and Callback Queue in asynchronous JavaScript
To know the difference between Microtask Queue and Callback Queue, we need to have a clear idea of how asynchronous JavaScript gets executed and what are the roles that Microtask Queue and Callback Queue play. Functions or operations running parallel with the other functions or operations are called
3 min read
Difference between on() and live() or bind() in jQuery
jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector
3 min read
Difference Between live() and bind() Methods in jQuery
Before looking at the differences between jQuery live() and bind() methods, let us briefly understand both methods. live(): This method is used to attach one or more event handlers to the selected element. We specify a function for each event so that when that event occurs, the associated function w
4 min read
Difference Between AJAX And Fetch API
AJAX (Asynchronous JavaScript and XML) and Fetch API are both powerful tools used in modern web development for making asynchronous HTTP requests. Each has its strengths and specific use cases that developers should consider when deciding which to use. In this article, we will see the main differenc
5 min read