jQuery的ajax()方法详细分析

目录

前言

  ajax,即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种异步加载数据的Web交互方法,在网页开发中使用十分普遍,实现局部刷新以达到更好的交互效果是ajax的典型应用。


核心

  $.ajax(即jQuery.ajax),是jQuery库进行的一次封装。其核心实现是利用了JavaScript中的XMLHttpRequest对象。通过以下jQuery源码片段可以看出(jquery-2.2.0):

1
2
3
4
5
jQuery.ajaxSettings.xhr = function() {
try {
return new window.XMLHttpRequest();
} catch ( e ) {}
};

关于XMLHttpRequest的更多属性、方法和演示,可以参考W3School XML DOM - XMLHttpRequest 对象


分类

  其实,$.ajax只是jQuery对异步加载封装的函数之一。jQuery对Ajax相关内容分为了4类:

全局Ajax事件处理函数(Global Ajax Event Handlers)

  说明:这些函数定义了页面上任何特定ajax事件(比如初始化或完成)触发时将会被调用的处理程序。有:

  • .ajaxComplete()
      当ajax请求执行完成时触发,与.ajaxSuccess()不同,通过ajaxComplete()方法规定的函数会在请求完成时运行,即使请求并未成功。
  • .ajaxError()
      当ajax请求执行错误时触发。
  • .ajaxSend()
      当ajax请求将要发送时触发。
  • .ajaxStart()
      当ajax请求将要发送时,jQuery将会检查此时是否有其他ajax请求正在进行。如果进程中没有,那么jQuery将会触发.ajaxStart()事件。
  • .ajaxStop()
      当一个ajax请求执行完成时,jQuery将会检查此时是否还有其他ajax请求。如果没有了,jQuery将会触发.ajaxStop()事件。另外,如果上一个ajax请求的beforeSend()回调函数的返回值为false,也会触发.ajaxStop()事件。
  • .ajaxSuccess()
      当ajax请求成功完成(无论何时)触发。此时,由.ajaxSuccess()方法定义的任何函数都会被执行。

注:jQuery ajax中各个事件执行顺序如下:
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)

辅助函数(Helper Functions)

  说明:这些函数在执行ajax任务时起到辅助作用,对参数变量等进行一些转化处理。

  • .param()
      这个函数是内部用来将表单元素值转换为序列化字符串表达式的。使用该函数将会把一个数组,空对象或者jQuery对象序列化成适合于URL查询或者ajax请求的形式。(键值对形式)
  • .serialize()
      使用该方法将会得到标准URL编码格式的字符串,可作用于已选择(或填写)确定值的jQuery对象。
  • .serializeArray()
      该方法会返回JavaScript对象数组,可用于编码成JSON字符串,可作用于jQuery表单对象集合。

基础接口(Low-Level Interface)

  说明:这些方法可用于编写任意的ajax请求。

  • .ajax()
      使用该方法可发起一个异步HTTP请求。具体内容是本文重点,稍后单独描述
  • .ajaxPrefilter()
      该函数在请求被发出及执行$.ajax过程前,可定制ajax请求的选项或修改已有选项。
  • .ajaxSetup()
      该函数用于定制后续将要使用的ajax请求的参数的默认值。该方法目前已不推荐使用。
  • .ajaxTransport()
      该函数用于创建实际承载ajax数据传输的对象。

速写函数(Shorthand Methods)

  说明:这些函数将更加常用的ajax请求抽出来,从而可以使用更简短的名字调用更明确的方法。

  • .get()
      使用HTTP的GET请求从服务器获取数据。
  • .getJSON()
      使用HTTP的GET请求从服务器获取JSON格式编码的数据。
  • .getScript()
      使用HTTP的GET请求从服务器获取一个JavaScript文件,然后执行之。
  • .post()
      使用HTTP的POST请求从服务器获取数据。
  • .load()
      从服务器获取数据并且将返回的HTML代码放在匹配的元素中。

$.ajax()详细介绍

描述:使用该方法可发起一个异步HTTP请求。

version1.5 格式:jQuery.ajax( url [, settings ] )

