jQuery学习--$.ajax()(Asynchronous JavaScript and XML)方法详解

常用术语:

  • AJAX:

     	(Asynchronous JavaScript and XML)(异步 JavaScript 和 XML)是指一种创建交互式网页应用的网页开发技术,是一种在无需重新加载整个网页的情况下,能够与后台程序进行同步(阻塞式)和异步(非阻塞式)请求,从而达到更新当前页面指定部分内容的技术。
    
  • XML:

     	可扩展标示语言(Extensive Markup Language),是Internet上最具权威的数据表示和数据交换标准 。
    

工作流程图示:

ajax前后台数据请求流程
AJAX是基于现有的Internet标准

  • XMLHttpRequest 对象 (异步的与服务器交换数据) [包装升级了 XMLHttpRquest对象的方法]
  • JavaScript/DOM (信息显示/交互)[js代码 操作html dom ]
  • CSS (给数据定义样式) [css 实时调整页面的样式]
  • XML (作为转换数据的格式)[前后台的数据交互格式标准]

注 : A J A X 应 用 程 序 与 浏 览 器 和 平 台 无 关 的 ! \color{red}注: AJAX应用程序与浏览器和平台无关的! AJAX

$.ajax() 方法详解
请求格式:

jQuery.ajax( url [, settings ] ) 或者 jQuery.ajax([settings])
[名称] //文档里面 表示 参数 这里指的是一个 PlainObject (简单对象)

注:就是键值对的 js 对象 ,也可以使用 $.ajaxSetup 来设置选项

参数setting 详解:

  • async 默认值(true)
类型 : Boolean(布尔型)
注释:默认的 所有ajax 请求都是 异步执行的。如果你需要同步请求 则更改此选项值为 false ,跨域请求 并且 dataType类型为 "jsonp"的请求 不支持 同步请求。请注意,同步请求可能会暂时锁定浏览器,阻塞当前页面的其他执行,请求未完成前其他操作都不可进行。
  • beforeSend ajax事件
 类型:Function(jqXHR jqXHR,PlainObject  setting )
 // jqXHR 是一个 XMLHttpRequest对象 
 注释:请求发送前的一些过滤 或者操作可以在此进行。
 比如设置请求头, cookie 等等,一个jqXHR 和 setting 对象 作为参数传递		进入 这个匿名函数中,如果 return false 则会终止此次请求
  • cache 默认(true 如果dataType 为 jsonp 或者 script 则默认值为 false)
类型: boolean(布尔值)
注释:如果 设置为false 则请求数据不会被浏览器缓存,并且 false 生效 只针对 HEADGET 请求 ,它的工作方式 是将时间戳 附加到GET请求url 参数里"_={timestamp}" ,对于其他类型的 请求 则无需如此操作 
  • complete ajax事件
类型:Function( jqXHR jqXHR, String textStatus )
注释:当请求完成后调用此方法(在error和success方法执行后调用),这个方法传递进来两个参数,jqXHR(XMLHTTPRequest) 对象, 一个请求状态返回值 , ("success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror").
  • contents
类型: PlainObject[简单对象]
注释:一个字符串/正则表达式对的对象,根据它的内容类型决定jQuery如何解析响应。(jquery 1.5 添加)
  • contentType (默认值: ‘application/x-www-form-urlencoded; charset=UTF-8’)
类型: Boolean(布尔值) or String(字符串)
注释:向服务器发送请求数据时,使用此内容类型,默认类型为 "application/x-www-form-urlencode;charset = utf-8 ",大多数情况此类型就够用了。
如果此值设置为false ,在没有数据的情况下 ajax会去掉此内容的发送。
注: W3C XMLHttpRequest规范规定字符集总是UTF-8;指定另一个字符集 不会强迫浏览器改变编码
注:对于跨域请求,将内容类型设置为application/x-www-form-urlencoded、multipart/form-data或text/plain之外的任何内容都将触发浏览器向服务器发送提前设定前选项 内容。
  • context
类型:PlainObject (简单对象)
注释:这个context 对象可以被所有ajax中的回调函数 使用。 为其指定一个对象
//示例:
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});
  • converters (内容类型 解释转换器) (默认: {"* text": window.String, “text html”: true, “text json”: jQuery.parseJSON, “text xml”: jQuery.parseXML})
类型:PlainObject[简单对象]
注释:将接受到的数据 是否进行转化,
包含数据类型到数据类型转换器的对象。每个转换器的值都是一个函数,该函数返回转换后的响应值。
示例:
converters: {
      "text json": function(data) {
          return data;
      }
  }
  • crossDomain[跨域请求开启] (默认: false for same-domain requests, true for cross-domain requests)
类型:Boolean(布尔值)
注释:如果您希望在同一域中强制一个跨域请求(例如JSONP),请将该跨域的值设置为true。例如,这允许服务器端重定向到另一个域。默认不做任何修改
  • data (推送的数据)
