jQuery ajaxSend Event

What You’ll Learn

The ajaxSend event fires just before any qualifying jQuery Ajax request is sent. This tutorial covers binding on document with .on("ajaxSend"), the handler signature (event, jqXHR, ajaxOptions), filtering by ajaxOptions.url, opting out with global: false, and comparing global ajaxSend with per-request beforeSend and post-finish ajaxComplete.

Introduction

When your page loads data with $.ajax(), $.get(), $.post(), or .load(), jQuery broadcasts lifecycle events to listeners on document. The ajaxSend event is your “about to go out” hook — it fires immediately before the HTTP request is sent, giving you a last chance to log, validate, or adjust headers globally.

The official jQuery API distinguishes the ajaxSend event (bound with .on("ajaxSend") since 1.7) from the deprecated .ajaxSend() method used in older code. Unlike ajaxComplete, which runs after the response returns, ajaxSend runs at the start of the pipeline — and all registered handlers execute for every qualifying outgoing request.

Understanding the ajaxSend Event

ajaxSend 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, jQuery triggers ajaxSend on document. Handlers receive three arguments: the native event object, the jqXHR object (the XMLHttpRequest wrapper returned by $.ajax()), and ajaxOptions — the plain settings object used to create that request.

The handler runs before the network call leaves the browser — after ajaxStart (when this is the first active global request) but before ajaxSuccess, ajaxError, or ajaxComplete. To react only to certain URLs, inspect ajaxOptions.url inside the handler. At this stage the response is not available yet; use ajaxComplete if you need jqXHR.responseText.

📝 Syntax

The modern jQuery API for the ajaxSend global event:

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

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

• handler — function invoked before any qualifying Ajax request is sent: function( event, jqXHR, ajaxOptions ) { ... }.
• event — the jQuery event object.
• jqXHR — the jqXHR / XMLHttpRequest object for this request.
• ajaxOptions — settings passed to $.ajax() (url, type, data, context, etc.).

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

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

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

3. Filter by URL — inspect ajaxOptions

$( document ).on( "ajaxSend", function( event, jqxhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSend handler." );
  }
} );

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

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

5. Deprecated method — .ajaxSend(handler)

// Deprecated — use .on("ajaxSend") instead
$( document ).ajaxSend( function( event, jqXHR, settings ) {
  console.log( "About to send:", settings.url );
} );

The old .ajaxSend(handler) binding method still works but is deprecated. Migrate to $(document).on("ajaxSend", handler) for consistency with other events and reliable unbinding via .off().

Return value

• .on("ajaxSend", 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, 3, and 4 follow the official jQuery API documentation. Examples 2 and 5 extend those patterns with URL filtering and a comparison with ajaxComplete. Use the Try-it links to run each snippet in the browser.

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

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

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

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

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

$( document ).on( "ajaxSend", function( event, jqxhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSend handler." );
  }
} );

Request to ajax/test.html about to send → .log shows handler message

Request to other URLs → handler runs but if-block skipped

Use settings.type, settings.context, or custom keys to filter further

$( document ).on( "ajaxSend", function( event, request, settings ) {
  $( "#msg" ).append( " Starting request at " + settings.url + " " );
} );

Each qualifying Ajax request → #msg gains " Starting request at URL "

Three parallel requests → three appended messages before responses return

Ideal for a simple activity log or debug strip

var sendCount = 0;

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

$( "#global-btn" ).on( "click", function() {
  $.get( "/api/public" );
} );

$( "#private-btn" ).on( "click", function() {
  $.ajax( { url: "/api/private", global: false } );
} );

Click #global-btn → ajaxSend fires → log updated before request sends

Click #private-btn → request sends but ajaxSend does NOT fire

Per-request beforeSend on the private call still runs

var sendCount = 0;
var completeCount = 0;

$( document ).on( "ajaxSend", function() {
  sendCount++;
  $( "#send-count" ).text( sendCount );
} );

$( document ).on( "ajaxComplete", function() {
  completeCount++;
  $( "#complete-count" ).text( completeCount );
} );

$( "#run-two" ).on( "click", function() {
  $.ajax( "/api/a" );
  $.ajax( "/api/b" );
} );

Click #run-two → two $.ajax() calls

sendCount → +2 (ajaxSend before each request leaves)

completeCount → +2 (ajaxComplete after each response)

Event order per request: ajaxSend → … → ajaxComplete

🚀 Common Use Cases

• Outbound logging — append “Starting request at URL” to a debug panel before each Ajax call during development.
• Global headers — set CSRF tokens or auth headers in an ajaxSend handler (or prefer $.ajaxSetup / beforeSend for clearer intent).
• Request counting — track in-flight outbound requests alongside ajaxComplete for a full send/finish picture.
• Analytics hooks — record request start time and URL when ajaxSend fires, filtered by settings.url.
• Third-party isolation — set global: false on widget requests so they do not trigger your global ajaxSend logic.
• Testing — assert that a test harness saw the expected number of outgoing requests via a global counter.

📝 Notes

• Bind with $(document).on("ajaxSend", handler) since jQuery 1.7 — not the deprecated .ajaxSend(handler) method.
• Since jQuery 1.9, attach global Ajax handlers to document — not window.
• ajaxSend fires before the request is sent — not after completion like ajaxComplete.
• Every registered handler runs for every qualifying outgoing request.
• Requests with global: false do not trigger ajaxSend.
• The response body is not available in ajaxSend — use ajaxComplete for jqXHR.responseText.
• Differentiate requests with ajaxOptions.url, ajaxOptions.type, or custom settings properties.
• For per-request setup, prefer beforeSend in $.ajax(settings) over a global handler with heavy filtering.

💡 Best Practices