jQuery入门到精通第6章AJAX快餐.docx

上面的示例演示了如何使用Load方法.

提示:

我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数（netDate（））.getTime（）来保证每次发送的URL不同,可以避免浏览器缓存.

提示:

当在url参数后面添加了一个空格,比如" "的时候,会出现"无法识别符号"的错误,请求还是能正常发送.但是无法加载HTML到DOM.删除后问题解决.

2.jQuery.get（url,[data],[callback],[type]） 

Returns:

XMLHttpRequest

说明:

通过远程HTTPGET请求载入信息。

这是一个简单的GET请求功能以取代复杂$.ajax。

请求成功时可调用回调函数。

如果需要在出错时执行函数，请使用$.ajax。

讲解:

此函数发送Get请求,参数可以直接在url中拼接,比如:

$.get（"../data/AjaxGetMethod.aspx?

param=btnAjaxGet_click"）;

或者通过data参数传递:

$.get（"../data/AjaxGetMethod.aspx",{"param":

"btnAjaxGet2_click"}）;

两种方式效果相同,data参数会自动添加到请求的url中

如果url中的某个参数,又通过data参数传递,不会自动合并相同名称的参数.

回调函数的签名如下:

function（data,textStatus）{

//datacouldbexmlDoc,jsonObj,html,text,etc...

this;//theoptionsforthisajaxrequest

}

其中data是返回的数据,testStatus表示状态码,可能是如下值:

"timeout","error","notmodified","success","parsererror"

在回调函数中的this是获取options对象的引用.有关options的各种说明,请参见:

type参数是指data数据的类型,可能是下面的值:

"xml","html","script","json","jsonp","text".

默认为"html".

jQuery.getJSON（url,[data],[callback]）方法就相当于jQuery.get（url,[data],[callback],"json"）

3.jQuery.getJSON（url, [data],[callback]）

Returns:

XMLHttpRequest

相当于:

  jQuery.get（url,[data],[callback],"json"）

说明:

通过HTTPGET请求载入JSON数据。

在jQuery1.2中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如"myurl?

callback=?

"。

jQuery将自动替换?

为正确的函数名，以执行回调函数。

注意：

此行以后的代码将在这个回调函数执行前执行。

讲解:

getJSON函数仅仅将get函数的type参数设置为"JSON"而已.在回调函数中获取的数据已经是按照JSON格式解析后的对象了:

$.getJSON（"../data/AjaxGetCityInfo.aspx",{"resultType":

"json"},function（data,textStatus）

{

alert（data.length）;

alert（data[0].CityName）;

}）;

服务器端返回的字符串如下:

[{""pkid"":

""0997"",""ProvinceId"":

""XJ"",""CityName"":

""阿克苏"",""CityNameEn"":

""Akesu"",""PostCode"":

""843000"",""isHotCity"":

false},

{""pkid"":

""0412"",""ProvinceId"":

""LN"",""CityName"":

""鞍山"",""CityNameEn"":

""Anshan"",""PostCode"":

""114000"",""isHotCity"":

false}]

示例中我返回的饿是一个数组,使用data.length可以获取数组的元素个数, data[0]访问第一个元素,data[0].CityName访问第一个元素的CityName属性.

4.jQuery.getScript（url,[callback]）

Returns:

XMLHttpRequest

相当于:

  jQuery.get（url,null,[callback],"script"）

说明:

通过HTTPGET请求载入并执行一个JavaScript文件。

jQuery1.2版本之前，getScript只能调用同域JS文件。

1.2中，您可以跨域调用JavaScript文件。

注意：

Safari2或更早的版本不能在全局作用域中同步执行脚本。

如果通过getScript加入脚本，请加入延时函数。

讲解:

以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo（虽然在网上找到了可以跨域的版本,但是感觉不够完美）. 所以我特别对这个函数的核心实现和使用做了研究.

首先了解此函数的jQuery内部实现,仍然使用get函数,jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax（）,getScript将传入值为"script"的type参数, 最后在Ajax函数中对type为script的请求做了如下处理:

varhead=document.getElementsByTagName（"head"）[0];

varscript=document.createElement（"script"）;

script.src=s.url;

上面的代码动态建立了一个script语句块,并且将其加入到head中:

head.appendChild（script）;

当脚本加载完毕后,再从head中删除:

//HandleScriptloading

if（!

jsonp）{

vardone=false;

//Attachhandlersforallbrowsers

script.onload=script.onreadystatechange=function（）{

if（!

done&&（!

this.readyState||

this.readyState=="loaded"||this.readyState=="complete"））{

done=true;

success（）;

complete（）;

//HandlememoryleakinIE

script.onload=script.onreadystatechange=null;

head.removeChild（script）;

}

};

}

我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:

IE6

FireFox

注意事项

非跨域引用js

通过

通过

回调函数中的data和textStatus均可用

跨域引用js

通过

通过

回调函数中的data和textStatus均为undifined

下面是我关键的测试语句,也用来演示如何使用getScript函数:

$（"#btnAjaxGetScript"）.click（function（event）

{

$.getScript（"../scripts/getScript.js",function（data,textStatus）

{

alert（data）;

alert（textStatus）;

alert（this.url）;

}）;

}）;

$（"#btnAjaxGetScriptCross"）.click（function（event）

{

$.getScript（"function（data,textStatus）

{

alert（data）;

alert（textStatus）;

alert（this.url）;

}）;

}）;

5.jQuery.post（url,[data],[callback],[type]）

Returns:

XMLHttpRequest

说明:

通过远程HTTPPOST请求载入信息。

这是一个简单的POST请求功能以取代复杂$.ajax。

请求成功时可调用回调函数。

如果需要在出错时执行函数，请使用$.ajax。

讲解:

具体用法和get相同,只是提交方式由"GET"改为"POST".

6.jQuery.ajax（options）

Returns:

XMLHttpRequest

说明:

通过HTTP请求加载远程数据。

jQuery底层AJAX实现。

简单易用的高层实现见$.get,$.post等。

$.ajax（）返回其创建的XMLHttpRequest对象。

大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

$.ajax（）只有一个参数：

参数key/value对象，包含各配置及回调函数信息。

详细参数选项见下。

注意：

如果你指定了dataType选项，请确保服务器返回正确的MIME信息，（如xml返回"text/xml"）。

错误的MIME类型可能导致不可预知的错误。

见SpecifyingtheDataTypeforAJAXRequests。

注意：

如果dataType设置为"script"，那么所有的远程（不在同一域名下）的POST请求都将转化为GET请求。

（因为将使用DOM的script标签来加载）

jQuery1.2中，您可以跨域加载JSON数据，使用时需将数据类型设置为JSONP。

使用JSONP形式调用函数时，如"myurl?

callback=?

"jQuery将自动替换?

为正确的函数名，以执行回调函数。

数据类型设置为"jsonp"时，jQuery将自动调用回调函数。

讲解:

这是jQuery中Ajax的核心函数,上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,使用这些参数可以完全控制ajax请求.在Ajax回调函数中的this对象也是options对象.

因为平时使用最多的还是简化了的get和post函数,所以在此不对options参数做详细讲解了.options参数文