类型: PlainObject(简单对象) or String(字符串) or Array(数组)
注释:要发送到服务器的数据。它被转换成一个查询字符串,如果还不是一个字符串的话。它被附加到GET-requests的url中。请参阅processData选项以防止这种自动处理。对象必须是键/值对。如果传递某一项的 值是一个数组,jQuery将traditional  选项的设置 为 true,用相同的键序列化多个值。
示例:
data:"a=1&b=1"
data:{
key1:value1 ,key2:value2 
}
//传递的值为 数组时候 要开启 traditional 的选项为true 才能正常的序列号arr1的值为 请求参数
data:{
key1:arr1,key2:value2
}
  • dataFilter (数据过滤筛选 预处理)
类型: Function( String data, String type ) => Anything
注:用于处理XMLHttpRequest的原始响应数据的函数。这是一个预过滤函数,用于清理响应。您应该返回经过消毒的数据。该函数接受两个参数:从服务器返回的原始数据和'dataType'参数。
  • dataType
类型: String(字符串)
注释:您期望从服务器返回的数据类型。如果没有指定,jQuery将尝试根据响应的MIME类型推断它(XML MIME类型将产生XML,在1.4 JSON中将产生一个JavaScript对象,在1.4 script中将执行该脚本,其他任何内容都将作为字符串返回)。可用类型(以及作为成功回调的第一个参数传递的结果)
示例:
"xml": 返回一个 可以被jquery处理的XML 文档 。
"html": 返回的html代码 作为纯文本
"script": 将响应计算为JavaScript并以纯文本形式返回。通过将查询字符串参数_=[TIMESTAMP]附加到URL来禁用缓存,除非将缓存选项设置为true。注意:这将把post变成远程域请求的get。
"text": 一个纯文本字符串
"json": 将响应计算为JSON并返回一个JavaScript对象。具有回调占位符的跨域“json”请求,例如?callback=?,使用JSONP执行,除非请求在其请求选项中包含JSONP: false。严格解析JSON数据;任何格式错误的JSON都会被拒绝,并抛出一个解析错误。在jQuery 1.9中,一个空的响应也会被拒绝;服务器应该返回一个null{}的响应。(有关正确的JSON格式的更多信息,请参见json.org。)
"jsonp": 使用JSONP加载JSON块。在URL的末尾添加一个额外的“?callback=?”来指定回调。除非将缓存选项设置为true,否则通过将查询字符串参数“_=[TIMESTAMP]”附加到URL来禁用缓存。

注:
多个空格分隔的值:从jQuery 1.5开始,jQuery可以将数据类型从它在Content-Type头部接收到的数据类型转换为您需要的数据类型。例如,如果希望文本响应被视为XML,则使用“text XML”作为数据类型。您还可以发出JSONP请求,将其作为文本接收,并用jQuery将其解释为XML:JSONP text XML”。类似地,类似“jsonp xml”这样的简写字符串将首先尝试从jsonp转换为xml,如果转换失败,则首先尝试从jsonp转换为文本,然后再从文本转换为xml。
  • error(ajax 事件)
类型:Function( jqXHR jqXHR, String textStatus, String errorThrown )
注释:当请求失败时候 执行这个方法,这个方法接受传递来的三个参数。
参数1 jqXHR :jqXHR (XMLHttpRequest) 对象
参数2 textStatus 请求状态值 (一个描述发生的错误类型的字符串)
值得可能为  (besides null) are "timeout", "error", "abort", and "parsererror". )
参数3 errorThrown  :当HTTP错误发生时,errorthrow接收HTTP状态的文本部分,如“Not Found”或“Internal Server Error.”。
注:(HTTP/2中,它可能是一个空字符串)在jQuery 1.5中,error选项 可以接受一个函数数组。每个函数将依次调用。注意:对于跨域脚本和跨域JSONP请求,不调用此处理程序。这是一个Ajax事件。
接收一个 数组函数 但是传参 是个问题
示例:
$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : [foo, bar]
});
function foo(){

}
function bar(){

}
  • global (默认: true)
类型:
默认:Boolean(布尔值)
注释:是否为该请求触发全局Ajax事件处理程序。  默认值是 true 开启状态,
如果设置为false, 将会阻止全局 ajax event 比如e ajaxStart or ajaxStop 的触发   ,这选项 可以用来控制各种 Ajax事件 的触发。

