API/1.1.2/Ajax
From jQuery JavaScript Library
$.ajax( properties )
Load a remote page using an HTTP request.
This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).
$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.
Note: If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected problems in your script. See Specifying the Data Type for AJAX Requests for more information.
Options
$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request. These are all the key/values that can be used:
- async (Boolean) - By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
- beforeSend (Function) - A pre-callback to modify the XMLHttpRequest object before it is sent. Use this to set custom headers etc. The XMLHttpRequest is passed as the only argument.
- complete (Function) - A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request.
- contentType (String) - When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases.
- data (Object|String) - Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key. i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.
- dataType (String) - The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are:
- "xml": Returns a XML document that can be processed via jQuery.
- "html": Returns HTML as plain text; included script tags are evaluated.
- "script": Evaluates the response as JavaScript and returns it as plain text.
- "json": Evaluates the response as JSON and returns a JavaScript Object.
- error (Function) - A function to be called if the request fails. The function gets passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred.
- global (Boolean) - Whether to trigger global AJAX event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered.
- ifModified (Boolean) - Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header.
- processData (Boolean) - By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.
- success (Function) - A function to be called if the request succeeds. The function gets passed one argument: The data returned from the server, formatted according to the 'dataType' parameter.
- timeout (Number) - Set a local timeout in ms for the request. This will override the global timeout, if one is set via $.ajaxTimeout. For example, you could use this property to give a single request a longer timeout than all other requests that you've set to time out in one second. See $.ajaxTimeout() for global timeouts.
- type (String) - The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
- url (String) - The URL to request.
Return value: XMLHttpRequest
Parameters:
-
properties (Map): Key/value pairs to initialize the request with.
Example:
Load and execute a JavaScript file.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})
Example:
Save some data to the server and notify the user once its complete.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Example:
Loads data synchronously. Blocks the browser while the requests is active.
It is better to block user interaction by other means when synchronization is
necessary.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
Example:
Sends an xml document as data to the server. By setting the processData
option to false, the automatic conversion of data to strings is prevented.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
$.ajaxSetup( settings )
Setup global settings for AJAX requests.
See $.ajax for a description of all available options.
Return value: undefined
Parameters:
-
settings (Map): Key/value pairs to use for all AJAX requests
Example:
Sets the defaults for AJAX requests to the url "/xmlhttp/",
disables global handlers and uses POST instead of GET. The following
AJAX requests then sends some data without having to set anything else.
$.ajaxSetup( {
url: "/xmlhttp/",
global: false,
type: "POST"
} );
$.ajax({ data: myData });
$.ajaxTimeout( time )
Set the timeout of all AJAX requests to a specific amount of time. This will make all future AJAX requests timeout after a specified amount of time.
Set to null or 0 to disable timeouts (default).
You can manually abort requests with the XMLHttpRequest's (returned by all ajax functions) abort() method.
Deprecated. Use $.ajaxSetup instead.
Return value: undefined
Parameters:
-
time (Number): Number of milliseconds before an AJAX request times out.
Example:
Make all AJAX requests timeout after 5 seconds.
$.ajaxTimeout( 5000 );
$.get( url, params, callback )
Load a remote page using an HTTP GET request.
This is an easy way to send a simple GET request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). If you need to have both error and success callbacks, you may want to use $.ajax.
Return value: XMLHttpRequest
Parameters:
-
url (String): The URL of the page to load. -
params (Map): (optional) Key/value pairs that will be sent to the server. -
callback (Function): (optional) A function to be executed whenever the data is loaded successfully.
Example:
$.get("test.cgi");
Example:
$.get("test.cgi", { name: "John", time: "2pm" } );
Example:
$.get("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
$.getIfModified( url, params, callback )
Load a remote page using an HTTP GET request, only if it hasn't been modified since it was last retrieved.
Return value: XMLHttpRequest
Parameters:
-
url (String): The URL of the page to load. -
params (Map): (optional) Key/value pairs that will be sent to the server. -
callback (Function): (optional) A function to be executed whenever the data is loaded successfully.
Example:
$.getIfModified("test.html");
Example:
$.getIfModified("test.html", { name: "John", time: "2pm" } );
Example:
$.getIfModified("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.getIfModified("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
$.getJSON( url, params, callback )
Load JSON data using an HTTP GET request.
Return value: XMLHttpRequest
Parameters:
-
url (String): The URL of the page to load. -
params (Map): (optional) Key/value pairs that will be sent to the server. -
callback (Function): A function to be executed whenever the data is loaded successfully.
Example:
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
Example:
$.getJSON("test.js",
{ name: "John", time: "2pm" },
function(json){
alert("JSON Data: " + json.users[3].name);
}
);
$.getScript( url, callback )
Loads, and executes, a remote JavaScript file using an HTTP GET request.
Warning: Safari <= 2.0.x is unable to evaluate scripts in a global context synchronously. If you load functions via getScript, make sure to call them after a delay.
Return value: XMLHttpRequest
Parameters:
-
url (String): The URL of the page to load. -
callback (Function): (optional) A function to be executed whenever the data is loaded successfully.
Example:
$.getScript("test.js");
Example:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
$.post( url, params, callback )
Load a remote page using an HTTP POST request.
This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). If you need to have both error and success callbacks, you may want to use $.ajax.
Return value: XMLHttpRequest
Parameters:
-
url (String): The URL of the page to load. -
params (Map): (optional) Key/value pairs that will be sent to the server. -
callback (Function): (optional) A function to be executed whenever the data is loaded successfully.
Example:
$.post("test.cgi");
Example:
$.post("test.cgi", { name: "John", time: "2pm" } );
Example:
$.post("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
ajaxComplete( callback )
Attach a function to be executed whenever an AJAX request completes.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Show a message when an AJAX request completes.
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
ajaxError( callback )
Attach a function to be executed whenever an AJAX request fails.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback. A third argument, an exception object, is passed if an exception occured while processing the request.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Show a message when an AJAX request fails.
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
ajaxSend( callback )
Attach a function to be executed before an AJAX request is sent.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Show a message before an AJAX request is sent.
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
ajaxStart( callback )
Attach a function to be executed whenever an AJAX request begins and there is none already active.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Show a loading message whenever an AJAX request starts
(and none is already active).
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback )
Attach a function to be executed whenever all AJAX requests have ended.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Hide a loading message after all the AJAX requests have stopped.
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback )
Attach a function to be executed whenever an AJAX request completes successfully.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Return value: jQuery
Parameters:
-
callback (Function): The function to execute.
Example:
Show a message when an AJAX request completes successfully.
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
load( url, params, callback )
Load HTML from a remote file and inject it into the DOM.
Note: Avoid using this to load scripts, instead use $.getScript. IE strips script tags when there aren't any other characters in front of it.
Return value: jQuery
Parameters:
-
url (String): The URL of the HTML file to load. -
params (Object): (optional) A set of key/value pairs that will be sent as data to the server. -
callback (Function): (optional) A function to be executed whenever the data is loaded (parameters: responseText, status and response itself).
Example:
$("#feeds").load("feeds.html");
<div id="feeds"></div>
<div id="feeds"><b>45</b> feeds found.</div>
Example:
Same as above, but with an additional parameter
and a callback that is executed when the data was loaded.
$("#feeds").load("feeds.html",
{limit: 25},
function() { alert("The last 25 entries in the feed have been loaded"); }
);
loadIfModified( url, params, callback )
Load HTML from a remote file and inject it into the DOM, only if it's been modified by the server.
Return value: jQuery
Parameters:
-
url (String): The URL of the HTML file to load. -
params (Map): (optional) Key/value pairs that will be sent to the server. -
callback (Function): (optional) A function to be executed whenever the data is loaded (parameters: responseText, status and response itself).
Example:
$("#feeds").loadIfModified("feeds.html");
<div id="feeds"></div>
<div id="feeds"><b>45</b> feeds found.</div>
serialize()
Serializes a set of input elements into a string of data. This will serialize all given elements.
A serialization designed to emulate the actual form submission of a browser is provided by the Form Plugin. The plugin's formSerialize method correctly handles multiple-selects and identically-named checkboxes as arrays, whereas the serialize method recognizes only a single value for these elements.
Return value: String
Example:
Serialize a selection of input elements to a string
$("input[@type=text]").serialize();
<input type='text' name='name' value='John'/> <input type='text' name='location' value='Boston'/>
name=John&location=Boston