jQuery ajaxStart Event

What You’ll Learn

The ajaxStart event fires when the first qualifying jQuery Ajax request is about to begin — and only when no other global requests are already active. This tutorial covers binding on document with .on("ajaxStart"), pairing with ajaxStop for loading indicators, opting out with global: false, and comparing ajaxStart with per-request events like ajaxSend.

Introduction

When your page loads data with $.ajax(), $.get(), or .load(), jQuery broadcasts lifecycle events to listeners on document. The ajaxStart event is your “activity just began” hook — it fires once when the first global Ajax request is about to start, giving you a single place to show a loading spinner or disable navigation.

Before jQuery sends a request, it checks whether any other global Ajax calls are still in progress. If none are active, jQuery triggers ajaxStart. When the last active global request finishes, jQuery triggers ajaxStop. That pairing makes ajaxStart ideal for page-wide loading UI without counting individual requests yourself.

Understanding the ajaxStart Event

ajaxStart is classified as an AjaxEvent — a global event triggered by jQuery’s Ajax transport, not a DOM event on a specific element. Whenever an Ajax request is about to be sent and no other global requests are in progress, jQuery triggers ajaxStart on document. Handlers are simple callbacks with no extra arguments — unlike ajaxSend, you do not receive jqXHR or settings.

The handler runs at the very beginning of global Ajax activity — before ajaxSend on the first request, and before any response arrives. For per-request logging or URL filtering, use ajaxSend instead. For hiding the spinner when all requests finish, bind ajaxStop alongside ajaxStart.

📝 Syntax

The modern jQuery API for the ajaxStart global event:

1. Bind a handler — $(document).on("ajaxStart" [, handler]) (since 1.7)

$( document ).on( "ajaxStart", handler )

• handler — function invoked when the first global Ajax request begins: function() { ... } — no jqXHR or settings arguments.
• Fires only when no other global requests are already in progress.
• Must attach to document since jQuery 1.9.

2. Official demo — document handler + .load() on click

$( document ).on( "ajaxStart", function() {
  $( ".log" ).text( "Triggered ajaxStart handler." );
} );

$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

3. Official demo — show loading message

$( document ).on( "ajaxStart", function() {
  $( "#loading" ).show();
} );

Pair with ajaxStop to hide the indicator when the last request completes.

4. Unbind — $(document).off("ajaxStart" [, handler])

$( document ).off( "ajaxStart" );              // remove all ajaxStart handlers
$( document ).off( "ajaxStart", myHandler );   // remove one handler

5. Deprecated method — .ajaxStart(handler)

// Deprecated — use .on("ajaxStart") instead
$( document ).ajaxStart( function() {
  $( "#loading" ).show();
} );

The old .ajaxStart(handler) binding method still works but is deprecated since jQuery 3.5. Migrate to $(document).on("ajaxStart", handler).

Return value

• .on("ajaxStart", handler) returns the jQuery object (document wrapped) for chaining.
• Handler return values are ignored by jQuery’s global Ajax event system.

Examples Gallery

Examples 1 and 2 follow the official jQuery API documentation. Examples 3–5 extend those patterns with parallel requests, global: false, and an ajaxStart + ajaxStop loading pair. Use the Try-it links to run each snippet in the browser.

$( document ).on( "ajaxStart", function() {
  $( ".log" ).text( "Triggered ajaxStart handler." );
} );

$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

User clicks .trigger → ajaxStart fires → .log shows "Triggered ajaxStart handler."

Then .load() sends the HTTP request and loads HTML into .result

Works for $.ajax(), $.get(), $.post(), and .load()

$( document ).on( "ajaxStart", function() {
  $( "#loading" ).show();
} );

First Ajax request begins → #loading becomes visible

Pair with ajaxStop to hide when all requests finish

Ideal for a page-wide spinner or "Loading..." banner

var startCount = 0;

$( document ).on( "ajaxStart", function() {
  startCount++;
  $( "#start-count" ).text( startCount );
} );

$( "#run-two" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
  $.get( "https://jsonplaceholder.typicode.com/posts/2" );
} );

Click #run-two → two parallel $.get() calls

startCount increments by 1 (not 2)

ajaxSend would fire twice — ajaxStart fires once per batch

var startCount = 0;

$( document ).on( "ajaxStart", function() {
  startCount++;
  $( "#log" ).append( " ajaxStart (" + startCount + ")" );
} );

$( "#global-btn" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
} );

$( "#private-btn" ).on( "click", function() {
  $.ajax( {
    url: "https://jsonplaceholder.typicode.com/posts/2",
    global: false
  } );
} );

Click #global-btn → ajaxStart fires → log updated

Click #private-btn → request runs but ajaxStart does NOT fire

Private requests do not count toward active global batch

$( document ).on( "ajaxStart", function() {
  $( "#loading" ).show();
} );

$( document ).on( "ajaxStop", function() {
  $( "#loading" ).hide();
} );

$( "#run-two" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
  $.get( "https://jsonplaceholder.typicode.com/posts/2" );
} );

Click #run-two → #loading shows (ajaxStart once)

Both requests complete → #loading hides (ajaxStop once)

Spinner stays visible for entire parallel batch

🚀 Common Use Cases

• Loading spinners — show a page-wide indicator when the first Ajax request begins; hide it on ajaxStop.
• Disable navigation — grey out buttons or block form submission while any global Ajax activity is in progress.
• Activity badges — flip a “Loading…” status flag once per batch instead of per request.
• Analytics — record when a page-wide Ajax session started (pair with ajaxStop for duration).
• Third-party isolation — set global: false on widget requests so they do not trigger your ajaxStart UI.
• Testing — assert that a test harness entered the “loading” state exactly once per batch.

📝 Notes

• Bind with $(document).on("ajaxStart", handler) since jQuery 1.7 — not the deprecated .ajaxStart(handler) method.
• Since jQuery 1.9, attach global Ajax handlers to document — not window.
• Fires only when no other global requests are in progress — not for every individual call.
• Handler receives no extra arguments — use ajaxSend for jqXHR and settings.
• Always pair with ajaxStop when showing loading UI — otherwise the indicator never hides.
• Requests with global: false do not trigger ajaxStart and do not count as active global requests.
• Multiple parallel requests share one ajaxStart / ajaxStop pair.
• For per-request logging, prefer ajaxSend over ajaxStart.

💡 Best Practices