ajax event 有 全局 和本地的两种区分 。
执行顺序如下:
-ajaxStart[global event] : 如果启动了一个Ajax请求,并且当前没有运行其他Ajax请求,则会触发此事件。
-beforeSend (Local Event) :只在实例化的 ajax请求中 内部调用,
这个事件是在Ajax请求启动之前触发的,它允许您修改XMLHttpRequest对象(如果需要,还可以设置额外的头信息)。
-ajaxSend (Global Event) :全局ajax 调用事件 。在运行ajax请求之前会触发此全局事件。
-success (Local Event) :只在实例化的 ajax请求中 内部调用, 只有请求成功时才调用此事件(服务器没有错误,数据也没有错误)。
-ajaxSuccess (Global Event) : 只有请求成功时才调用此事件。
- error (Local Event) : 只有在请求发生错误 比如超时 服务器错误 时才调用此事件(对于请求,永远不可能同时出现错误和成功回调)。
- ajaxError (Global Event) :和 ajax 内部 error 处理一样的
- complete (Local Event) :无论请求是否成功,都会调用此事件。即使对于同步请求,也总是会收到完整的回调。
- ajaxComplete (Global Event) : 此事件的行为ajax 内部complete 事件相同,并且将在Ajax请求每次完成时触发。
- ajaxStop (Global Event) 注意:
如果不再处理Ajax请求,则触发此全局事件。 就是所有ajax 请求全部处理完毕后 就调用此函数
注意: ajaxStop 和 ajaxStart 1.9 之前和 1.9 之后的写法

 // 1.9 以前写法
        $("#loading").ajaxStart(function(){
            $(this).show();
        }).ajaxStop(function(){
            $(this).hide();
        })
        // 1.9+ 之后写法
        $(document).ajaxStart(function(){
            $("#loading").show();
        }).ajaxStop(function(){
            $("#loading").hide();
        })

        // 以上两种简写
        // 1.9 以前
        $("#loading").on("ajaxStart ajaxStop",function(){
            $(this).toggle();
        })
        // 1.9+ 以后
        $(document).on("ajaxStart ajaxStop",function(){
            $("#loading").toggle();
        })
————————————————
可以试试$(document).ajaxStart()和$(document).ajaxStop()

$(document).ajaxStart(function(){

    $("#tip").html("正在加载中...");

})

//或者使用 bind 

$(document).bind('ajaxStart',function(){    console.log('ajaxStart 开始')        }).bind('ajaxStop',function(){    console.log('ajaxStart 结束')        }).bind('ajaxComplete',function(){ console.log('ajaxComplete 完成') })

//查看元素 绑定的所有 事件 
getEventListeners(document);
或者  $(document).data("events") ;$(document).data('events')  注意是括号 
或者 $._data( node, "events" );
注: 
另:
以上默认是在chrome浏览器下做的操作,其实在Firefox下也是类似的,相信作为一个技术人员,你应该能举一反三的。至于IE嘛,呃…当我没说哈。:)

更新:
1.为省去查看属性的麻烦,jquery1.x可以直接在控制台执行$.cache[$('#clickMe').get(0)[$.expando]]输出元素上绑定的东西,而不是先去查看元素上jQueryxxxxxxx的属性的值了

2.经过一篇查阅和测试。有一个新的目前最省力而且jquery1,jquery2都适用的办法是,直接在控制台输入$._data($('#clickMe').get(0)),即可把绑定在元素的东西都输出来。但是,从jquery2的源码的注释中发现,$._data会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼,不如授人以渔嘛,:)

兼容 1.各个版本的写法 如下 
.get(0)[0] 效果一样 都是直接获取 数组第一个元素的
var eventsData = $.data($('#thumb_3560')[0],'events') || $._data($('#thumb_3560')[0],'events');
或者简写 : 会读取所有的 绑定事件 
 $.data($('#thumb_3560')[0])  ||$._data($('#thumb_3560').get(0))

  • headers (默认值 : {})
类型:PlainObject(简单对象) 
注释:一个附加header  键/值对的对象,与使用XMLHttpRequest传输的请求一起发送。头部信息 X-Requested-With: XMLHttpRequest 始终被添加,但其默认的XMLHttpRequest值可以在这里更改。header 设置中的值也可以在beforeSend 方法中被覆盖。(版本补充道:1.5)
//示例  注意 键值对 必须都是字符串 引号括起来 否则无法被识别
headers:{
"X-Requested-With":"aaaaa"
},
  • ifModified (默认值: false)
类型: Boolean(布尔值)
注释:仅当响应自上次请求以来发生更改时,才允许请求成功。这是通过检查最后修改的标题来完成的。 默认值为false,忽略标题。在jQuery 1.4中,该技术还检查服务器指定的“etag”以捕获未修改的数据。 
个人:来确定 是否更新 浏览器的数据缓存  。和 cache 搭配使用, 跨域请求 jsonp 等 不存在这个情况
  • isLocal (默认值: depends on current location protocol)
