jQuery ajaxComplete Event

What You’ll Learn

The ajaxComplete event fires when any qualifying jQuery Ajax request finishes — success or error. This tutorial covers binding on document with .on("ajaxComplete"), the handler signature (event, jqXHR, ajaxOptions), filtering by ajaxOptions.url, reading xhr.responseText, opting out with global: false, and comparing global events with per-request .always().

Introduction

When your page loads data with $.ajax(), $.get(), $.post(), or .load(), jQuery broadcasts lifecycle events to listeners on document. The ajaxComplete event is your “always runs at the end” hook — it fires after every qualifying request completes, whether the server returned 200 or the call failed.

The official jQuery API distinguishes the ajaxComplete event (bound with .on("ajaxComplete") since 1.7) from the deprecated .ajaxComplete() method used in older code. Unlike ajaxSuccess or ajaxError, which fire only for one outcome, ajaxComplete runs in both cases — and all registered handlers execute for every completed request.

Understanding the ajaxComplete Event

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

The handler runs after ajaxSuccess (if the request succeeded) or ajaxError (if it failed). You can read the response body from the second argument: jqXHR.responseText (or xhr.responseText in the official docs). To react only to certain URLs, inspect ajaxOptions.url inside the handler.

📝 Syntax

The modern jQuery API for the ajaxComplete global event:

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

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

• handler — function invoked when any qualifying Ajax request completes: function( event, jqXHR, ajaxOptions ) { ... }.
• event — the jQuery event object.
• jqXHR — the jqXHR / XMLHttpRequest object; read jqXHR.responseText for the response body.
• ajaxOptions — settings passed to $.ajax() (url, type, data, context, etc.).

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

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

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

3. Filter by URL — inspect ajaxOptions

$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
} );

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

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

5. Deprecated method — .ajaxComplete(handler)

// Deprecated — use .on("ajaxComplete") instead
$( document ).ajaxComplete( function( event, xhr, settings ) {
  console.log( "Request finished:", settings.url );
} );

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

Return value

• .on("ajaxComplete", 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 .always(). Use the Try-it links to run each snippet in the browser.

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

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

User clicks .trigger → .load() runs Ajax request

When request completes → .log shows "Triggered ajaxComplete handler."

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

$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
} );

Request to ajax/test.html completes → .log shows handler message + responseText

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


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

$( document ).on( "ajaxComplete", function( event, request, settings ) {
  $( "#msg" ).append( " Request Complete. " );
} );

Each qualifying Ajax request → #msg gains " Request Complete. "

Three parallel requests → three appended messages


Ideal for a simple activity log or status strip

var globalCount = 0;

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

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

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

Click #global-btn → ajaxComplete fires → log updated

Click #private-btn → request completes but ajaxComplete does NOT fire

Per-request .always() on the private call still runs

var globalComplete = 0;
var perRequestAlways = 0;

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

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

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

globalComplete → +2 (one ajaxComplete per request)

perRequestAlways → +2 (one .always() per call)


Global = one listener, all requests; .always() = scoped to each jqXHR

🚀 Common Use Cases

• Activity logging — append “Request complete” to a debug panel for every Ajax call during development.
• Analytics hooks — send timing or URL data to monitoring when ajaxComplete fires, filtered by settings.url.
• Shared cleanup — reset shared UI state after any request finishes, complementing ajaxStart / ajaxStop spinners.
• Response inspection — read xhr.responseText in a global handler for logging (avoid parsing large bodies on every request in production).
• Third-party isolation — set global: false on widget requests so they do not trigger your global ajaxComplete logic.
• Testing — assert that a test harness saw the expected number of completed requests via a global counter.

📝 Notes

• Bind with $(document).on("ajaxComplete", handler) since jQuery 1.7 — not the deprecated .ajaxComplete(handler) method.
• Since jQuery 1.9, attach global Ajax handlers to document — not window.
• ajaxComplete fires for success and error — after ajaxSuccess or ajaxError.
• Every registered handler runs for every completed qualifying request.
• Requests with global: false do not trigger ajaxComplete.
• Read the response with jqXHR.responseText (official docs use parameter name xhr).
• Differentiate requests with ajaxOptions.url, ajaxOptions.type, or custom settings properties.
• For per-request cleanup, prefer $.ajax(...).always(fn) over a global handler with heavy filtering.

💡 Best Practices