jQuery AJAX Global Events

jQuery provides a set of global AJAX events that fire automatically for every AJAX request on the page. Instead of adding loading indicators or error messages to each individual request, you attach these global handlers once and they work everywhere.

What Are Global AJAX Events?

Every time an AJAX request starts, progresses, succeeds, fails, or completes, jQuery fires corresponding global events on the document. You listen for these events using $(document).on() or dedicated jQuery methods.

Global AJAX Event Methods

Diagram: Global Event Lifecycle

  No AJAX running → First request starts
       │
  ajaxStart fires   ← "show loading bar"
       │
  Request 1 sent → ajaxSend fires
  Request 2 sent → ajaxSend fires
       │
  Request 1 done → ajaxSuccess / ajaxError fires
                 → ajaxComplete fires
  Request 2 done → ajaxSuccess / ajaxError fires
                 → ajaxComplete fires
       │
  All requests done → ajaxStop fires  ← "hide loading bar"

ajaxStart() and ajaxStop() — Global Loading Indicator

This is the most common use of global events. Show a loading spinner when any request begins and hide it when all requests finish.

$(document).ready(function() {
    // Show spinner when any AJAX request starts
    $(document).ajaxStart(function() {
        $("#globalLoader").show();
    });

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

Add this code once. Every AJAX call on your site automatically shows and hides the spinner without any extra code per request.

HTML for a Global Loader

<div id="globalLoader" style="display:none;">
    <p>Loading... Please wait</p>
</div>

ajaxSend() — Run Code Before Each Request

$(document).ajaxSend(function(event, xhr, settings) {
    console.log("Sending request to: " + settings.url);

    // Add an auth token to every request
    xhr.setRequestHeader("X-Auth-Token", getUserToken());
});

This lets you add authentication headers to every AJAX request without modifying each one individually.

ajaxSuccess() — Run Code After Every Success

$(document).ajaxSuccess(function(event, xhr, settings) {
    console.log("Request to " + settings.url + " succeeded.");

    // Log successful requests to analytics
    trackEvent("ajax_success", settings.url);
});

ajaxError() — Global Error Handler

$(document).ajaxError(function(event, xhr, settings, error) {
    if (xhr.status === 401) {
        // User session expired
        alert("Your session has expired. Please log in again.");
        window.location.href = "login.html";
    } else if (xhr.status === 503) {
        $("#maintenanceBanner").show();
    } else {
        console.error("AJAX error on " + settings.url + ": " + error);
    }
});

ajaxComplete() — Runs After Every Request

$(document).ajaxComplete(function(event, xhr, settings) {
    // Log every completed request (success or error)
    console.log("Completed: " + settings.url + " — Status: " + xhr.status);
});

Diagram: ajaxStart vs ajaxSend vs ajaxComplete vs ajaxStop

  Time →

  [ajaxStart]     fires ONCE when first request begins
  [ajaxSend]      fires for EACH request as it is sent
  [ajaxSend]      fires again for the second request
  [ajaxComplete]  fires for EACH request as it finishes
  [ajaxComplete]  fires again when the second finishes
  [ajaxStop]      fires ONCE when the last request finishes

Disabling Global Events for One Request

Sometimes you do not want a specific request to trigger global events. Set global: false in $.ajax() options.

$.ajax({
    url: "silent-ping.php",
    type: "GET",
    global: false     // this request will NOT trigger ajaxStart/ajaxStop
});

Practical: Progress Bar During Multiple Loads

var requestCount = 0;

$(document).ajaxStart(function() {
    requestCount = 0;
    $("#progressBar").css("width", "0%").show();
});

$(document).ajaxSend(function() {
    requestCount++;
});

$(document).ajaxComplete(function() {
    requestCount--;
    if (requestCount <= 0) {
        $("#progressBar").css("width", "100%");
        setTimeout(function() {
            $("#progressBar").hide();
        }, 300);
    }
});

Quick Summary

• Global AJAX events fire automatically for every request — set them up once.
• ajaxStart() and ajaxStop() are ideal for showing/hiding a global loading indicator.
• ajaxSend() runs before each request — use it to add headers or log activity.
• ajaxError() catches all failed requests in one place.
• ajaxComplete() runs after every request regardless of success or failure.
• Use global: false in $.ajax() to exclude a specific request from global events.