类型: Boolean(布尔值)
注释:允许将当前环境识别为“local”(例如,文件系统),即使jQuery在默认情况下不将其识别为本地环境。以下协议目前被视为本地协议: file, *-extension,widget。如果isLocal设置需要修改,建议在$. ajaxsetup()方法中修改一次。(版本补充道:1.5.1)
  • jsonp
类型: String or Boolean
注释:在JSONP请求中覆盖回调函数名。 
这个值将在'callback=?url中查询字符串的一部分。因此{jsonp:'onJSONPLoad'}将导致'onJSONPLoad=?传给了服务器。从jQuery 1.5开始,将jsonp选项设置为false可以防止jQuery添加“?”回调"字符串到URL或试图使用"=?"转换。在这种情况下,您还应该显式地设置jsonpCallback设置。例如,{jsonp: false, jsonpCallback: "callbackName"}。如果您不信任Ajax请求的目标,出于安全原因,可以考虑将jsonp属性设置为false
  • jsonpCallback
类型: String or Function()JSONP请求指定回调函数名称。这个值将代替jQuery自动生成的随机名称。最好让jQuery生成一个惟一的名称,因为这样更容易管理请求并提供回调和错误处理。当您希望更好地启用GET请求的浏览器缓存时,可能需要指定回调。从jQuery 1.5开始,您还可以使用一个函数来进行这种设置,在这种情况下,jsonpCallback的值被设置为该函数的返回值。
  • method (默认值: ‘GET’)
类型:http 的请求 方法 (e.g. "POST", "GET", "PUT").
//注: e.g. 是举例说的意思 例如   全称是希腊语:exempli gratia. 相当于英语的for example 
  • mimeType (Multipurpose Internet Mail Extensions 多用途互联网邮件扩展 类型 )
类型: String 
注释:一个覆盖XHR mime类型的mime类型。
个人: mimeType 和 contentType  Content-Type(Mime-Type) 一个是文档类型 一个是内容类型 
当web服务器收到静态的资源文件请求时,依据请求文件的后缀名在服务器的MIME配置文件中找到对应的MIME Type,再根据MIME Type设置HTTP Response的Content-Type,然后浏览器根据Content-Type的值处理文件。

这里设置这个参数 会把接受到的响应 xhr的 mimetype 类型更改 
  mimeType :"json",//服务器 返回的 json 
  mimeType :"html", //更改为 html 
  注:一般不怎么用 保留服务器返回的数据原数据格式即可
  • password
类型:String
注释: 如果服务器 http 开启的身份验证 则XMLHttpRequest 则需要传递此值 
和username 一起使用
  • username
类型: String
注释:如果服务器 http 开启的身份验证 则XMLHttpRequest 则需要传递此值 
和password一起使用
类型:
注释:默认情况下,data中的数据对象 将被处理并转换为查询字符串,并指定默认的的内容类型 content-type  为“application/x-www-form-urlencoded”,如果你想传递原始的未处理的数据 DOMDocument 则设置此选项为 false 
  • scriptAttrs
类型: PlainObject(简单普通的对象)
注释:定义在“script”或“jsonp”请求中使用的具有附加属性的对象。键表示属性的名称,值是属性的值。如果提供了这个对象,它将强制使用script-tag 传输。例如,这可以用来设置nonce、integrity或crossorigin属性,以满足内容安全策略需求。(版本补充道:3.4.0
  • scriptCharset
类型: String
注释:仅在使用“script”传输时应用。在请求中使用的脚本标记上设置charset属性。当本地页上的字符集与远程脚本上的字符集不同时使用。或者,可以在scriptAttrs中指定charset属性,这也将确保使用“脚本”传输。
  • statusCode
类型: PlainObject
HTTP状态码 和函数的一个对象,当响应具有相应的代码时调用该对象。例如,当响应状态为404时,将发出以下警告:
示例:
$.ajax({
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  }
});
注:如果请求成功,状态代码函数采用与成功回调相同的参数;如果它导致一个错误(包括3xx重定向),则它们采用与错误回调相同的参数。

  • success ( Ajax Event).
类型:Function( Anything data, String textStatus, jqXHR jqXHR )
解释:此方法在请求成功后 即http状态码200 后调用。接受3个参数
参数1: 成功执行服务器响应返回的数据  
并且根据 dataType 过滤 或者 dataFilter 回调函数过滤处理 进行格式化处理
参数2: http 状态信息 
参数3: jqxhr(XMLHttpRequest对象)
注意:这个选项可以接收一个 函数数组 参数 ,并轮番执行调用
  • timeout (默认 0 无限制)
类型:number
注释:
为请求设置超时(以毫秒为单位)。值0表示没有超时。这将覆盖任何带有$. ajaxsetup()的全局超时设置。超时时间从$处开始。进行ajax调用;如果其他几个请求正在处理中,而浏览器没有可用的连接,则请求可能在发送之前超时。在jQuery 1.4。在x和以下,如果请求超时,XMLHttpRequest对象将处于无效状态;访问任何对象成员都可能引发异常。仅在Firefox 3.0+中,脚本和JSONP请求不能被超时取消;即使脚本在超时之后到达,它也会运行。
  • traditional (传统序列化 一个对象)
