jQuery Global AJAX Utility Methods

jQuery Global AJAX Utilities

In addition to event handlers, jQuery provides global utilities to configure and extend AJAX behavior across your application. These methods let you set default options, modify settings before AJAX requests, and define custom transport logic in one place.

Why Use Global AJAX Utilities?

• Set default headers, data types, or timeouts for every AJAX call
• Alter request settings dynamically before they are sent
• Implement custom transport mechanisms for specialized needs
• Keep your AJAX configuration DRY and maintainable

jQuery Global AJAX Utilities

jQuery offers three core utilities for global AJAX configuration:

1. $.ajaxSetup()
2. $.ajaxPrefilter()
3. $.ajaxTransport()

jQuery $.ajaxSetup() Utility

What is ajaxSetup() Method?

The $.ajaxSetup() utility method establishes default settings for all future AJAX requests. Any options you specify here will be merged into individual calls unless overridden. Also, the $.ajaxSetup() method accepts only standard jQuery-supported data types such as json, xml, html, script, text, and jsonp.

• Use to define common headers, data types, or timeout values
• Called once, typically during application initialization
• Syntax $.ajaxSetup(options)

ajaxSetup() Usage Example

This example demonstrates using $.ajaxSetup() to define default settings, such as data type, request method, and timeout, for all subsequent AJAX requests.

$(function() {
	// Global AJAX settings
	$.ajaxSetup({
		// URL returns 'JSON' data
		url: 'json-data.php',
		type: 'GET',
		dataType: 'json',
		timeout: 5000
	});
	$('#loadData').on('click', function () {
		$.ajax({
			success: function (response) {
				$('#result').html(
					'Name: ' + response.name +
					'<br>Email: ' + response.email +
					'<br>City: ' + response.city 
				);
			},
		});
	});
});

PHP Script Returning JSON Data

This is a remote json-data.php file that provides structured JSON output for AJAX requests. Or use a static .json file if no server processing is needed.

<?php
header('Content-Type: application/json');
echo json_encode([
    'name'  => 'John Doe',
    'email' => 'john@example.com',
    'city'  => 'New York',
    'country' => 'USA',
    'skills' => ['JavaScript', 'jQuery', 'PHP'],
    'profile' => [
        'age' => 30,
        'member_since' => '2020-05-15',
        'active' => true
    ]
]);

jQuery $.ajaxPrefilter() Utility

What is ajaxPrefilter() Method?

The $.ajaxPrefilter() method allows inspection and adjustment of AJAX settings before each request is sent, executing in the order they are registered.

• Ideal to conditionally change URLs or data based on custom logic
• Receives parameters options, originalOptions, and jqXHR
• Syntax $.ajaxPrefilter(dataTypeFilter, handler)

ajaxPrefilter() Usage Example

This example uses ajaxPrefilter() to modify the default AJAX request timeout and log the change before each request is sent.

$(function(){
	// Visual log
	function logMessage(message) {
		$('#log').append(message + '<br>');
	}
	// Prefilter: modify timeout and log changes
	$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
		logMessage("Original timeout: " + (originalOptions.timeout || "default"));
		// Increase timeout to 10 seconds
		options.timeout = 10000;
		logMessage("Modified timeout: " + options.timeout);
	});
});

jQuery $.ajaxTransport() Utility

What is ajaxTransport() Method?

The $.ajaxTransport() utility method allows creation of a custom transport mechanism for AJAX requests. It is used when the standard XHR or JSONP approaches do not meet specific requirements and it is only useful when you need to handle custom data types or override how data is sent/received.

• A transport object defines two required methods: send and abort, which are invoked internally by $.ajax() to perform the actual request handling.
• It represents the most advanced customization level for $.ajax() and should be implemented only when simpler mechanisms like prefilters or converters cannot achieve the needed functionality.
• Useful for introducing WebSocket or iframe‑based transports
• Receives parameters dataType and handler(options, originalOptions, jqXHR)
• Syntax $.ajaxTransport(dataType, handler)

ajaxTransport() Usage

$(function(){
  $.ajaxTransport('mock', function(options){
    return {
      send: function(headers, completeCallback){
        console.log('Mock transport:', options);
        completeCallback(200, 'OK', { text: 'mock response' });
      },
      abort: function(){}
    };
  });
});

jQuery AJAX Reference

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