jQuery .ajaxStart() Method

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .ajaxStart()?

.ajaxStart(handler) is jQuery’s legacy shorthand (since 1.0) for binding a global Ajax “first request began” handler on document. It fires only when no other global requests are already active. Internally it is sugar for .on("ajaxStart", handler).

Remember
// Deprecated (since 3.5)
$(document).ajaxStart(function () {
  // runs when the first global Ajax request begins
});

// Modern replacement
$(document).on("ajaxStart", handler);

// Bind only — no no-arg .ajaxStart() trigger form
// Opt out: $.ajax({ url: "/x", global: false })
NeedUse
New code$(document).on("ajaxStart", fn)
Legacy bind$(document).ajaxStart(fn) ⚠
Remove handler$(document).off("ajaxStart", fn)
Hide when idleajaxStop
Before every requestajaxSend
Approach

How to Use .ajaxStart()

Recognize the legacy call, keep the handler tiny, and migrate to .on() / .off().

  1. Attach the handler to document with .ajaxStart(handler) (legacy) or .on("ajaxStart", handler) (preferred).
  2. Make requests with $.ajax(), $.get(), $.post(), or .load().
  3. Show a spinner or status text inside the handler (no jqXHR args).
  4. Remove with .off("ajaxStart", handler) — not .unbind().
  5. Pair with ajaxStop to hide loading UI when the last request finishes.
PieceRequired?Role
documentYes (1.9+)Only valid bind target for global Ajax events
handlerYesfunction() — no request args
ajaxStopRecommendedHide loading when no global requests remain
global: falseOptionalSkip all global Ajax events for that call

Pseudocode

Pseudocode
call $(document).ajaxStart(handler)
    → internally: $(document).on("ajaxStart", handler)

when a jQuery Ajax request is about to send:
    if request.global === false:
        do not fire ajaxStart
        return

    if no other global Ajax requests are active:
        fire ajaxStart
            for each registered handler:
                call handler()

to migrate:
    replace .ajaxStart(fn) with .on("ajaxStart", fn)
    remove with .off("ajaxStart", fn)
Reference

Cheat Sheet

Quick map from legacy shorthand to modern APIs.

TopicDetail
Legacy bind$(document).ajaxStart(handler) ⚠ deprecated 3.5
Modern bind$(document).on("ajaxStart", handler)
Unbind$(document).off("ajaxStart" [, handler])
Signaturefunction() — no jqXHR / settings
WhenFirst global request begins (idle → busy)
SinceMethod 1.0 · document-only 1.9+ · deprecated 3.5
Trigger formNone — bind only (unlike .click())
Opt outglobal: false in $.ajax() / $.ajaxSetup()
Try it

Live Preview

Run a real $.get() and watch the legacy .ajaxStart() handler update the log.

Demo uses deprecated .ajaxStart() plus a public JSON API. Needs network access.

Result
Ready — pick an action and click Run.
Code

jQuery Examples

Short, copy-ready snippets using the legacy shorthand. Prefer .on("ajaxStart") for new projects.

Example 1 — Basic $(document).ajaxStart(fn)

Canonical legacy pattern: log when the first Ajax request begins after a click.

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

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

How It Works

  1. Bind. .ajaxStart(fn) on document registers a global handler.
  2. Delegate. jQuery routes it to .on("ajaxStart", fn) internally.
  3. Click. $.get() starts a qualifying Ajax request.
  4. Start. Because nothing else is active, the log updates immediately.

Example 2 — Show a Loading Message

Common legacy pattern: write a loading status when global Ajax activity begins.

jQuery
$(document).ajaxStart(function () {
  $("#loading").text("Loading…");
});

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

How It Works

  1. Handler. On start, write a loading message into #loading.
  2. Trigger. Any qualifying Ajax call can light up the UI.
  3. No args. You do not need jqXHR — this is page-wide UI only.
  4. Next step. Bind ajaxStop to clear the same element when idle.

Example 3 — Parallel Requests Fire Once

Three overlapping calls still produce a single ajaxStart.

jQuery
var startCount = 0;

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

$("#go").on("click", function () {
  $.get("https://jsonplaceholder.typicode.com/posts/1");
  $.get("https://jsonplaceholder.typicode.com/posts/2");
  $.get("https://jsonplaceholder.typicode.com/posts/3");
});
Try It Yourself

How It Works

  1. Idle → busy. The first request finds no active globals and fires start.
  2. Already busy. The next two see activity in progress — no extra start.
  3. Count. Your counter increments once per batch, not per call.
  4. Use. Perfect for a single page-wide spinner.

Example 4 — Migrate to .on("ajaxStart")

Same behavior — clearer modern API recommended for new code.

jQuery
// Legacy (deprecated)
// $(document).ajaxStart(onStart);

// Modern
$(document).on("ajaxStart", onStart);