类型: Boolean (布尔值)
注释:如果 data 参数里面 传递了数组 ,则需要开启此选项 对数组对象 做一个传统的序列化格式转化 从而可以正常传递
如果您希望使用传统的参数序列化样式,请将其设置为true//  将数组、普通对象或jQuery对象的 序列化转化为适合用于URL查询字符串或Ajax请求的格式。如果传递了jQuery对象,它应该包含具有名称/值属性的输入元素。 
  • type (method 的别名 )
类型: String
注释:  method参数的别名 .如果您使用的是1.9.0之前的jQuery版本,那么应该使用type。 所以考虑到兼容性问题习惯使用type 
  • url (默认: 当前执行页面的url)
类型: String
注释:包含发送请求的URL的字符串。
  • xhr (default: ActiveXObject when available (IE), the XMLHttpRequest otherwise)
类型: Function()
注释:用于创建XMLHttpRequest对象的回调。如果ActiveXObject可用(),则默认为XMLHttpRequest。重载以提供自己的XMLHttpRequest实现或对工厂的增强。
  • xhrFields
类型: PlainObject(简单/普通js对象)
注释:要在本机XHR对象上设置的fieldName-fieldValue对的对象。例如,如果需要,您可以使用它将跨域请求的凭据设置为true。
$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});
注:在jQuery 1.5中,withCredentials属性没有传播到本机XHR,因此要求它的CORS请求将忽略这个标志。因此,如果您需要使用jQuery 1.5.1+,我们建议您使用它。

所有的参数 当前已经注释完毕

通常:
. A j a x ( ) 函 数 是 j Q u e r y 发 送 的 所 有 A j a x 请 求 的 基 础 。 通 常 没 有 必 要 直 接 调 用 这 个 函 数 , 因 为 有 几 个 更 高 级 的 替 代 方 法 , 如 . Ajax()函数是jQuery发送的所有Ajax请求的基础。通常没有必要直接调用这个函数,因为有几个更高级的替代方法,如 .Ajax()jQueryAjax.get()和.load(),它们更容易使用。但是,如果需要不太常见的选项,则可以更灵活地使用$.ajax()。

简单来说,$.ajax()函数可以不带参数地调用:

	$.ajax();
	注意:可以使用$. ajaxsetup()函数全局设置默认设置。
这个示例没有使用任何选项,它加载当前页面的内容,但对结果不做任何操作。要使用结果,您可以实现一个回调函数。

jqXHR 对象

jQuery 1.5中$.ajax()返回的jQuery XMLHttpRequest (jqXHR)对象是浏览器原生XMLHttpRequest对象的超集。例如,它包含responseText和responseXML属性,以及getResponseHeader()方法。当传输机制不是XMLHttpRequest(例如,JSONP请求的脚本标记)时,jqXHR对象尽可能模拟本机XHR功能。
从jQuery 1.5.1开始,jqXHR对象也包含overrideMimeType()方法(它在jQuery 1.4中可用)。x也是,但在jQuery 1.5中暂时删除了。overridemimetype()方法可以在be包皮端()回调函数中使用,例如,修改响应内容类型头:

ajax 可以调用 xhr的 done 方法 来处理接受到的响应数据

$.ajax({
  url: "https://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 ) );
    }
  });

jQuery 1.5版本中由 . a j a x ( ) 返 回 的 j q X H R 对 象 实 现 了 P r o m i s e 接 口 , 为 它 们 提 供 了 P r o m i s e 的 所 有 属 性 、 方 法 和 行 为 ( 有 关 更 多 信 息 , 请 参 阅 D e f e r r e d 对 象 ) 。 这 些 方 法 接 受 一 个 或 多 个 函 数 参 数 , 这 些 参 数 在 .ajax()返回的jqXHR对象实现了Promise接口,为它们提供了Promise的所有属性、方法和行为(有关更多信息,请参阅Deferred对象)。这些方法接受一个或多个函数参数,这些参数在 .ajax()jqXHRPromisePromise(Deferred).ajax()请求终止时被调用。这允许您在单个请求上分配多个回调,甚至在请求完成后分配回调。(如果请求已经完成,则立即触发回调。)jqXHR对象可用的承诺方法有:

