jQuery对Ajax做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器的兼容性。对于封装方式,jQuery采用了三层封装。第一层 $.ajax(),而通过这层封装了第二层的三种方法:load(),$.get()和$.post(),第三层是$.getScript和$.getJSON()方法。
load()是局部方法,必须需要一个包含元素的jquery对象作为前缀。
$.get()和$.post()是全局方法,无须指定某个元素。
对于用途而言,load适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,
$.get()和$.post()更加合适。
一、load方法简介
load方法的语法:
$(selector).load(url,data,function(response,status,xhr));
参数:
selector:得到的数据会加载到这个选择器对应的元素中(在status是success或notmodified的情况下)。如果当前文档不包含指定的元素,那么就不会执行.load()方法。
url: 必需,规定要将请求发送到哪个url。
data:可选,规定连同请求发送到服务器的数据。如果提供的数据是对象,则使用POST方法,否则使用GET方法。
function(response,xhr):可选,规定当得到数据完毕时(即执行post-processing之后)运行的函数。回调函数,可以使用load()得到的数据
回调函数可以设置的参数:
response - 包含来自请求的结果数据
status-包含请求的状态('success','notmodified','error','timeout','parsererror')。'success'和'notmodified'表示响应成功,如果响应成功,.load()将匹配元素的HTML内容设置为返回的数据。
xhr - 包含XMLHttpRequest对象
二、load方法的get和post的传递方式
load()方法的传递方式根据参数data来自动指定。如果没有data参数,则默认采用GET方式传递;反之,则自动转换为POST方式。
//无参数传递,则是GET方式
$("#resText").load("test.html",function(){
//......
});//有参数传递,用问好追加到url后面,也是GET方式
$("#resText").load("test.html?name=zhangsan",function(){
//......
});
//有参数传递并且放到data部分,则是POST方式
$("#resText").load("test.html",{name:"zhangsan",age:"24"},function(){
//......
});
三、 回调函数
注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发。
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有三个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,
jQuery代码如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout这4种
//XMLHttpRequest:XMLHttpRequest对象
});