犀牛——第19章jquery类库 19.6 JQuery中的Ajax

19.6.1 load()方法

向它传入一个URL，它会异步加载该URL的内容，然后将内容插入每一个选中元素中，替换掉已经存在的任何内容。

//每隔60秒加载并显示最新的状态报告

setInterval(function(){$('#status').load("status_report.html");},60000);

如果只想显示被加载文档的一部分，可以在URL后面添加一个空格和一个jQuery选择器。当URL加载完成后，jQuery会用指定的选择器来从加载好的ＨＴＭＬ中选取需要显示的部分：

//加载并显示天气预告的温度部分

$('#temp').load("wheather_report.html #temperature");

除了必须的ＵＲＬ参数，load()方法还接受两个可选参数。第一个可选参数表示的数据，可以追加到ＵＲＬ参数，或者与请求一起发送。可以以字符串或对象的方式传参。

//加载特定区号的天气预报

$('#temp').load("us_weather_report.html","zipcode=02134");

//使用对象作为数据，并指定为华氏温度

$('#temp').load("us_weather_report.html",{zipcode:02134,units:'F'});

load() 方法的另一个可选参数是回调函数。在jQuery对象的每一个元素上都会调用回调函数，并且每次调用都会传入三个参数：被加载ＵＲＬ的完整文本内容、状态码字符串、以及用来加载该URL的XMLHttpRequest对象。

*jQuery的Ajax状态码

jQuery的所有Ajax工具，包括load()方法，会调用回调函数来提供请求成功或失败的异步消息。这些回调函数的第二个参数是一个字符串，可以取一下值：

“success”

表示请求成功完成。

“notmodified”

该状态码表示请求已正常完成，但服务器返回的响应内容是HTTP 304 “Not Modified”，表示请求的URL内容和上次请求的相同，没有变化。

“error”

表示请求没有成功完成，原因是某些HTTP错误。

“timeout”

如果Ajax请求没有在选定的超时区间内完成，会调用错误回调，并传入该状态码。

“parsererror”

该状态码表示HTTP请求已成功完成，但jQuery无法按照期望的方式解析。

19.6.2 Ajax工具函数

1.jQuery.getScript()

jQuery.getScript()函数的第一个参数是JavaScript代码文件的URL。它会异步加载文件，加载完成后在全局作用域执行该代码。

回调函数作为第二个参数。

2.jQuery.getJSON()

jQuery.getJSON()它会获取文本，然后特殊处理一个，再调用指定的回调函数。jQuery.getJSON()获取文本后，不会将其当做脚本执行，而会将其解析为JSON。

第一个参数url

第二个参数是一个可选的数据对象

第三个参数是回调函数

3.jQuery.get()和jQuery.post()

三个参数：必需的URL，可选的数据字符串或对象，以及一个技术上可选但实际上总会使用的回调函数。

*jQuery的Ajax数据类型

text 纯文本返回

html 纯文本，load()方法使用该类型

xml 指向XML格式的数据

script 指向JavaScript文件，返回的文本在传入回调函数前，会当做脚本执行。jQuery。getScript()使用该类型。

json 请求的URL被认为指向JSON格式的数据文件。jQuery.getJSON()使用该类型。

jsonp 请求的URL被认为指向服务器脚本，该脚本支持JSONP协议，可以将JSON格式的数据作为参数传递给客户端指定的函数。

19.6.3 jQuery.ajax()函数

jQuery.getScript(url,callback)与以下jQuery.ajax()的调用等价：

jQuery.ajax({

                type:"GET",             //HTTP请求方法

                url: url,                     //要获取数据的URL

                data: null,                //不给URL添加任何数据

                dataType: "script",  //一旦获取到数据，立刻当做脚本执行

                success: callback   //完成时调用该函数

                    });

可以通过jQuery.ajaxSetup()传入一个选项对象来设置任意选项的默认值：

jQuery.ajaxSetup({

           timeout: 2000,    //在两秒后取消所有Ajax请求

           cache: false       //通过给URL添加时间戳来禁用浏览器缓存

});

1.通用选项

type

       指定HTTP的请求方法。默认是“GET”和“POST”。

url

       要获取的URL。

data

       添加到URL中（对GET请求）或在请求的内容体中（对POST请求）发送的数据。这可以是字符串或对象。

dataType

       指定响应数据的预期类型，以及jQuery处理该数据的方式。

contentType

       指定请求的HTTP Content-Type头。如果type选项设置为“POST”，想发送纯文本或XML文档作为请求体时，需要设置该选项。

timeout

       超时时间，单位是毫秒。

cache

       对于GET请求，如果该选项设置为false,jQuery会添加一个“_=”参数到URL中，或者替换已经存在的同名参数。该参数的值是当前时间。这可以禁用基于浏览器的缓存，因为每次请求的URL都不一样。

ifModified

global

       该选项指定jQuery是否应该触发上面描述的Ajax请求过程中的事件。默认值是true；设置该选项为false会禁用Ajax相关的所有事件。

2.回调

下面的选项指定在Ajax请求的不同阶段调用的函数。

context 

                       该选项指定回调函数在调用时的上下文对象——就是this。

beforeSend

                       该选项指定Ajax请求发送到服务器之前激活的回调函数。

success

                        该选项指定Ajax请求成功完成时调用的回调函数。第一个参数是服务器发送的数据；第二个参数是jQuery状态码；第三个参数是用来发送该请求的XMLHTTPRequest对象。

error                

                        该选项指定Ajax请求不成功时调用的回调函数。

complete

                         该选项指定Ajax请求完成时激活的回调函数。在调用success或error后，jQuery会调用complete回调。传给complete回调的第一个参数是XMLHttpRequest对象，第二个参数则是状态码。

3.不常用的选项和钩子

async

           脚本化的HTTP请求本身就是异步的。然而，XMLHTTPRequest对象提供了一个选项，可用来阻塞当前进程，直到接收到响应。如果想开启这一阻塞行为，可以设置该选项为false。

dataFilter

               该选项指定一个函数，用来过滤或预处理服务器返回的数据。

jsonp

jsonpCallback

processData

scriptCharset

tranditional

username,password

xhr

19.6.4 Ajax事件

jQuery.ajax()拥有4个回调选项：beforeSend、success、error和complete。除了分别激活这些指定的回调函数，jQuery的Ajax函数还会在AJax请求的每一个相同阶段触发自定义事件。

回调                  事件类型                      处理程序注册方法

beforeSend       "ajaxSend"                   ajaxSend()

success             "ajaxSuccess"             ajaxSuccess()

error                   "ajaxError"                  ajaxError()

complete            "ajaxComplete"           ajaxComplete()

                           "ajaxStart"                  ajaxStart()

                           "ajaxStop"                  ajaxStop()

可以使用bind()方法和上表第二列中的事件类型字符串来注册这些自定义Ajax事件，也可以使用第三列中的时间注册方法来注册。
例子：

      $("#loading_animation").bind({

           ajaxStart:function(){$(this).show();},

           ajaxStop:function(){$(this).hide();}

      });

这些ajaxStart和ajaxStop的事件处理程序可以绑定到任意文档元素上：jQuery是全局地触发它们而不是在某个特定元素上触发。

今天通过设置global选项为false来阻止jQuery触发任何Ajax相关的事件。