url
  类型:String
  该字符串所代表的URL即请求将要发送到的地方。
settings
  类型:PlainObject(PlainObject是一种包含0个或多个键值对的JavaScript对象,换句话说,就是“对象的对象”。之所以被称为“PlainObject”,是为了和其他类型的JavaScript对象作区分:比如说,null,用户自定义数组,或者宿主对象-document/window。这些对象使用typeof方法都会得到“Object”返回值。而对于PlainObject,则可以使用jQuery.isPlainObject()来判断是否成立。)
  settings中一系列的键值对集合配置了一个ajax请求。所有设置都是可选的。默认设置可以使用之前提到的.ajaxSetup()。下面的内容则针对所有的setting选项给出了详细解释。

version1.0 格式:jQuery.ajax( [ settings ] )

settings的所有可选项:
1.accepts(缺省:取决于DataType)
  类型:PlainObject
  是键值对的集合,将一种给定的dataType转化为对应的MIME type(MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型)。它将会在请求头中发送。这个头告诉服务器它需要什么类型的返回值。比如说,下面就定义了一种自定义类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
},

// Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},

// Expect a `mycustomtype` back from server
dataType: 'mycustomtype'
});

注意:为了让accepts正常工作,必须配套声明converters。

2.async(缺省:true)
  类型:Boolean
  默认情况下,所有请求都是异步传送的,如果想要一个同步的请求,可以把该参数设置为false。跨域请求以及dataType为“jsonp”的请求不支持同步选项。值得注意的是,同步请求可能造成浏览器短时的“锁定”,在请求执行期间无法做出任何其他响应。在jQuery1.8版本中,对jqXHR使用async: false会引起过时声明;并且,你不能使用jqXHR的jqXHR.done()或者jqXHR.success()方法,相应的要使用success/error/complete回调参数选项才行。

3.beforeSend
  类型:Function( jqXHR jqXHR, PlainObject settings )
  这是一个请求前回调函数,可以用来在请求发送之前修改jqXHR(在jQuery1.4.x版本中是XMLHTTPRequest对象)。如果返回值为false,将会取消该次请求。在jQuery1.5中,无论什么请求类型,beforeSend函数都会被调用。

4.cache(缺省:true,但当dataType为“script”或者“jsonp”时候,缺省值是false)
  类型:Boolean
如果设置为false,将会强制浏览器不缓存请求的页面。注意:设置为false时,只在HEAD或者GET请求下能正确工作。它的工作方式是在GET请求参数后面拼接上“_={timestamp}”。

5.complete
  类型:Function( jqXHR jqXHR, String textStatus )
  当一个请求完成后将会调用该函数(特别注意:是当success或者error回调函数执行完成后才调用该函数)。参数中的textStatus有”success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, “parsererror” 这些种类。在jQuery1.5版本中,该选项还可以接收函数数组,其中的各个函数将会按顺序调用。

6.contents
  类型:PlainObject
  这个对象是“字符串/正则表达式”这样的键值对的集合,这决定了jQuery如何解析返回值,一般是鉴定content type。

7.contentType(缺省:’application/x-www-form-urlencoded; charset=UTF-8’)
  类型:String
  当给服务器发送数据时会使用这个参数指定的类型。默认值能很好地适用于大多数情况。如果你在$.ajax()中显示地写明了该参数,那么即使没有数据,也会给服务器发送数据。在jQuery1.6中,可以通过设置为false来告诉jQuery不要设置http请求头中的content type参数。注意:W3C的XMLHttpRequest规范规定,字符集总是UTF-8。因此指定其他字符集不会让浏览器强制转换编码方式。还要注意:对于跨域请求,如果contentType设置的不是application/x-www-form-urlencoded, multipart/form-data, or text/plain这三个中的一个,将会触发浏览器向服务器发送一个含有预检功能HTTP-OPTIONS方法的请求,用以判断实际发送的请求是否安全。

8.context
  类型:PlainObject
  这个参数指定的对象是ajax相关的所有回调函数的作用域。默认情况下,是一个代表着在调用中使用的ajax配置项的对象。比如,指定一个DOM元素作为context将会使得它(这个元素)成为complete这个回调函数的上下文环境(作用域),如下代码:

