学习要点:
1.加载请求2.错误处理 3.请求全局事件 4.jqXHR 对象
一、加载请求
当网络网速比较慢的情况下,在请求期间给用户一些提示
比如:正在努力加载中。。。
JQuery提供了2个全局的时间.ajaxStart(),.ajaxStop()。
二、异常处理
$("form input[name=button]").click(function(){
$.ajax({
type:"Post",
url:"da.html",
data:$.param({
user:$("input[name=user]").val(),
emial:$("input[name=email]").val()
}),
success:function(response,status,xhl){
$("#table").html(response);
},
error:function(xhr,errText,status){
alert(xhr.status+" : "+xhr.statusText)
},
timeout:5000
})
});
三、请求全局事件
全局事件是所有Ajax请求都能触发到,并且只能绑定在document上
,局部方法,只针对Ajax。
全局事件方法:.ajaxStart(),.ajaxStop(),.ajaxError(),.ajaxSuccess(),
.ajaxComplete()
1,全局方法使用。
//$.post()使用全局事件方法.ajaxSuccess()
$(document).ajaxSuccess(
function (event, xhr, settings) {
alert(xhr.responseText);
});
2,局部方法使用
$("form").click(function () {
$.ajax({
type:"Post",
url:"test.php",
data:$("form").serializeArray(),
success:function(){
alert("请求成功!");
},
error:function(){
alert("请求错误");
},
beforeSend:function(){
alert("请求之前");
},
complete:function(){
alert("请求完成");
}
});
});
四、jqXHR对象
简述: .success()、.complete(),.error()三个局部方法是由$.ajax()之
的全局方法返回的对象调用的,这个对象就是jqXHR,它是原生对象
XHR的超集。
注意:如果使用jqXHR对象的话建议使用.done(),.always(),.fail()替代
.success(),.complete(),.error()
1,使用jqXHR连缀方式,比$.ajax()的属性方式好处
//连续操作
var xhr = $.ajax({
url: 'test.php',
data: $("form").serialize()
});
xhr.done(function () {
alert("done")
}).always(function(){
alert("complete")
}).fail(function(){
alert("fail")
});
//多个操作指定回调函数
var jqXHR = $.ajax('test.php');
var jqXHR2 = $.ajax('test2.php');
$.when(jqXHR, jqXHR2).done(
function (r1,r2) {
alert(r1[0]);
alert(r2[0]);
});