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 instance 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.
$.ajax gives you the option to specify a dataType parameter, which gives jQuery a hint as to what to expect back from the server. Based on this hint, jQuery processes the response data and passes it as the first argument to your success callback function (if provided). You may specify the dataType as a key/value pair in the lone argument passed to $.ajax. Supported types are:
Note: Make sure the server handling the request sends the right MIME type (eg. xml as "text/xml"). That is, if you specify the dataType option to be "xml", make sure your server sends content with the "text/xml" MIME type. Sending the wrong MIME type will prohibit jQuery from correctly managing the data returned in the response, and could cause unexpected problems in your script.
$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request, and returns the XMLHttpRequest object for post-processing (like manual aborting) if needed.
Options: Several options that control the behavior of $.ajax are available. They are specified as key/value pairs of the 'parameters' object passed to $.ajax:
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 with others means when synchronization is
necessary, instead to block the complete browser.
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
});
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 });
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): How long before an AJAX request times out.
Example:
Make all AJAX requests timeout after 5 seconds.
$.ajaxTimeout( 5000 );
Load a remote page using an HTTP GET request. This is an easier way of sending 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 (technically, only if the response is successful).
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);
}
);
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.
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);
}
);
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.
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);
}
);
Loads, and executes, a remote JavaScript file using an HTTP GET request.
Warning: Safari <= 2.0.x is unable to evalulate 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.
Example:
$.getScript("test.js");
Example:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
Load a remote page using an HTTP POST request. This is an easier way of sending 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 (technically, only if the response is successful).
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);
}
);
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>");
});
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>");
});
Attach a function to be executed before an AJAX request is send.
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 send.
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
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();
});
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();
});
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 HTML from a remote file and inject it into the DOM.
Note: Avoid to use 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"); }
);
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>
Serializes a set of input elements into a string of data. This will serialize all given elements.
A serialization similar to the form submit of a browser is provided by the Form Plugin. It also takes multiple-selects into account, while this method recognizes only a single option.
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'/>