function onStart() {
  $("#log").text("Migrated: .on(\"ajaxStart\") fired.");
}

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

How It Works

  1. Rename. Swap .ajaxStart(fn) for .on("ajaxStart", fn).
  2. Same event. Both bind the identical global Ajax event.
  3. Named fn. Keep a named function so .off() can remove it later.
  4. Prefer. Use this form in all new projects.

Example 5 — Remove with .off()

Cleanup belongs on the modern event API — not the deprecated shorthand.

jQuery
function onStart() {
  $("#log").append(" start");
}

$(document).on("ajaxStart", onStart);

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

$("#detach").on("click", function () {
  $(document).off("ajaxStart", onStart);
  $("#log").text("Handler removed with .off().");
});
Try It Yourself

How It Works

  1. Named handler. Store the function so you can remove the exact listener.
  2. Bind. Prefer .on("ajaxStart", onStart) even when reading legacy code.
  3. Detach. .off("ajaxStart", onStart) stops future updates.
  4. Avoid. Do not rely on deprecated .unbind("ajaxStart").

Edge Cases & Pitfalls

Watch for these when reading or migrating legacy .ajaxStart() code.

deprecated

Do not add new .ajaxStart() calls

jQuery 3.5+ marks the shorthand deprecated. New code should use .on("ajaxStart").

target

Bind on document only (1.9+)

Handlers on window or other elements will not receive global Ajax events.

once

Not per request

ajaxStart fires once per busy batch. Use ajaxSend when you need every request.

cleanup

Remove with .off()

Prefer $(document).off("ajaxStart", fn) over deprecated .unbind().

Compatibility

Browser Support

.ajaxStart() has been part of jQuery since 1.0. Prefer $(document).on("ajaxStart", …) (1.7+). Deprecated since 3.5; since 1.9, handlers must attach to document.

✓ Deprecated · jQuery 1.0+

jQuery .ajaxStart()

Still present in jQuery 3.x for compatibility, but marked deprecated since 3.5. Prefer .on("ajaxStart") for new work.

100% jQuery Ajax API
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.ajaxStart() Legacy

Bottom line: Safe to recognize in legacy apps. Migrate to .on("ajaxStart") / .off("ajaxStart") when you edit those files.

Analysis

Performance Notes

ApproachCostBest for
.on("ajaxStart") + ajaxStopCheapModern page-wide loading UI
Legacy .ajaxStart()CheapReading / migrating old code only
Heavy DOM work on every startExpensiveAvoid — keep the handler tiny

The shorthand and .on() cost the same at runtime. Prefer .on() for clarity and consistent cleanup with .off().

Remember

Key Takeaways

  • Role: legacy shorthand for the global first-request-began event.
  • Migrate: $(document).on("ajaxStart", fn) — deprecated since 3.5.
  • Cleanup: use .off("ajaxStart", fn), not .unbind().
  • Pair: hide loading UI with ajaxStop when the batch ends.

One line: .ajaxStart() is deprecated sugar for .on("ajaxStart") — recognize it in legacy code, write the modern form.

Frequently Asked Questions

The .ajaxStart(handler) method binds a global function that runs when the first qualifying jQuery Ajax request is about to begin — and only when no other global requests are already in progress. Attach it to document: $(document).ajaxStart(fn). It is bind-only (no trigger form). Deprecated since jQuery 3.5; use $(document).on("ajaxStart", handler) instead.
Yes. $(document).ajaxStart(handler) has been deprecated since jQuery 3.5 (available since 1.0). Prefer $(document).on("ajaxStart", handler) for new code. Legacy bindings still work in jQuery 3.x; migrate when you touch those files. Remove handlers with $(document).off("ajaxStart", handler).
ajaxStart is a global Ajax event, not a DOM event on a specific element. Since jQuery 1.9, all global Ajax handlers — including .ajaxStart(handler) — must bind to document. Correct legacy form: $(document).ajaxStart(fn). Modern form: $(document).on("ajaxStart", fn).
None. The official API lists handler as Function() with no parameters — function() { … }. Unlike ajaxSend, you do not receive event, jqXHR, or settings. Use ajaxSend when you need per-request details.
Replace $(document).ajaxStart(fn) with $(document).on("ajaxStart", fn). Use $(document).off("ajaxStart", fn) for cleanup instead of .unbind(). Under the hood, .ajaxStart(handler) already delegates to .on("ajaxStart") — migration is a straight rename for simple bindings.
Yes. jQuery 3.x keeps .ajaxStart(handler) for backward compatibility. It still binds correctly on document. Docs mark it deprecated since 3.5 to steer new projects toward .on(). Prefer the modern API covered in the jQuery ajaxStart event tutorial.

Next: ajaxSend Event

Learn the per-request global event that fires before every Ajax send.

ajaxSend tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

jQuery ajaxStart Event jQuery ajaxSend Event