jQuery AJAX Event Methods

jQuery AJAX Event Methods

When working with AJAX requests, jQuery provides global event handlers that fire at specific points in the request life cycle. These event handlers let you manage loading indicators, handle errors, and process responses without modifying each individual AJAX call.

Why Use AJAX Event Methods?

• Centralize handling of all AJAX request lifecycle events
• Show or hide global loading indicators
• Log errors or performance metrics in one place
• Enable or disable UI elements automatically during AJAX activity

jQuery AJAX Event Methods

jQuery defines six global event methods that you can attach to the document object to catch request events.

1. ajaxStart()
2. ajaxStop()
3. ajaxComplete()
4. ajaxError()
5. ajaxSuccess()
6. ajaxSend()

jQuery ajaxStart() Method

What is ajaxStart() Method?

The ajaxStart() method registers an event handler that fires when the first jQuery AJAX request is sent and no other requests are active.

• Triggers only when a new request begins and none are pending
• Ideal for showing a global loading spinner
• Called on the document object, not on individual AJAX calls
• Syntax $(document).ajaxStart(callback)

ajaxStart() Usage Example

This example shows a loading spinner when any AJAX request begins using this event handler.

$(function(){
	// Global ajaxStart handler
	$(document).ajaxStart(function () {
		$('#loader').show();
	});
});

jQuery ajaxStop() Method

What is ajaxStop() Method?

The ajaxStop() method registers an event handler that fires when all jQuery AJAX requests have finished.

• Triggers once when no active AJAX requests remain
• Perfect to hide global loading UI
• Called on the document object
• Syntax $(document).ajaxStop(callback)

ajaxStop() Usage Example

Hide the loading spinner when all requests finish using this event handler.

$(function(){
	// Global ajaxStop handler to hide loader
	$(document).ajaxStop(function () {
		$('#loader').hide();
	});
})

jQuery ajaxComplete() Method

What is ajaxComplete() Method?

The ajaxComplete() method registers an event handler that fires after every AJAX request completes regardless of success or failure.

• Receives parameters event, XMLHttpRequest, and settings
• Useful for cleaning up per request UI elements
• Syntax $(document).ajaxComplete(callback)

ajaxComplete() Usage Example

Run code after every AJAX request completes, regardless of success or failure.

$(function(){
	// Global ajaxComplete handler
	$(document).ajaxComplete(function () {
		$('#loader').hide();
		console.log('AJAX request completed.');
	});
})

jQuery ajaxError() Method

What is ajaxError() Method?

The ajaxError() method registers an event handler that fires when a jQuery AJAX request fails.

• Receives parameters event, XMLHttpRequest, settings, and errorThrown
• Ideal for showing error notifications or retry logic
• Syntax $(document).ajaxError(callback)

ajaxError() Usage Example

Execute custom error handling when an AJAX request fails.

$(function(){
	// Handle AJAX errors globally
	$(document).ajaxError(function (event, jqxhr, settings, thrownError) {
		$('#errorBox').show().append(thrownError);
	});
})

jQuery ajaxSuccess() Method

What is ajaxSuccess() Method?

The ajaxSuccess() method registers an event handler that fires when a jQuery AJAX request completes successfully.

• Receives parameters event, XMLHttpRequest, settings, and data
• Useful for global processing of returned data
• Syntax $(document).ajaxSuccess(callback)

ajaxSuccess() Usage Example

Handle successful AJAX responses and update the DOM or trigger follow-up actions.

$(function(){
	// Handle AJAX success globally
	$(document).ajaxSuccess(function () {
		$('#successBox').show();
	});
})

jQuery ajaxSend() Method

What is ajaxSend() Method?

The ajaxSend() method registers an event handler that fires just before a jQuery AJAX request is sent.

• Receives parameters event, XMLHttpRequest, and settings
• Useful to modify headers or data before sending
• Syntax $(document).ajaxSend(callback)

ajaxSend() Usage Example

Display a message or take action just before an AJAX request is sent to the server.

$(function(){
	// Show message just before AJAX request is sent
	$(document).ajaxSend(function () {
		$('#sendBox').show().delay(2000).fadeOut();
	});
})

jQuery AJAX Reference

For a complete overview of all jQuery AJAX methods, visit the jQuery AJAX Reference.