jQuery .ajaxStart() Method

What You’ll Learn

The .ajaxStart() method is jQuery’s legacy shorthand for binding global ajaxStart handlers on document. This tutorial covers $(document).ajaxStart(handler), the handler signature function() with no jqXHR or settings arguments, why binding must target document since 1.9, migration to .on("ajaxStart") and cleanup with .off("ajaxStart"), pairing with ajaxStop for loading UI, and why the method is deprecated since jQuery 3.5. Unlike .click(), there is no trigger variant — only binding. The handler fires when the first global Ajax request begins. For the modern ajaxStart event API, see the jQuery ajaxStart event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), global Ajax events had matching shorthand methods — .ajaxStart(), .ajaxSend(), .ajaxComplete(), and others. The .ajaxStart(handler) method let you register a page-wide “first request beginning” callback in one short call: $(document).ajaxStart(function(){ ... }). It has been available since jQuery 1.0 and remains in jQuery 3.x for backward compatibility but is marked deprecated since 3.5.

Understanding .ajaxStart() matters when reading older admin panels, legacy jQuery plugins, and tutorials written before .on("ajaxStart") became standard. Unlike DOM event shorthands such as .click(), .ajaxStart() has only a binding form — there is no no-argument trigger variant. The handler runs when the first qualifying global Ajax request is about to begin — ideal for showing a page-wide loading spinner. Modern jQuery binds the same global event explicitly: $(document).on("ajaxStart", handler). This page documents the shorthand API and shows how to migrate.

Understanding the .ajaxStart() Method

The official jQuery API describes .ajaxStart() as a way to register a handler to be executed when the first Ajax request begins. When you pass a function, jQuery registers it on document and calls it when the first qualifying global Ajax request is about to start and no others are already in progress. That is the same ajaxStart global event that .on("ajaxStart") handles today.

The handler receives no arguments — the API lists handler as Function() with no parameters. Unlike ajaxSend, you do not get jqXHR or settings. Requests with global: false opt out — they do not trigger .ajaxStart() handlers. Pair with .ajaxStop() (or .on("ajaxStop")) to hide loading UI when the last active request finishes.

📝 Syntax

The .ajaxStart() method has one signature from the official jQuery API — binding only. There is no trigger form unlike .click():

1. Bind a handler — .ajaxStart( handler ) (deprecated since 3.5)

$( document ).ajaxStart( handler )

• handler — function invoked when the first global Ajax request begins: function() { ... } — no jqXHR or settings arguments.
• Must attach to document since jQuery 1.9 — not window or other elements.
• Fires only when no other global requests are already in progress.
• Returns the jQuery object (document wrapped) for chaining.
• Modern replacement: $( document ).on( "ajaxStart", handler ).

2. Official jQuery API migration note

// Deprecated binding
$( document ).ajaxStart( function() {
  console.log( "First global Ajax request beginning." );
} );

// Modern binding
$( document ).on( "ajaxStart", function() {
  console.log( "First global Ajax request beginning." );
} );

// Remove handler — use .off(), not .unbind()
$( document ).off( "ajaxStart", myHandler );

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

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

Do not use deprecated .unbind("ajaxStart") in new code. Store a named function reference when you need to remove a specific handler later.

Return value

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

Examples Gallery

Five examples cover basic binding, a legacy loading indicator, parallel requests firing once, migration from .ajaxStart() to .on("ajaxStart"), and removing handlers with .off() paired with .ajaxStop(). Use the Try-it links to run each snippet in the browser. Remember: binding with .ajaxStart(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( document ).ajaxStart( function() {
  $( ".log" ).text( "Handler ran via .ajaxStart(function(){ ... })." );
} );

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

User clicks #fetch → ajaxStart fires when first request begins

.log shows handler message immediately when activity starts

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

Deprecated — prefer .on("ajaxStart", fn) for new code

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

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

Click Fetch → #loading becomes visible immediately

When response arrives → hide with .ajaxStop() in a paired handler

Pair .ajaxStart() with .ajaxStop() for simple global spinners

var startCount = 0;

$( document ).ajaxStart( function() {
  startCount++;
  $( ".log" ).text( "ajaxStart fired — count: " + startCount );
} );

$( "#parallel" ).on( "click", function() {
  $.get( "https://jsonplaceholder.typicode.com/posts/1" );
  $.get( "https://jsonplaceholder.typicode.com/posts/2" );
  $.get( "https://httpbin.org/delay/1" );
} );

Click Parallel → three $.get() calls start together

ajaxStart fires once — startCount increments by 1 only

Second click while idle → count goes to 2 (one ajaxStart per batch)

// Legacy — deprecated since jQuery 3.5
$( document ).ajaxStart( function() {
  $( "#out" ).text( "Legacy: .ajaxStart(function(){ ... })." );
} );

// Modern — use for new code
$( document ).on( "ajaxStart", function() {
  $( "#out" ).text( "Modern: .on('ajaxStart', function(){ ... })." );
} );

Both handlers fire when $.get() starts the batch

Legacy message from .ajaxStart(fn)

Modern message from .on("ajaxStart", fn)

Behavior is identical — only the API name differs

var count = 0;

function onStart() {
  count++;
  $( "#loading" ).show().text( "Loading... (ajaxStart count: " + count + ")" );
}

function onStop() {
  $( "#loading" ).hide();
}

$( document ).ajaxStart( onStart );
$( document ).ajaxStop( onStop );

$( "#remove" ).on( "click", function() {
  $( document ).off( "ajaxStart", onStart );
  $( "#loading" ).text( "Start handler removed — count stays " + count + "." );
} );

Run $.get() → #loading shows, count increments

When all requests finish → .ajaxStop() hides #loading

Click Remove → .off("ajaxStart", onStart)

Next $.get() starts but onStart no longer runs — count unchanged

🚀 Common Use Cases

• Reading legacy code — recognize $(document).ajaxStart(fn) as equivalent to .on("ajaxStart", fn) in older admin panels.
• Global loading spinners — legacy pages show #loading via .ajaxStart() — migrate to .on() when refactoring.
• Pair with ajaxStop — show UI on start, hide when the last request finishes — the classic loading-indicator pattern.
• Parallel request batches — one ajaxStart for three simultaneous $.get() calls — no manual counter needed.
• SPA teardown — remove global handlers with .off("ajaxStart", fn) when unmounting a view.
• Third-party isolation — requests with global: false still opt out of .ajaxStart() handlers.

📝 Notes

• Deprecated since jQuery 3.5 — do not use $(document).ajaxStart(handler) in new code. Use .on("ajaxStart") instead. Available since jQuery 1.0.
• Attach to document since jQuery 1.9 — not window or other elements.
• Binding only — no no-argument trigger form unlike .click() or .mousedown().
• Handler receives no arguments — unlike ajaxSend, there is no jqXHR or settings object.
• Fires when the first global request begins — not before every individual call.
• Remove handlers with $(document).off("ajaxStart", handler) — not .unbind("ajaxStart").
• Requests with global: false do not trigger .ajaxStart() handlers.
• Pair with .ajaxStop() (or .on("ajaxStop")) to hide loading UI when all activity finishes.
• Legacy code using .ajaxStart() still runs in jQuery 3.x — migrate when you refactor those files.
• For event order, parallel requests, and the complete modern workflow, see the jQuery ajaxStart event tutorial.

💡 Best Practices