jqXHR提供的方法如下

  • jqXHR.done(function( data, textStatus, jqXHR ) {});
    成功回调选项的另一种构造,请参阅deferred.done()了解实现细节。
  • jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
    fail()方法是错误回调选项的另一种构造,它替代了已废弃的.error()方法。有关实现细节,请参考deferred.fail()。
    -jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
    (added in jQuery 1.6)作为完整回调选项的另一种构造,.always()方法替代了 弃用的 .complete()方法。
    注意 :
    在响应成功的请求时,函数的参数与.done()的参数相同:data、textStatus和jqXHR对象。对于失败的请求,参数与.fail()的参数相同:jqXHR对象、textStatus和errorthrow。有关实现细节,请参阅deferred.always()。
  • jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
    整合了.done()和.fail()方法的功能,允许(从jQuery 1.8开始)对底层承诺进行操作。有关实现细节,请参考deferred.then()。
    注意: 在jquery 3.0版本中

Deprecation Notice:
从jQuery3.0开始,jqXHR.success()、jqXHR.error()和jqXHR.complete()回调将被删除。您可以使用jqXHR.done()、jqXHR.fail()和jqXHR.always()来代替。
示例:

// 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引用是传递给$的上下文选项中的对象 即调用回调函数的 对象本身。 设置中的ajax;如果没有指定上下文,这是对Ajax设置本身的引用。

–为了向后兼容XMLHttpRequest, jqXHR对象将公开以下属性和方法:

  • readyState 属性:(XMLHttpRequest 对象当前所处状态)【值范围:0-4】
注释 
值	状态	描述
0	UNSENT	XMLHttpRequest 代理已被创建, 但尚未调用 open() 方法。
1	OPENED	open() 方法已经被触发。在这个状态中,可以通过  setRequestHeader() 方法来设置请求的头部, 可以调用 send() 方法来发起请求。
2	HEADERS_RECEIVED	send() 方法已经被调用,并且响应头部和状态已经可获得。
3	LOADING	下载中; 响应体部分正在被接收。如果 responseType 属性是“text”或空字符串, responseText 将会在载入的过程中拥有部分响应数据。
4	DONE	下载操作已完成。请求操作已经完成。这意味着数据传输已经彻底完成或失败。

  • responseXML and/or responseText 属性: 当底层请求分别以xml和/或文本响应时,即服务器返回的响应内容

  • status 属性: http 状态码 比如200 404 500 etc.

  • statusText 属性: (可能是空的字符串 在 HTTP/2 协议中) :

返回一个 DOMString,其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是,它包含完整的响应状态文本(例如,"200 OK")。
只读属性 XMLHttpRequest.statusText 返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息,这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码XMLHTTPRequest.status,这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。如果请求的状态readyState的值为"UNSENT"或者"OPENED",则这个属性的值将会是一个空字符串。
 
如果服务器未明确指定一个状态文本信息,则statusText的值将会被自动赋值为"OK"
  • abort( [ statusText ] ) 方法:立即终止当前 请求 并重置 readyState为0
如果该请求已被发出,XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止,它的 readyState 属性将被置为0UNSENT )
  • getAllResponseHeaders() 方法: 获取响应所有的请求头 组合返回字符串
以字符串的形式返回所有用 CRLF 分隔的响应头,如果没有收到响应,则返回 null。 
XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头,以 CRLF 分割的字符串,或者 null 如果没有收到任何响应。 注意: 对于复合请求 ( multipart requests ),这个方法返回当前请求的头部,而不是最初的请求的头部。

注: CRLF : 对于HTTP请求格式来说,头部和主体内容之间有一个回车换行符(CRLF)是相当重要的CRLF告诉HTTP服务器主体内容是在什么地方开始的在一些互联网编程书籍中,CRLF还被认为是HTTP请求的第四部分
  • getResponseHeader(headerName) 方法 : 返回指定头部的内容
XMLHttpRequest.getResponseHeader() 方法返回包含指定头文本的字符串。

如果在返回头中有多个一样的名称,那么返回的值就会是用逗号和空格将值分隔的字符串。getResponseHeader()方法以UTF字节序列的形式返回值。搜索标题名称是不区分大小写的。
  • overrideMimeType( mimeType ) 方法: 重写由服务器返回的 MIME 类型。
注释: XMLHttpRequest 的 overrideMimeType 方法是指定一个MIME类型用于替代服务器指定的类型,使服务端响应信息中传输的数据按照该指定MIME类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到,即使服务器在响应头中并没有这样指定。此方法必须在send方法之前调用方为有效。
参数:mimeType :
一个 DOMString 指定具体的MIME类型去代替有服务器指定的MIME类型. 如果服务器没有指定类型,*那么 XMLHttpRequest 将会默认为 "text/xml".*
注: Content-Type 的值 就是 mimeType类型的 比如 
Note:  如果服务器没有指定一个Content-Type 头, XMLHttpRequest 默认MIME类型为"text/xml". 如果接受的数据不是有效的XML,将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。
示例:
req = new XMLHttpRequest();
req.overrideMimeType("text/plain");//重写服务器返回的 content-type的值 mimeType 为  "text/plain"
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();
  • setRequestHeader( name, value ) 方法: 重写请求的 头部信息
    –什么是用新值替换旧值而不是将新值连接到旧值,从而偏离了标准
