What Does async Do in jQuery AJAX?

This article explains the function and impact of the async parameter in jQuery's AJAX configuration. It covers how the setting dictates whether requests are processed asynchronously or synchronously, the browser behavior associated with each mode, and why modern web development standards generally discourage changing this setting from its default state.

In jQuery, the $.ajax() method accepts an options object to configure HTTP requests. Within this configuration, the async parameter is a Boolean value that determines whether the request will be executed asynchronously (true) or synchronously (false). By default, async is set to true.

Asynchronous Execution (async: true)

When async is set to true, the browser sends the HTTP request in the background and immediately continues executing the remaining JavaScript code without waiting for the server's response. Once the server responds, jQuery executes the designated callback functions—such as success, error, or the .done() and .fail() promise handlers.

This non-blocking behavior keeps the web page fully responsive. Users can continue to scroll, click buttons, and interact with the interface while data is fetched.

$.ajax({
    url: "https://api.example.com/data",
    async: true, // Default setting
    success: function(response) {
        console.log("Data received:", response);
    }
});
console.log("This runs immediately, before the server response.");

Synchronous Execution (async: false)

Setting async to false forces the browser to halt all script execution until the HTTP request completes and a response is returned.

$.ajax({
    url: "https://api.example.com/data",
    async: false,
    success: function(response) {
        console.log("Data received:", response);
    }
});
console.log("This runs only AFTER the data has been received.");

While this allows code to be written sequentially without callbacks, it introduces significant drawbacks:

  • UI Freezing: The entire browser window or tab can become completely unresponsive while waiting for the network round-trip. User clicks, scrolling, and animations stop working.
  • Negative User Experience: If the server is slow to respond or the user has a poor network connection, the browser may display an "unresponsive script" warning or appear crashed.
  • Specification Deprecation: The underlying web standard—synchronous XMLHttpRequest on the main thread—has been deprecated by the W3C and WHATWG due to its negative impact on performance. Modern browsers log warnings in the developer console when synchronous requests are made.

Instead of setting async: false to force synchronous logic, modern applications should manage asynchronous flow using:

  1. Promises and Callbacks: Handle data inside the .done() method or success callback.
  2. Modern async/await: Use the native JavaScript fetch API paired with async and await keywords, which provides synchronous-looking syntax while retaining non-blocking performance.