JQuery - Ajax - JQuery API Documentation
JQuery - Ajax - JQuery API Documentation
ajax/
Blog (https://blog.jquery.com/)
Plugins (https://plugins.jquery.com/)
jQuery.ajax()
Categories: Ajax (//api.jquery.com/category/ajax/) > Low-Level Interface (//api.jquery.com/
category/ajax/low-level-interface/)
1 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
2 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
Deferred Object (// the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before
it is sent. Use this to set custom headers, etc. The jqXHR and
api.jquery.com/
settings objects are passed as arguments. This is an Ajax
category/deferred-
Event (/Ajax_Events/). Returning fale in the eforeend
object/) function will cancel the request. , the
Deprecated (// eforeend option will be called regardless of the type of
request.
api.jquery.com/
category/
(default: true, fale for dataTpe 'cript' and
deprecated/) 'jonp' )
Deprecated 1.3 (// Type: Boolean (http://api.jquery.com/Types/#Boolean)
api.jquery.com/ If set to fale , it will force requested pages not to be
category/ cached by the browser. Setting cache to false will only
work correctly with HEAD and GET requests. It works by
deprecated/
appending "_={timestamp}" to the GET parameters. The
deprecated-1.3/)
parameter is not needed for other types of requests, except
Deprecated 1.7 (// in IE8 when a POST is made to a URL that has already been
api.jquery.com/ requested by a GET.
category/
deprecated/
Type: Function (http://api.jquery.com/Types/#Function)(
deprecated-1.7/)
jqXHR (http://api.jquery.com/Types/#jqXHR) jqXHR, String
Deprecated 1.8 (// (http://api.jquery.com/Types/#String) textStatus )
api.jquery.com/ A function to be called when the request finishes (after
ucce and error callbacks are executed). The function
category/
gets passed two arguments: The jqXHR (in jQuery 1.4.x,
deprecated/
XMLHTTPRequest) object and a string categorizing the
deprecated-1.8/) status of the request ( "ucce" , "notmodified" ,
"nocontent" , "error" , "timeout" , "aort" , or
Deprecated 1.9 (//
"parererror" ). , the complete setting can
api.jquery.com/
accept an array of functions. Each function will be called in
category/
turn. This is an Ajax Event (/Ajax_Events/).
deprecated/
deprecated-1.9/)
Type: PlainObject (http://api.jquery.com/Types/#PlainObject)
Deprecated 1.10
An object of string/regular-expression pairs that determine
(//api.jquery.com/
how jQuery will parse the response, given its content type.
category/
deprecated/
deprecated-1.10- (default: 'application/x-www-form-
and-2.0/) urlencoded; charet=UTF-8' )
Type: Boolean (http://api.jquery.com/Types/#Boolean) or
Deprecated 3.0 (// String (http://api.jquery.com/Types/#String)
api.jquery.com/ When sending data to the server, use this content type.
category/ Default is "application/x-www-form-urlencoded;
deprecated/ charset=UTF-8", which is fine for most cases. If you explicitly
deprecated-3.0/) pass in a content-type to $.ajax() , then it is always sent to
the server (even if no data is sent). As of jQuery 1.6 you can
Deprecated 3.2 (// pass fale to tell jQuery to not set any content type header.
api.jquery.com/ The W3C XMLHttpRequest specification dictates that
category/ the charset is always UTF-8; specifying another charset will
3 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
deprecated/ not force the browser to change the encoding. For
deprecated-3.2/) cross-domain requests, setting the content type to anything
other than application/x-www-form-urlencoded ,
Deprecated 3.3 (// multipart/form-data , or text/plain will trigger the
api.jquery.com/ browser to send a preflight OPTIONS request to the server.
category/
deprecated/
deprecated-3.3/) Type: PlainObject (http://api.jquery.com/Types/#PlainObject)
This object will be the context of all Ajax-related callbacks.
Deprecated 3.4 (// By default, the context is an object that represents the Ajax
api.jquery.com/ settings used in the call ( $.ajaxetting merged with the
category/ settings passed to $.ajax ). For example, specifying a DOM
deprecated/ element as the context will make that the context for the
complete callback of a request, like so:
deprecated-3.4/)
Dimensions (//
api.jquery.com/ (default: {"* text": window.tring, "text
html": true, "text jon": jQuer.pareJON, "text
category/
xml": jQuer.pareXML} )
dimensions/)
Type: PlainObject (http://api.jquery.com/Types/#PlainObject)
Effects (// An object containing dataType-to-dataType converters. Each
api.jquery.com/ converter's value is a function that returns the transformed
category/effects/) value of the response.
Basics (//
api.jquery.com/ (default: fale for ame-domain requet,
category/effects/ true for cro-domain requet )
basics/) Type: Boolean (http://api.jquery.com/Types/#Boolean)
If you wish to force a crossDomain request (such as JSONP)
Custom (// on the same domain, set the value of crossDomain to true .
api.jquery.com/ This allows, for example, server-side redirection to another
category/effects/ domain.
custom-effects/)
4 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
5 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
DOM Insertion,
multiple, space-separated values: ,
Inside (// jQuery can convert a dataType from what it received in
api.jquery.com/ the Content-Type header to what you require. For
category/ example, if you want a text response to be treated as
manipulation/ XML, use "text xml" for the dataType. You can also
dom-insertion- make a JSONP request, have it received as text, and
inside/) interpreted by jQuery as XML: "jonp text xml" .
Similarly, a shorthand string such as "jonp xml" will
DOM Insertion, first attempt to convert from jsonp to xml, and, failing
Outside (// that, convert from jsonp to text, and then from text to
api.jquery.com/ xml.
category/
manipulation/
dom-insertion- Type: Function (http://api.jquery.com/Types/#Function)(
outside/) jqXHR (http://api.jquery.com/Types/#jqXHR) jqXHR, String
(http://api.jquery.com/Types/#String) textStatus, String
DOM Removal (// (http://api.jquery.com/Types/#String) errorThrown )
api.jquery.com/ A function to be called if the request fails. The function
category/ receives three arguments: The jqXHR (in jQuery 1.4.x,
manipulation/ XMLHttpRequest) object, a string describing the type of error
dom-removal/) that occurred and an optional exception object, if one
occurred. Possible values for the second argument (besides
DOM Replacement null ) are "timeout" , "error" , "aort" , and
(//api.jquery.com/ "parererror" . When an HTTP error occurs, errorThrown
receives the textual portion of the HTTP status, such as "Not
6 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
category/ Found" or "Internal Server Error." (in HTTP/2 it may instead be
manipulation/ an empty string) , the error setting can
dom- accept an array of functions. Each function will be called in
turn.
replacement/)
This is an Ajax Event (/
General Attributes Ajax_Events/).
(//api.jquery.com/
category/ (default: true )
Type: Boolean (http://api.jquery.com/Types/#Boolean)
manipulation/
Whether to trigger global Ajax event handlers for this
general-
request. The default is true . Set to fale to prevent the
attributes/) global handlers like ajaxtart or ajaxtop from being
Style Properties (// triggered. This can be used to control various Ajax Events (/
Ajax_Events/).
api.jquery.com/
category/
(default: {} )
manipulation/
Type: PlainObject (http://api.jquery.com/Types/#PlainObject)
style-properties/) An object of additional header key/value pairs to send along
with requests using the XMLHttpRequest transport. The
Miscellaneous (// header X-Requeted-With: XMLHttpRequet is always
added, but its default XMLHttpRequet value can be
api.jquery.com/
changed here. Values in the header setting can also be
category/
overwritten from within the eforeend function.
miscellaneous/)
Collection
Manipulation (// (default: fale )
api.jquery.com/ Type: Boolean (http://api.jquery.com/Types/#Boolean)
Allow the request to be successful only if the response has
category/
changed since the last request. This is done by checking the
miscellaneous/
Last-Modified header. Default value is fale , ignoring the
collection- header. In jQuery 1.4 this technique also checks the 'etag'
manipulation/) specified by the server to catch unmodified data.
Data Storage (//
(default: depend on current location protocol )
api.jquery.com/
Type: Boolean (http://api.jquery.com/Types/#Boolean)
category/ Allow the current environment to be recognized as "local,"
miscellaneous/ (e.g. the filesystem), even if jQuery does not recognize it as
data-storage/) such by default. The following protocols are currently
recognized as local: file , *-extenion , and widget . If the
DOM Element
iLocal setting needs modification, it is recommended to
Methods (// do so once in the $.ajaxetup() method.
api.jquery.com/
category/
miscellaneous/
dom-element- Type: String (http://api.jquery.com/Types/#String) or Boolean
methods/) (http://api.jquery.com/Types/#Boolean)
Override the callback function name in a JSONP request.
Setup Methods (// This value will be used instead of 'callback' in the 'callback=?'
api.jquery.com/ part of the query string in the url. So
category/ {jonp:'onJONPLoad'} would result in 'onJONPLoad=?'
miscellaneous/ passed to the server. , setting the jonp
7 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
setup-methods/) option to fale prevents jQuery from adding the "?callback"
string to the URL or attempting to use "=?" for
transformation. In this case, you should also explicitly set the
Offset (// jonpCallack setting. For example, { jonp: fale,
api.jquery.com/ jonpCallack: "callackName" } . If you don't trust the
category/offset/) target of your Ajax requests, consider setting the jonp
property to fale for security reasons.
Properties (//
api.jquery.com/
category/properties/) Type: String (http://api.jquery.com/Types/#String) or
Properties of Function (http://api.jquery.com/Types/#Function)()
jQuery Object Specify the callback function name for a JSONP request.
This value will be used instead of the random name
Instances (//
automatically generated by jQuery. It is preferable to let
api.jquery.com/
jQuery generate a unique name as it'll make it easier to
category/ manage the requests and provide callbacks and error
properties/jquery- handling. You may want to specify the callback when you
object-instance- want to enable better browser caching of GET requests.
properties/) , you can also use a function for this setting, in
which case the value of jonpCallack is set to the return
Properties of the value of that function.
Global jQuery
Object (// (default: 'GT' )
api.jquery.com/ Type: String (http://api.jquery.com/Types/#String)
category/ The HTTP method to use for the request (e.g. "POT" ,
properties/global- "GT" , "PUT" ).
jquery-object-
properties/)
Attribute (//
(default: true )
api.jquery.com/ Type: Boolean (http://api.jquery.com/Types/#Boolean)
category/ By default, data passed in to the data option as an object
selectors/ (technically, anything other than a string) will be processed
attribute- and transformed into a query string, fitting to the default
selectors/) content-type "application/x-www-form-urlencoded". If you
want to send a DOMDocument, or other non-processed data,
Basic (// set this option to fale .
api.jquery.com/
category/
selectors/basic- Type: PlainObject (http://api.jquery.com/Types/#PlainObject)
css-selectors/) Defines an object with additional attributes to be used in a
"script" or "jsonp" request. The key represents the name of
8 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
Basic Filter (// the attribute and the value is the attribute's value. If this
object is provided it will force the use of a script-tag
api.jquery.com/
transport. For example, this can be used to set nonce ,
category/
integrit , or croorigin attributes to satisfy Content
selectors/basic- Security Policy requirements.
filter-selectors/)
9 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
api.jquery.com/
category/ Type: Number (http://api.jquery.com/Types/#Number)
traversing/ Set a timeout (in milliseconds) for the request. A value of 0
filtering/) means there will be no timeout. This will override any global
timeout set with $.ajaxSetup() (/jQuery.ajaxSetup/). The
Miscellaneous
timeout period starts at the point the $.ajax call is made; if
Traversing (// several other requests are in progress and the browser has
api.jquery.com/ no connections available, it is possible for a request to time
category/ out before it can be sent. the
traversing/ XMLHttpRequest object will be in an invalid state if the
miscellaneous- request times out; accessing any object members may throw
traversal/) an exception. script and JSONP
requests cannot be cancelled by a timeout; the script will run
Tree Traversal (// even if it arrives after the timeout period.
api.jquery.com/
category/
traversing/tree- Type: Boolean (http://api.jquery.com/Types/#Boolean)
traversal/) Set this to true if you wish to use the traditional style of
param serialization (/jQuery.param/).
10 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
1.1.3/) 1 $.ajax({
2 url: a_cro_domain_url,
Version 1.1.4 (// 3 xhrField: {
4 withCredential: true
api.jquery.com/
5 }
category/version/ 6 });
1.1.4/)
Version 1.3 (// At its simplest, the $.ajax() function can be called with no arguments:
api.jquery.com/
category/version/ 1 $.ajax();
1.3/)
Version 1.4 (// Default settings can be set globally by using the $.ajaxetup()
api.jquery.com/ (/jQuer.ajaxetup/) function.
category/version/
This example, using no options, loads the contents of the current page,
1.4/)
but does nothing with the result. To use the result, you can implement
Version 1.4.1 (// one of the callback functions.
api.jquery.com/
category/version/ The jqXHR Object
1.4.1/)
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax()
Version 1.4.2 (// is a superset of the browser's native XMLHttpRequest object.
api.jquery.com/ For example, it contains reponeText and reponeXML properties, as
category/version/ well as a getReponeHeader() method. When the transport mechanism
1.4.2/) is something other than XMLHttpRequest (for example, a script tag for a
JSONP request) the jqXHR object simulates native XHR functionality
Version 1.4.3 (//
where possible.
api.jquery.com/
category/version/ , the jqXHR object also contains the
1.4.3/) overrideMimeTpe() method (it was available in jQuery 1.4.x, as well,
Version 1.4.4 (// but was temporarily removed in jQuery 1.5). The .overrideMimeTpe()
api.jquery.com/ method may be used in the eforeend() callback function, for
category/version/ example, to modify the response content-type header:
1.4.4/)
11 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
12 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
api.jquery.com/ The jqXHR.ucce() , jqXHR.error() ,
category/version/ and jqXHR.complete() callbacks are removed as of jQuery 3.0.
3.2/) You can use jqXHR.done() , jqXHR.fail() , and
Version 3.3 (// jqXHR.alwa() instead.
api.jquery.com/
category/version/
3.3/) 1 // Aign handler immediatel after making the requet,
2 // and rememer the jqXHR oject for thi requet
Version 3.4 (// 3 var jqxhr = $.ajax( "example.php" )
api.jquery.com/ 4 .done(function() {
5 alert( "ucce" );
category/version/
6 })
3.4/) 7 .fail(function() {
8 alert( "error" );
Version 3.5 (// 9 })
api.jquery.com/ 10 .alwa(function() {
11 alert( "complete" );
category/version/ 12 });
3.5/) 13
14 // Perform other work here ...
Version 3.6 (// 15
api.jquery.com/ 16 // et another completion function for the requet aove
17 jqxhr.alwa(function() {
category/version/ 18 alert( "econd complete" );
3.6/) 19 });
readtate
tatu
aort( [ tatuText ] )
getAllReponeHeader() as a string
getReponeHeader( name )
overrideMimeTpe( mimeTpe )
tatuCode( callacktatuCode )
13 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
No onreadtatechange mechanism is provided, however, since done ,
fail , alwa , and tatuCode cover all conceivable requirements.
Data Types
The available data types are text , html , xml , jon , jonp , and
cript .
14 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
If text or html is specified, no pre-processing occurs. The data is
simply passed on to the success handler, and made available through the
reponeText property of the jqXHR object.
For more information on JSONP, see the original post detailing its use
(https://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/).
By default, Ajax requests are sent using the GET HTTP method. If the
POST method is required, the method can be specified by setting a value
for the tpe option. This option affects how the contents of the data
option are sent to the server. POST data will always be transmitted to the
server using UTF-8 charset, per the W3C XMLHTTPRequest standard.
The data option can contain either a query string of the form
ke1=value1&ke2=value2 , or an object of the form {ke1: 'value1',
ke2: 'value2'} . If the latter form is used, the data is converted into a
query string using jQuer.param() (/jQuer.param/) before it is sent.
This processing can be circumvented by setting proceData to fale .
The processing might be undesirable if you wish to send an XML object
to the server; in this case, change the contentTpe option from
application/x-www-form-urlencoded to a more appropriate MIME
15 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
type.
Advanced Options
By default, requests are always issued, but the browser may serve results
out of its cache. To disallow use of the cached results, set cache to
fale . To cause the request to report failure if the asset has not been
modified since the last request, set ifModified to true .
The first letter in Ajax stands for "asynchronous," meaning that the
operation occurs in parallel and the order of completion is not
guaranteed. The anc option to $.ajax() defaults to true , indicating
that code execution can continue after the request is made. Setting this
option to fale (and thus making the call no longer asynchronous) is
strongly discouraged, as it can cause the browser to become
unresponsive.
Extending Ajax
16 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
, jQuery's Ajax implementation includes prefilters (/
jQuery.ajaxPrefilter/), transports (/jQuery.ajaxTransport/), and converters
that allow you to extend Ajax with a great deal of flexibility.
Using Converters
$.ajax() converters support mapping data types to other data types. If,
however, you want to map a custom data type to a known type (e.g
jon ), you must add a correspondence between the response Content-
Type and the actual data type using the content option:
1 $.ajaxetup({
2 content: {
3 mcutomtpe: /mcutomtpe/
4 },
5 converter: {
6 "mcutomtpe jon": function( reult ) {
7 // Do tuff
8 return newreult;
9 }
10 }
11 });
1 $.ajaxetup({
2 content: {
3 mcutomtpe: /mcutomtpe/
4 },
5 converter: {
6 "text mcutomtpe": true,
7 "mcutomtpe jon": function( reult ) {
8 // Do tuff
9 return newreult;
10 }
11 }
12 });
The above now allows passing from text to mcutomtpe and then
mcutomtpe to jon .
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are
subject to the same origin policy (https://en.wikipedia.org/wiki/
Same_origin_policy); the request can not successfully retrieve data
from a different domain, subdomain, port, or protocol.
17 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
Script and JSONP requests are not subject to the same origin
policy restrictions.
Examples:
Save some data to the server and notify the user once it's complete.
1 $.ajax({
2 method: "POT",
3 url: "ome.php",
4 data: { name: "John", location: "oton" }
5 })
6 .done(function( mg ) {
7 alert( "Data aved: " + mg );
8 });
1 $.ajax({
2 url: "tet.html",
3 cache: fale
4 })
5 .done(function( html ) {
6 $( "#reult" ).append( html );
7 });
Send an id as data to the server, save some data to the server, and notify
the user once it's complete. If the request fails, alert the user.
18 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
1 var menuId = $( "ul.nav" ).firt().attr( "id" );
2 var requet = $.ajax({
3 url: "cript.php",
4 method: "POT",
5 data: { id : menuId },
6 dataTpe: "html"
7 });
8
9 requet.done(function( mg ) {
10 $( "#log" ).html( mg );
11 });
12
13 requet.fail(function( jqXHR, texttatu ) {
14 alert( "Requet failed: " + texttatu );
15 });
1 $.ajax({
2 method: "GT",
3 url: "tet.j",
4 dataTpe: "cript"
5 });
BOOKS
19 of 20 9/10/23, 22:31
jQuery.ajax() | jQuery API Documentation http://api.jquery.com/jquery.ajax/
Use (https://terms-of-use.openjsf.org/), Privacy (https://
privacy-policy.openjsf.org/), and Cookie (https://
www.linuxfoundation.org/cookies) Policies also apply.
20 of 20 9/10/23, 22:31