1
2
3
4
5
6
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});

9.converters(缺省:{“* text”: window.String, “text html”: true, “text json”: jQuery.parseJSON, “text xml”: jQuery.parseXML})
  类型:PlainObject
  这是一个数据类型到数据类型转换的配置项,每个值都是一个函数,它返回响应值转换好的值。以上默认值表示:

  • “* text”: window.String—调用String方法将任意内容转换为字符串。
  • “text html”: true—文本转换为HTML(true表示不需要转换,直接返回)。
  • “text json”: jQuery.parseJSON—调用jQuery.parseJSON方法将文本转换为JSON。
  • “text xml”: jQuery.parseXML—调用jQuery.parseXML方法将文本转换为XML。

10.crossDomain(缺省:同域请求为false,跨域请求为true)
  类型:Boolean
  设置为true后将允许服务端重定向至另一个域名。

11.data
  类型:PlainObject 或 String 或 Array
  这里设置的是将要发送给服务端的数据。如果不是一个字符串,将会被转换成查询字符串的形式。对于GET请求,它将会被添加在url尾部。可以参考“processData”这个选项来阻止这个自动的过程。给data设置的值必须是键值对形式。如果data的类型是array,那么如果序列化同键多值的元素,将取决于“traditional”这个配置项(下面将会讲述)。

12.dataFilter
  类型:Function( String data, String type ) => Anything
  这个是用来处理XMLHttpRequest原生响应数据的函数。有预处理净化响应的功能。你应该返回净化后的数据。函数接收两个参数,一个是服务器返回的原生数据,另一个是dataType参数指定的内容。

13.dataType(缺省:Intelligent Guess (xml, json, script, or html))
  类型:String
  该参数指定你想要从服务器获取的数据类型。如果你没有指定,那么jQuery会尝试根据响应的MIME类型来推断。 (XML MIME type 将会输出XML, 在jQuery1.4中JSON将会输出一个JavaScript对象, script将会执行一段脚本, 其他任何类型将会作为字符串返回),可选项(同时也是下面将要提到的success回调函数的第一个参数)有:

  • “xml”:返回一个jQuery能够处理的XML文档。
  • “html”:将HTML作为纯文本返回,其中包含的标签将会在插入DOM元素时起作用。
  • “script”:将响应结果视为js代码执行,并且返回纯文本。默认情况下会通过在URL中附加查询字符串“_=[TIMESTAMP]”的方式来禁用缓存结果,除非显式设置了cache参数为true。注意: 在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。
  • “json”:将响应结果视为JSON进行解析,并且返回一个JavaScript对象。除非在请求参数中显式声明jsonp: false,否则跨域时写为“json”都会被转化为“jsonp”。JSON数据将会以严格方式进行解析,任何格式有误的JSON都会被拒绝并抛出错误。另外,在jQuery1.9中,空的返回值也是不被允许的,取而代之地,服务端必须返回一个null或者{}
  • “jsonp”:以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加”?callback=?”。默认情况下会通过在URL中附加查询字符串“_=[TIMESTAMP]”的方式来禁用缓存结果,除非显式设置了cache参数为true。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • “text”: 指定返回纯文本字符串。

    注:一种“多样,以空格分隔”的写法—在jQuery1.5中,jQuery可以对dataType进行转化,从请求头中Content-Type转化成你需要的形式。比如,如果你想让一个text响应被视作XML进行处理,那么dataType这个参数就可以写为”text xml”。再有,你也可以让一个返回JSONP类型数据的请求的响应被视为text进行接收,并且视为XML进行解析:”jsonp text xml”。类似的,可以使用”jsonp xml”简写,首先会尝试从jsonp到xml的转换,如果转换失败,就先将jsonp转换成text, 然后再由 text转换成xml。

