jQuery AJAX Global Event Handlers Explained

jQuery AJAX global event handlers are centralized listener methods that trigger automatically whenever an asynchronous HTTP request on a webpage begins, progresses, succeeds, or fails. Rather than defining callbacks individually inside every $.ajax(), $.get(), or $.post() call, developers can use global event handlers to monitor and respond to AJAX activity across the entire application from a single location. This article covers what these global handlers are, the main methods available, how to implement them, and how to opt out of them for specific requests.

What Are Global AJAX Event Handlers?

Global AJAX handlers are bound to the document object and fire whenever an AJAX request is triggered anywhere on the page. They operate at the document level, tracking the lifecycle of network requests in aggregate or individually.

Because they listen globally, they are primarily used to implement cross-cutting concerns, such as:

• Displaying and hiding global loading spinners.
• Logging all network errors centrally.
• Displaying user-friendly alert banners when a request fails.
• Managing session timeouts or monitoring network traffic.

The Global AJAX Lifecycle Methods

jQuery provides six core global event handlers, executed in a specific order during the request lifecycle:

1. ajaxStart()

Fires when an AJAX request starts and no other AJAX requests are currently active. This is ideal for showing a global loading indicator or disabling form submit buttons.

$(document).ajaxStart(function() {
    $('#loading-spinner').show();
});

2. ajaxSend()

Fires before each individual AJAX request is sent. It receives the event object, the jqXHR object, and the settings object used for the call. This is commonly used to inspect headers or dynamically attach metadata to outgoing calls.

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

3. ajaxSuccess()

Fires whenever any individual AJAX request completes successfully (HTTP status 200–299). It provides access to the returned data, the jqXHR object, and the request configuration.

$(document).ajaxSuccess(function(event, xhr, settings) {
    console.log('Successfully completed request to: ' + settings.url);
});

4. ajaxError()

Fires whenever an individual AJAX request fails (e.g., 404 Not Found, 500 Server Error, or network timeouts). This provides a single location to catch and handle HTTP errors across the entire app.

$(document).ajaxError(function(event, jqXHR, settings, thrownError) {
    alert('Request failed for ' + settings.url + ': ' + thrownError);
});

5. ajaxComplete()

Fires whenever an individual AJAX request finishes, regardless of whether it succeeded or failed. It fires immediately after ajaxSuccess or ajaxError.

$(document).ajaxComplete(function(event, jqXHR, settings) {
    console.log('Finished processing request to: ' + settings.url);
});

6. ajaxStop()

Fires when all active AJAX requests have completely finished. If multiple requests are running concurrently, ajaxStop waits until the last one concludes. This is typically used to hide the loading indicator shown by ajaxStart.

$(document).ajaxStop(function() {
    $('#loading-spinner').hide();
});

Disabling Global Handlers for Specific Requests

There are cases where you may not want a background request (such as auto-saving, analytics logging, or polling) to trigger global behavior like spinners or global error modals.

You can bypass all global event handlers by setting the global property to false inside the $.ajax() settings:

$.ajax({
    url: '/api/poll-status',
    method: 'GET',
    global: false, // Prevents ajaxStart, ajaxStop, and other global handlers from firing
    success: function(response) {
        // Handle response locally
    }
});

Summary of Execution Flow

1. ajaxStart: Fired first if no other requests are currently running.
2. ajaxSend: Fired just before the request is dispatched.
3. ajaxSuccess OR ajaxError: Fired depending on the HTTP response status.
4. ajaxComplete: Fired when the individual request is finished.
5. ajaxStop: Fired when there are no more active requests left in the queue.