How to Use jQuery ajaxStart()

The jQuery .ajaxStart() method is a global event handler that triggers whenever an AJAX request begins, provided no other AJAX requests are currently active. This article explains how the .ajaxStart() event works, its correct syntax in modern jQuery, and how to implement it to manage global UI states, such as displaying a loading spinner during asynchronous network requests.

Understanding .ajaxStart()

When handling multiple asynchronous requests, tracking when the application is busy can be tedious. Instead of attaching show/hide logic to every individual request, jQuery provides global AJAX handlers. The .ajaxStart() event fires specifically when the first AJAX request is dispatched. If subsequent requests are sent while the first is still active, .ajaxStart() will not fire again until all ongoing requests finish and a new one starts.

Syntax and Implementation

As of jQuery 1.8, global AJAX events should only be attached to the document object. Attaching them to individual DOM elements is deprecated and will not function in newer versions.

Here is the basic syntax:

$(document).ajaxStart(function() {
    // Code to execute when the first AJAX request starts
});

Practical Example: Displaying a Loading Indicator

A standard use case for .ajaxStart() is toggling a loading spinner alongside its counterpart, .ajaxStop(), which fires when all active requests have completed.

1. HTML Markup

<div id="loading-spinner" style="display: none;">
    Loading, please wait...
</div>

<button id="fetch-data">Fetch Data</button>
<div id="content"></div>

2. jQuery Script

$(document).ready(function() {
    // Show spinner when an AJAX call begins
    $(document).ajaxStart(function() {
        $("#loading-spinner").show();
    });

    // Hide spinner when all AJAX calls complete
    $(document).ajaxStop(function() {
        $("#loading-spinner").hide();
    });

    // Example AJAX trigger
    $("#fetch-data").click(function() {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts/1",
            method: "GET",
            success: function(data) {
                $("#content").html("<h3>" + data.title + "</h3><p>" + data.body + "</p>");
            }
        });
    });
});

In this implementation, clicking the button triggers $.ajax(). jQuery detects that no network operations are currently running, fires .ajaxStart(), and reveals #loading-spinner. Once the data arrives and the request resolves, .ajaxStop() executes and hides the spinner.

Disabling .ajaxStart() for Specific Requests

If you have a background AJAX task (such as polling or logging) that should not trigger the global loading indicator, disable global events for that specific call using the global property:

$.ajax({
    url: "/api/background-log",
    method: "POST",
    global: false, // Prevents .ajaxStart() and .ajaxStop() from firing
    data: { event: "user_click" }
});

Setting global: false ensures that silent background requests run independently without interfering with the user interface.