注释:
XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在  open() 方法和 send()   之间调用。如果多次对同一个请求头赋值,只会生成一个合并了多个值的请求头。
如果没有设置 Accept 属性,则此发送出send() 的值为此属性的默认值*/* 。
安全起见,有些请求头的值只能由user agent设置:
[forbidden header names](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name)  
[forbidden response header names.](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name)

注意: 没有提供onreadystatechange机制,因为done、fail、always和statusCode涵盖了所有可能的需求。

ajax 回调函数方法 执行队列

beend、error、dataFilter、success和complete选项都接受在适当时间调用的回调函数。

注:在jQuery 1.5版中,fail和done以及jQuery 1.6版中,始终将回调钩子放在先进先出的托管队列中,允许每个钩子有多个回调。请参阅这些$.ajax()回调钩子内部实现的Deferred对象方法。
  • $.ajax()提供的回调钩子如下:
beforeSend(xhr,settings): 调用回调选项;它接收jqXHR对象和settings对象作为参数。
error(xhr,textStatus,throwError):  如果请求失败,将调用回调选项。它接收jqXHR,一个表示错误类型的字符串,以及一个异常对象(如果适用)。一些内置错误会提供一个字符串作为异常对象:“abort”,“timeout”,“No Transport”。

dataFilter(data,dataType): 方法在成功接收到响应数据后立即调用。它接收返回的数据和数据类型的值,并且必须 return  返回(可能更改的)数据 以传递到success方法中。
success(data,textStatus,xhr):如果请求成功,将调用回调选项。它接收返回的数据data、包含http状态描述代码的字符串 textStatus 和jqXHR对象 xhr。 
complete(xhr,textStaus):回调选项在请求完成时触发,不管是失败还是成功。它接收一个jqXHR对象参数和 一个包含http状态描述的 成功或错误代码的字符串textStatus。


Promise callbacks: — .done(), .fail(), .always(), and .then() — are invoked, in the order they are registered.
//你所必需控制的三种异步编程要领callbacks,listeners,promise 这是新的 函数调用写法 
  • Data Types
    对$.ajax()调用的不同类型的响应在传递给成功处理程序之前要经过不同类型的预处理。预处理的类型默认取决于响应的内容类型,但是可以使用dataType选项显式地设置。如果提供了dataType选项,则会忽略响应的Content-Type标头。

有效的数据类型 : text, html, xml, json, jsonp, and script.

text or html :
	如果指定了text 或html,则不进行预处理。只需将数据传递给success() 方法中,并通过jqXHR对象的responseText属性提供数据。
xml : 
	如果指定了xml,则使用jQuery.parseXML()方法 解析响应为 XMLDocument 传递到 success()方法中。XML文档可以通过jqXHR对象的responseXML属性获得
json : 
	如果指定了json,则使用jQuery.parseJSON()处理 将作为对象传递给success()方法。解析后的JSON对象可以通过jqXHR对象的responseJSON属性获得。
script:
  如果指定了script,$.ajax()将先执行从服务器接收到的JavaScript的代码,然后将其作为字符串传递给success()方法中 
jsonp: 
如果指定了jsonp, $.ajax()将自动附加一个查询字符串参数(默认情况下)callback=?URL。传递给$.ajax()的设置的jsonp和jsonpCallback属性可分别用于指定查询字符串参数的名称和jsonp回调函数的名称。服务器应该返回有效的JavaScript 就是 ajax的参数callback传递回调函数方法,该JavaScript将JSON响应传递给回调函数。$.ajax()将执行返回的JavaScript 函数方法 ,调用JSONP回调函数,然后将响应中包含的JSON对象传递给$.ajax()成功处理程序。
**传递给$.ajax()的设置的jsonp和jsonpCallback属性可分别用于指定查询字符串参数的名称和jsonp回调函数的名称。**
跨域请求 函数执行 传参数 

就是 请求一个 回调函数a 服务器返回 a函数方法()并把返回的数据传入 a()方法中 
ajax收到后 会执行这个方法 并把 数据传递给 success()方法中 
  • Sending Data to the Server(发送数据到服务器)
注释:默认情况下,ajax通过 GET http方法 提交数据给服务器,如果要执行POST 方法请求 需要设置 ajax的选项 type为 POST 才可以。这个选项 觉得data选项的 数据 以何种方式发送到服务器。根据W3C XMLHTTPRequest标准,POST数据将始终使用UTF-8字符集传输到服务器。
----ajax  data 选项可以包含形式key1=value1&key2=value2的查询字符串,或者键值对形式{key1: 'value1', key2: 'value2'}的对象。
如果使用 对象类型数据,则发送之前 ajax会调用jQuery.param()方法将其转化为 查询字符串的形式传送。这个自动处理 可以通过 processData 选项 设置为false 来进行禁止。如果你要发送xml文档到 服务器 则不希望进行此处理转化 。在本例中,将contentType选项从application/x-www-form-urlencoded更改为更合适的MIME类型。
  • Advanced Options ajax 高级选项
global:  通过此选项可以控制 是否屏蔽 ajax全局事件  .ajaxSend(), .ajaxError(), etc.
例如,如果请求频繁且简短,这对于抑制用.ajaxsend()实现的加载指示器是很有用的。对于跨域脚本和JSONP请求,全局选项被自动设置为false。有关这些方法的详细信息,请参阅下面的描述。
username ,password : 如果服务器http 开启了身份验证 ,如果服务器在提供响应之前执行HTTP身份验证,则可以通过用username  和password  选项发送用户名和密码对。
timeout : 
Ajax请求是有时间限制的,因此可以捕获和处理错误,从而提供更好的用户体验。请求超时通常保留默认值,或者使用$. ajaxsetup()将其设置为全局默认值,而不是使用timeout选项覆盖特定请求。
cache:
默认情况下,请求总是发出的,但是浏览器也可能会从缓存中提供结果。 禁止使用缓存结果 则设置此选项为 false
ifModified : 
如果设置此选项为 true, 如果自上次请求以来响应的资源未被修改,则会导致请求失败 并报告失败,
scriptCharset : 
	 此选项可以为 允许为使用<script>标签 的数据类型 (即一种  script或jsonp的数据类型 )的请求 显式地指定字符集 charset=utf-8。如果响应返回的脚本和主机页有不同的字符集,这是很有用的。 可以统一字符集 防止出现编码问题
中文处理 也很有用 。
async  : 
ajax 的第一个字母 "a" 代表单词 "asynchronous" ,意思是 异步 --意味着操作是并行进行的,并且不能保证完成的顺序。这个选项默认值 是 true。 表示在发出请求后 可以继续执行。如果设置为false,(表示ajax不再是 异步执行了)强烈不建议这样设置,会造成浏览器阻塞从而引起浏览器无响应。

$.ajax(): 
此方法返回一个 创建好的XMLHttpRequest对象 ,通常jQuery在内部处理这个对象的创建,但是可以使用xhr选项指定用于制造的自定义函数。返回的对象通常可以丢弃,但是提供了一个用于观察和操作请求的底层接口。特别是,在对象上调用.abort()将使请求在完成之前停止。


示例:
var xhr = $.ajax();//直接返回 xhr对象 
console.log(xhr.statusText)  //直接可以调用XMLHttpRequest 对象的属性和方法
  • Extending Ajax 【扩展ajax】
    从jQuery 1.5开始,jQuery的Ajax实现包括 prefilters(预过滤器)、传输(transports)和转换器(converters),允许您以极大的灵活性扩展Ajax。
converters :
	ajax()转换器支持将数据类型映射到其他数据类型。但是,如果希望将自定义数据类型映射到已知类型(比如 json)您必须先使用 contents 选项添加响应内容类型和实际数据类型之间的对应: 
您必须使用contents选项添加响应内容类型和实际数据类型之间的对应关系:  
示例:
$.ajaxSetup({
  contents: {
    mycustomtype: /mycustomtype/  //指定响应 自定义类型 和ajax中的类型 做映射  
  },
  //做类型转化 mycustomtype   空格 json  然后在 回调函数中 对 数据做json处理 
  converters: {
    "mycustomtype json": function( result ) {
      // Do stuff
      return newresult;
    }
  }
});
*注意: 这个额外的对象是必需的,因为响应内容类型和数据类型从来没有严格的一对一对应关系(因此使用正则表达式)。 所以要 对响应的数据类型 和要处理的类型做匹配 映射* 
也可以同时多次转化, 先转化 支持的类型(例如 json,text)为 自定义的类型 然后返回,再通过一个转化 转化为需要的。
示例:
$.ajaxSetup({
  contents: {
    mycustomtype: /mycustomtype/
  },
  converters: {
    "text mycustomtype": true,//先将text 类型转化为 自定义类型mycustomtype
    //再将自定义类型 mycustomtype转化为 json 
    "mycustomtype json": function( result ) {
      // Do stuff
      return newresult;
    }
  }
});
注:上面的代码现在允许从text转化为mycustomtype,然后从mycustomtype转换为json。

additional notes 补充说明:
由于浏览器安全限制,大多数“Ajax”请求遵循同源策略;请求无法从不同的域、子域、端口或协议成功获取数据。
Script and JSONP 则无需遵循同源策略

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值