While jQuery does offer many Ajax-related convenience methods, the core
$.ajax() method is at the heart of all of them, and understanding it is
imperative. We'll review it first, and then touch briefly on the convenience
It's often considered good practice to use the
$.ajax() method over the jQuery provided convenience methods. As you'll see, it offers features that the convenience methods do not, and its syntax allows for the ease of readability.
$.ajax() method is a powerful and straightforward way of creating
Ajax requests. It takes a configuration object that contains all the
instructions jQuery requires to complete the request. The
$.ajax() method is
particularly valuable because it offers the ability to specify both success and
failure callbacks. Also, its ability to take a configuration object that can
be defined separately makes it easier to write reusable code. For complete
documentation of the configuration options, visit
Note: A note about the
dataType setting: if the server sends back data that is in a
different format than you specify, your code may fail, and the reason will not
always be clear, because the HTTP response code will not show an error. When
working with Ajax requests, make sure your server is sending back the data type
you're asking for, and verify that the
Content-type header is accurate for the
data type. For example, for JSON data, the
Content-type header should be
There are many, many options for the
$.ajax() method, which is part of its
power. For a complete list of options, visit
http://api.jquery.com/jQuery.ajax/; here are several that you will use
false if the request should be sent synchronously. Defaults to
Note that if you set this option to
false, your request will block execution
of other code until the response is received.
Whether to use a cached response if available. Defaults to
true for all
dataTypes except "script" and "jsonp". When set to
false, the URL will simply
have a cachebusting parameter appended to it.
A callback function to run when the request is complete, regardless of success or failure. The function receives the raw request object and the text status of the request.
The scope in which the callback function(s) should run (i.e. what
mean inside the callback function(s)). By default,
this inside the callback
function(s) refers to the object originally passed to
The data to be sent to the server. This can either be an object or a query
string, such as
The type of data you expect back from the server. By default, jQuery will look
at the MIME type of the response if no
dataType is specified.
A callback function to run if the request results in an error. The function receives the raw request object and the text status of the request.
The callback name to send in a query string when making a JSONP request. Defaults to "callback".
A callback function to run if the request succeeds. The function receives the
dataType was JSON), as
well as the text status of the request and the raw request object.
The time in milliseconds to wait before considering the request a failure.
true to use the param serialization style in use prior to jQuery 1.4.
For details, see
The type of the request, "POST" or "GET". Defaults to "GET". Other request types, such as "PUT" and "DELETE" can be used, but they may not be supported by all browsers.
The URL for the request.
url option is the only required property of the
object; all other properties are optional. This can also be passed as the first
$.ajax(), and the options object as the second argument.
link Convenience Methods
If you don't need the extensive configurability of
$.ajax(), and you don't care
about handling errors, the Ajax convenience functions provided by jQuery can be
useful, terse ways to accomplish Ajax requests. These methods are just
"wrappers" around the core
$.ajax() method, and simply pre-set some of the
options on the
The convenience methods provided by jQuery are:
Perform a GET request to the provided URL.
Perform a POST request to the provided URL.
Add a script to the page.
Perform a GET request, and expect JSON to be returned.
In each case, the methods take the following arguments, in order:
The URL for the request. Required.
The data to be sent to the server. Optional. This can either be an object or a
query string, such as
Note: This option is not valid for
link success callback
link data type
The type of data you expect back from the server. Optional.
Note: This option is only applicable for methods that don't already specify the data type in their name.
.load() method is unique among jQuery’s Ajax methods in that it is
called on a selection. The
.load() method fetches HTML from a URL, and
uses the returned HTML to populate the selected element(s). In addition to
providing a URL to the method, you can optionally provide a selector; jQuery
will fetch only the matching content from the returned HTML.