jquery_ref_ajax

jQuery AJAX Reference

jQuery AJAX Methods

AJAX (Asynchronous JavaScript and XML) allows web pages to exchange data with a server and update parts of the page without requiring a full reload. jQuery provides a comprehensive and browser-compatible set of tools for making AJAX requests.

While modern JavaScript offers the native fetch API and async/await syntax for handling asynchronous requests, jQuery’s AJAX methods are still widely used, especially in projects already using jQuery, due to their convenience and robust feature set (like built-in JSONP support and global event handlers).

The following table lists the core jQuery AJAX methods and related utilities:

Method	Description
$.ajax()	The core method for performing asynchronous HTTP (Ajax) requests. Highly configurable.
$.get()	Loads data from a server using an HTTP GET request. Shorthand for $.ajax() with type: 'GET'.
$.post()	Loads data from a server using an HTTP POST request. Shorthand for $.ajax() with type: 'POST'.
$.getJSON()	Loads JSON-encoded data from a server using an HTTP GET request. Sets appropriate headers and data type.
$.getScript()	Loads and executes a JavaScript file from a server using an HTTP GET request.
.load()	Loads HTML data from a server and injects it into the matched element(s). Can include a selector to filter the loaded HTML.
$.ajaxSetup()	Sets default values for future Ajax requests. Useful for setting common options like timeouts or headers.
.serialize()	Encodes a set of form elements as a string suitable for submission (e.g., ‘name=John&location=Boston’).
.serializeArray()	Encodes a set of form elements as an array of objects containing names and values (e.g., [{name: 'name', value: 'John'}, ...]).
$.param()	Creates a serialized representation of an array or object, suitable for URL query strings or AJAX request data.
Global Ajax Event Handlers	These methods register handlers that fire whenever any Ajax request on the page changes state. They are typically attached to the document.
.ajaxStart() / .ajaxStop()	Register handlers to be called when the first Ajax request begins / when all active Ajax requests have completed.
.ajaxSend() / .ajaxComplete()	Register handlers to be called before an Ajax request is sent / when an Ajax request completes (after success or error callbacks).
.ajaxSuccess() / .ajaxError()	Register handlers to be called when an Ajax request completes successfully / when an Ajax request fails.
$.ajaxPrefilter()	Handle custom Ajax options or modify existing options before each request is sent and processed by $.ajax().
$.ajaxTransport()	Creates an object that handles the actual transmission of Ajax data (for advanced use cases).

Understanding Promises (Deferred)

Most jQuery AJAX methods (like $.ajax, $.get, $.post) return a jqXHR object, which implements the Promise interface (specifically, jQuery’s Deferred object). This allows you to chain callbacks using methods like .done(), .fail(), and .always() for handling success, error, and completion states in a more flexible way than traditional callback options.

$.getJSON('/api/data')
  .done(function(data) {
    console.log('Success:', data);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', textStatus, errorThrown);
  })
  .always(function() {
    console.log('Request completed.');
  });