14.error
  类型:Function( jqXHR jqXHR, String textStatus, String errorThrown )
  如果请求失败将会调用此函数。该函数接收3个参数:第一个是jqXHR(jQuery1.4.x版本中是XMLHttpRequest)对象;第二个是描述错误类型的字符串;第三个是可选的异常对象。其中,第二个参数除了“null”以外的可能值有“timeout”,“error”,“abort”,“parsererror”。当发生一个HTTP错误时,第三个参数将会接收HTTP响应状态的文本部分,比如“Not Found”或“Internal Server Error”。在jQuery1.5版本中,该选项还可以接收函数数组,其中的各个函数将会按顺序调用。注意:该参数不会被跨域脚本或者跨域JSONP请求调用。

15.global(缺省:true)
  类型:Boolean
  该参数决定是否触发上文中分类里提到的第一类函数—全局Ajax事件处理函数(Global Ajax Event Handlers)。此参数可用来控制不同的ajax事件。

16.headers(缺省:{})
  类型:PlainObject
  该参数附加的键值对将随使用XMLHttpRequest传输的请求一起发送。X-Requested-With: XMLHttpRequest总是会被添加上,但是它的默认值XMLHttpRequest在此可以改变。此处设置的值可以被beforeSend中的设置覆盖。

17.ifModified(缺省:false)
  类型:Boolean
  该参数将设置只有当上次请求的响应改变时,请求才能成功。这是通过检查HTTP响应报文中的Last-Modified字段实现的。默认值是false,忽略HTTP头信息。在jQuery1.4中,也会检查服务器指定的’etag’属性来确定数据没有被修改过。

18.isLocal(缺省:取决于当前的位置协议)
  类型:Boolean
  允许当前环境被认定为“本地”,(如文件系统),即使jQuery默认情况下不会这么做。以下协议目前公认为本地:file, *-extensionwidget。如果isLocal设置需要修改,建议在$.ajaxSetup()方法中这样做一次。

19.jsonp
  类型:String
  通过该参数可以在一个jsonp跨域请求中重写回调函数的名字。这个值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分,比如说,{jsonp:'onJSONPLoad'}的结果就是传给服务器的该部分参数将会变成'onJSONPLoad=?'。在jQuery1.5版本中,设置jsonp为false将阻止jQuery向请求URL中添加 “?callback”或试图使用”=?”转换。在这种情况下,你还应该明确设置jsonpCallback参数。例如, { jsonp: false, jsonpCallback: “callbackName” }。如果你不信任ajax请求的接收服务器,那么考虑到安全因素应该将jsonp设置为false。

20.jsonpCallback
  类型:String 或 Function()
  为一个JSONP请求指明回调函数的名字。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。当你想让浏览器缓存GET请求时,可能会需要指明回调函数。在jQuery1.5中,还可以将此参数的值设置为一个函数,在这种情况下函数的返回值就是jsonpCallback的值。

21.method(缺省:“GET”)
  类型:String
  该参数指明HTTP请求将要使用的方法(比如“GET”,“POST”,“PUT”)。

22.mimeType
  类型:String
  该参数用来覆盖XHR的MIME类型。

23.password
  类型:String
  用于响应HTTP访问认证请求的密码。

24.processData(缺省:true)
  类型:Boolean
  默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送DOM文档信息或其它不希望转换的信息,请设置为false。

25.scriptCharset
  类型:String
  仅适用于当”script”传输使用时(例如,跨域的”jsonp”或 dataType选项为”script” 和 “GET”类型)。请求中使用在script标签上设置charset 属性。通常只在本地和远程的内容编码不同时使用。

26.statusCode(缺省:{})
  类型:PlainObject
  一组数值的HTTP代码和函数对象,当响应中有对应的状态码时,相应的函数将会被调用。例如,如果响应状态是404,将触发以下警报:

1
2
3
4
5
6
7
  $.ajax({
statusCode: {
404: function() {
alert( "page not found" );
}
}
});

如果请求成功,则状态码函数将会获得与success回调函数相同的参数;如果返回了错误(包括3XX重定向),则会获得与error回调函数相同的参数。

