jQuery Ajax Events

What You’ll Learn

Global Ajax events let you observe every jQuery request from one place on document. Bind ajaxComplete for finish notifications, ajaxStart and ajaxStop for loading indicators, and use global: false when a call should stay private.

Introduction

When your app loads data with $.ajax(), $.get(), or $.post(), jQuery can broadcast lifecycle events to every listener on the page. Global handlers are ideal for spinners, request logging, and shared error toasts — without copying the same callback onto dozens of individual calls.

What Are jQuery Global Ajax Events?

Global Ajax events are named strings passed to $(document).on() — "ajaxStart", "ajaxSend", "ajaxSuccess", "ajaxError", "ajaxComplete", and "ajaxStop". Each handler receives the native event plus jQuery-specific arguments such as the jqXHR object and request settings. They fire only for requests where global is not set to false.

📝 Syntax

Minimal global handler workflow:

$(document).on("ajaxStart", function() {
  $("#spinner").show();
});
$(document).on("ajaxComplete", function(event, xhr, settings) {
  console.log("Finished:", settings.url);
});
$(document).on("ajaxStop", function() {
  $("#spinner").hide();
});
$.ajax({ url: "/api/ping", global: false });