27.success
  类型:Function( Anything data, String textStatus, jqXHR jqXHR )
  请求成功将会调用该函数,该函数有3个函数:第一个是data,如果请求中指明了dataType参数或者dataFilter回调函数,返回数据将会按照指定格式进行格式化;第二个是描述状态的字符串;第三个是jqXHR(jQuery1.4.x版本中是XMLHttpRequest)对象。在jQuery1.5版本中,该选项还可以接收函数数组,其中的各个函数将会按顺序调用。

28.timeout
  类型:Number
  设置请求超时时间(毫秒为单位)。此设置将覆盖$.ajaxSetup() 里的全局设置。超时时间的计算是根据$.ajax成功调用的时间,如果有其他请求正在进行并且浏览器没有可用连接,那么有可能一个请求在发送之前就已经超时了。在 jQuery 1.4.x 及更低版本中, 如果请求超时,XMLHttpRequest对象是处于无效状态;访问任何对象的成员可能会抛出一个异常。只有在 Firefox 3.0+,script 和 JSONP请求不会因超时而取消;即使是超时后到达的脚本也将运行。

29.traditional
  类型:Boolean
  如果你想要用传统的方式来序列化数据,那么就设置为true。

30.type(缺省:’GET’)
  类型:String
  是method的别名,如果使用jQuery1.9.0之前的版本,应使用type

31.url(缺省:当前页URL)
  类型:String
  请求将要送达的地址。

32.username
  类型:String
  用于响应HTTP访问认证请求的用户名。

33.xhr(缺省:ActiveXObject (IE), XMLHttpRequest (其他))
  类型:Function()
  用于重写或者提供一个增强的XMLHttpRequest 对象。

34.xhrFields
  类型:PlainObject
  “文件名-文件值”对构成的对象,用于设定原生的 XHR对象。例如,如果需要的话,在进行跨域请求时,你可以用它来设置withCredentials为true。

1
2
3
4
5
6
$.ajax({
url: a_cross_domain_url,
xhrFields: {
withCredentials: true
}
});

在 jQuery 1.5中, withCredentials属性不会传递给原生的XHR,从而对于需要使用此属性的CORS请求,则只能忽略这个属性。出于这个原因,应使用jQuery1.5.1以上版本。


注意事项

  $.ajax()方法是jQuery中所有和ajax(异步请求)相关内容的基础。有时候我们不需要非得直接调用这个函数,因为有其他更高层一些的可选函数比如$.get().load()可供我们使用并且更易用。但是,如果有一些生僻的参数需要指定,还是$.ajax()更加灵活。$.ajax()是更加全面的,这也是为什么要深入讨论其每一个参数的目的。
  在最简单的情况下,$.ajax()可以无参数使用:$.ajax();
注意:上述使用方式是无参的,默认参数的设定可以通过$.ajaxSetup()函数来指定。另外,这种无参的使用方法,对加载当前页面的内容,并且对这个内容没有任何操作。如果想使用这个结果,则可以自己写一个回调函数。


jqXHR对象

  在jQuery1.5及以上版本中,由$.ajax()返回的jQuery XMLHttpRequest (jqXHR)是浏览器原生XMLHttpRequest的一个超集。比如说,它具有responseText、responseXML属性以及getResponseHeader()方法。当传输机制不是是XMLHttpRequest时(例如,一个JSONP请求脚本,返回一个 时),jqXHR对象尽可能的模拟原生的XHR功能。
  在jQuery1.5.1及以上版本中,jqXHR对象还包含了overrideMimeType方法 (它在jQuery 1.4.x中是有效的,但是在jQuery 1.5中暂时的被移除)。.overrideMimeType()方法可用在beforeSend()的回调函数中,例如,修改响应的Content-Type信息头:

1
2
3
4
5
6
7
8
9
10
11
  $.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});

从 jQuery1.5开始,$.ajax()返回的jqXHR对象实现了Promise接口, 使它拥有了Promise的所有属性,方法和行为。当$.ajax()请求结束后,这些方法将有一个或多个函数作为参数传入。通常对于一个请求允许对多个回调函数进行赋值,甚至允许你在请求已经完成后,对回调函数进行赋值(如果该请求已经完成,则回调函数会被立刻调用)。

  • jqXHR.done(function( data, textStatus, jqXHR ) {});
      一个可供选择的 success 回调选项的构造函数,.done()方法取代了的过时的jqXHR.success()方法。
  • jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
      一种可供选择的 error 回调选项的构造函数,.fail()方法取代了的过时的.error()方法。
  • jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
      一种可供选择的 complete 回调选项的构造函数,.always()方法取代了的过时的.complete()方法。
      在响应一个成功的请求后,该函数的参数和.done()的参数是相同的:data, textStatus, 和 jqXHR 对象.对于失败的请求,参数和.fail()的参数是相同的:jqXHR 对象, textStatus, 和 errorThrown。
  • jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
      包含了 .done() 和 .fail()方法的功能,(从 jQuery 1.8 开始)允许底层被操纵。

弃用注意:jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回调从jQuery 1.8开始被弃用。它们将最终被取消,应做好准备使用jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "complete" );
});

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
alert( "second complete" );
});

this在所有的回调中所指向的引用,是上文提到的参数之一-context所指定的内容;如果没有指定context这个参数,那么this所引用的是Ajax配置项本身。

  为了向后兼容XMLHttpRequest ,jqXHR对象暴露了下列属性和方法:

  • readyState
  • status
  • statusText
  • responseXML 和/或 responseText:视底层响应是xml还是text而不同。
  • setRequestHeader(name, value):从标准出发,将旧值替换为新值,而不是将旧值和新值联系起来。
  • getAllResponseHeaders()
  • getResponseHeader()
  • statusCode()
  • abort()

  这里并没有提供onreadystatechange属性,因为所有可以想到的需求都可以通过done, fail, always, 和 statusCode来实现。


回调函数队列(Callback Function Queues)

  beforeSend, error, dataFilter, success 和 complete都可以接收(多个)适时调用的回调函数。从jQuery1.5开始, fail , done ,和从jQuery 1.6开始的always回调钩子(hooks)采用先入先出队列管理。这意味着你可以为每个挂钩分配多个回调。
$.ajax()提供的回调hooks如下:

  1. beforeSend 在发送请求之前调用,它接收jqXHR对象和settings作为参数对象。
  2. error 在请求出错时调用。它们接受jqXHR ,字符串表示的错误类型,以及异常对象(如果有的话)。一些内置的错误会将 “abort”, “timeout”, “No Transport” 等字符串作为异常对象。
  3. dataFilter 在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
  4. success 当请求成功并接收到返回数据之后调用。传入返回后的数据,以及包含成功代码的字符串和jqXHR对象。
  5. Promise callbacks.done(), .fail(), .always(), 和 .then(),按注册顺序依次调用。
  6. error 请求完成时,无论是在失败或成功,它们按顺序依次执行回调。他们收到jqXHR对象,以及一个包含成功或错误代码。

数据类型(Data Types)

  不同类型的$.ajax()调用返回值在传递给success处理之前会交付给不同的预处理过程。至于交给哪种过程,默认是根据响应的Content-Type属性,但是也可以通过dataType属性显式声明。
  可接受的类型有: text, html, xml, json, jsonp, 和 script.
  如果指明了text或者html,将不会有预处理过程。数据只是简单地传递给了success处理程序,并且通过jqXHR对象的responseText属性也可以访问到。
  如果指明了xml,那么在交付success处理之前,会先由jQuery.parseXML进行处理得到一个XMLDocument再传递。同时,这个XML文档通过jqXHR对象的responseXML属性也可以访问到。
 如果指明了json,那么在交付success处理之前,会先由jQuery.parseJSON进行处理得到一个对象再传递。同时,这个XML文档通过jqXHR对象的responseJSON属性也可以访问到。
  如果指明了script,那么在交付success处理之前,$.ajax()会直接执行从服务器接收到的脚本。
  如果指明了jsonp,那么在交付success处理之前,$.ajax()会自动在URL后面拼接查询字符串callback=?。此时,$.ajax()的jsonp和jsonpCallback参数可以分别用于指明查询参数的名字和JSONP回调函数的名字。服务器应该返回合法的JavaScript传递给JSON响应回调函数。在将包含JSON对象的响应交付给success处理之前,$.ajax()会执行返回的JavaScript,并调用回调函数。


向服务器发送数据(Sending Data to the Server)

  默认情况下,ajax方法使用HTTP的GET发送,如果需要POST,可以通过type参数指明。这个选项决定了data参数中的内容将以何种形式发送给服务器。由w3c标准可知,使用POST方法时,数据总是以UTF-8编码进行传送。
  data参数的内容,既可以使用key1=value1&key2=value2这种形式,也可以使用{key1: 'value1', key2: 'value2'}这种形式。如果使用了后者,那么数据在发送之前将会使用jQuery.param()方法将之转化为查询字符串。如果想避免这种转化过程,可以将processData设置为false。如果想要给服务器发送XML对象,那么这种转化过程可能会出问题,这时候,最好把contentType=”application/x-www-form-urlencoded”换为其他更合适的MIME类型。


高级选项(Advanced Options)

  global选项用于阻止响应注册的回调函数,比如.ajaxSend(), .ajaxError(),以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在.ajaxSend()里禁用这个。跨域脚本和JSONP请求,全局选项自动设置为false。
  如果服务器需要HTTP认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。
  Ajax请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。请求超时这个参数通常就保留其默认值,要不就通过$.ajaxSetup()来全局设定,很少为特定的请求重新设置timeout选项。
  默认情况下,请求总会被发出去,但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果,可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置ifModified为true。
scriptCharset允许给标签的请求设定一个特定的字符集,用于script 或者 jsonp类似的数据。当脚本和页面字符集不同时,这特别好用。
Ajax中的第一个字母“A”是指“asynchronous”,意味着操作是并行完成的且完成的顺序没有先后关系。$.ajax()方法的async参数默认是true,表明请求发送出去后代码还可以继续执行。将该参数设置为false是强烈不建议的,因为这可能在成浏览器无响应
  $.ajax()函数返回它创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象,但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了,但依然提供一个底层接口来观察和操控请求。比如说,调用对象上的.abort()可以在请求完成前挂起请求。


可扩展的Ajax(Extending Ajax)

  对于jQuery1.5及以上版本,jQuery的ajax实现包含了prefilters, transports, 和 converters,这为你扩展ajax提供了极大地灵活性。


使用转换器(Using Converters)

  $.ajax()的转换器支持的数据类型映射到其它数据类型。但是,如果你想把自定义数据类型映射到一个已知的类型(json等),必须通过contents选项在响应的Content-Type属性和实际的数据类型之间的添加一个相关的转换函数:

1
2
3
4
5
6
7
8
9
10
11
  $.ajaxSetup({
contents: {
mycustomtype: /mycustomtype/
},
converters: {
"mycustomtype json": function( result ) {
// Do stuff
return newresult;
}
}
});

这个额外的对象是必要的 ,因为响应中的Content-Types和实际数据类型之间从未有过严格的一对一对应关系。

转换一个支持的类型(例如text, json)成自定义数据类型,然后再转换成另一个支持的类型,使用直通转换器:

1
2
3
4
5
6
7
8
9
10
11
12
$.ajaxSetup({
contents: {
mycustomtype: /mycustomtype/
},
converters: {
"text mycustomtype": true,
"mycustomtype json": function( result ) {
// Do stuff
return newresult;
}
}
});


附加提醒

  1. 考虑到浏览器安全限制,大多数ajax请求遵循同源策略。请求不能成功从其他域名,子域名,端口或者协议获取数据。
  2. script和JSONP请求不受同源策略限制。

总结

  本篇详细总结了$.ajax()方法相关的方方面面。平时只是使用到了一种很少一部分参数,其实$.ajax()考虑到了这么多细节。本篇主要参考了jQuery官网的API文档,现在也有一些中文文档,但是其中有的翻译很晦涩。于是结合原文和这些中文翻译进行了重新整理,其中肯定有一些不清楚的或者错误的地方,还需要进一步发现。