一.加载请求
在Ajax异步发送请求时,遇到网络较慢的情况,就会出现请求时间较长的问题。
而超过一定时间的请求,用户就会变得不再耐烦而关闭页面。而如果在请求期间能给
用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加
的好一些。
jQuery提供了两个全局事件,.ajaxStart()和.ajaxStop().这两个全局
事件,只要用户触发了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),
请求结束时(所有请求都结束了)激活.ajaxStop()。
//请求加载提示的显示和隐藏
$('.loading').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
向下兼容才能运行。新版本中,必须绑定在document元素上。
$(document).ajaxStart(function () {
$('.loading').show();
}).ajaxStop(function () {
$('.loading').hide();
});
//如果请求时间太长,可以设置超时。
$.ajax({
timeout : 500
});
//如果某个ajax不想触发全局事件,可以设置取消。
$.ajax({
global : false
});
二.错误处理
Ajax异步提交时,不可能所有情况都是成功完成的,也有因为代码异步文件错误、
网络错误导致的提交失败。这时,应该把错误报告出来,提醒用户重新提交或提示开
发者进行修补。
在之前高层封装中是没有回调错误处理的,比如$.get()、$.post()、.load()。
所以,早期的方法通过全局.ajaxError()事件方法返回错误信息。而在jQuery1.5之
后,可以通过连缀处理使用局部.error()方法即可。而对于$.ajax()方法,不但可以
用这两种方法,还有自己的属性方法 error : function(){}。
//$.ajax()使用属性提示错误
$.ajax({
type : 'POST',
url : 'test1.jsp',
data : $('form').serialize(),
success : function (response, status, xhr) {
$('#box').html(response);
},
error : function (xhr, errorText, errorStatus) {
alert(xhr.status + ':' + xhr.statusText);
}
});
//$.post()使用连缀方法.error()方法提示错误,连缀方法将被.fail()取代
$.post('test1.jsp').error(function (xhr, status, info) {
alert(xhr.status + ':' +xhr.statusText);
alert(status + ':' + info);
});
//$.post()使用全局.ajaxError()事件提示错误
$(document).ajaxError(function (event, xhr, settings, infoError) {
alert(xhr.status + ':' +xhr.statusText);
alert(settings+ ':' + info);
});
三.请求全局事件
jQuery对于Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、
.ajaxError()等事件方法。它们都属于请求时触发的全局事件,除了这些,还有一些
其他全局事件:
.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。
.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。
.ajaxSend(),没有对应的局部方法,只有属性beforeSend,请求发送之前要绑定的函数。
//$.post()使用局部方法.success()
$.post('test.jsp', $('form').serialize(), function (response, status, xhr) {
$('#box').html(response);
}).success(function (response, status, xhr) {
alert(response);
});
//$.post()使用全局事件方法.ajaxSuccess()
$(document).ajaxSuccess(function (event, xhr, settings) {
alert(xhr.responseText);
});
注意:全局事件方法是所有Ajax请求都会触发到的,并且只能绑定在document上。而局
部方法,则针对某个Ajax。
对于一些全局事件方法的参数,大部分为对象,而这些对象有哪些属性或方法能调用,可以
通过遍历方法得到。
//遍历settings对象的属性
$(document).ajaxSuccess(function (event, xhr, settings) {
for (var i in settings) {
alert(i);
}
});
//$.post()请求完成的局部方法.complete()
$.post('test.php', $('form').serialize(), function (response, status, xhr) {
alert('成功');
}).complete(function (xhr,status) {
alert('完成');
});
//$.post()请求完成全局方法.ajaxComplete()
$(document).ajaxComplete(function (event, xhr, settings) {
alert('完成');
});
//$.post()请求发送之前的全局方法.ajaxSend()
$(document).ajaxSend(function (event, xhr, settings) {
alert('发送请求之前');
});
//$.ajax方法,可以直接通过属性设置
$.ajax({
type : 'POST',
url : 'test.jsp',
data : $('form').serialize(),
success : function (response, status, xhr) {
$('#box').html(response);
},
complete : function (xhr, status) {
alert('完成' + ' - ' + xhr.responseText + ' - ' + status);
},
beforeSend : function (xhr, settings) {
alert('请求之前' + ' - ' + xhr.readyState + ' - ' + settings.url);
}
});
注意:在jQuery1,5版本以后,使用.success()、.error()、和.complete()连缀
的方法,可以用.done()、.fail()和.always()取代。
四.JSON和JSONP
如果在同一个域下,$.ajax()方法只要设置dataType属性即可加载JSON文件。而
在非同域下,可以使用JSONP,但也是有条件的。
//$.ajax()加载JSON文件
$.ajax({
type : 'POST',
url : 'test.json',
dataType : 'json',
success : function (response, status, xhr) {
alert(response[0].url);
}
});
如果想跨域操作文件的话,就必须使用JSONP。JSONP(JSON with Padding)是一个
非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript
callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
//跨域的PHP端文件
<?php
$arr = array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>
//$.getJSON()方法跨域获取JSON
$.getJSON('http://www.li.cc/test.php?callback=?', function (response) {
console.log(response);
});
//$.ajax()方法跨域获取JSON
$.ajax({
url : 'http://www.li.cc/test.php?callback=?',
dataType : 'jsonp',
success : function (response, status, xhr) {
console.log(response);
alert(response.a);
}
});
五.jqXHR对象
在之前,使用了局部方法:.success()、.complete()和.error()。这三个局部方
法并不是XMLHttpRequest对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。
这个对象,就是jqXHR对象,它是原生对象XHR的一个超集。
//获取jqXHR对象,查看属性和方法
var jqXHR = $.ajax({
type : 'POST',
url : 'test.jsp',
data : $('form').serialize()
});
for (var i in jqXHR) {
document.write(i + '<br />');
}
注意:如果使用jqXHR对象的话,建议使用.done()、.always()和.fail()代替.success()、
.complete()和.error()。以为在未来版本中,很可能这三种方法废弃取消。
//成功后回调函数
jqXHR.done(function (response) {
$('#box').html(response);
});
使用jqXHR的连缀方式比$.ajax的属性方式有三大好处:
1.可以连缀操作,可读性大大提高;
2.可以多次执行同一个回调函数;
3.为多个操作指定回调函数;
//同时执行多个成功后的回调函数
jqXHR.done().done();
//多个操作指定回调函数
var jqXHR = $.ajax('test.php');
var jqXHR2 = $.ajax('test2.jsp');
$.when(jqXHR, jqXHR2).done(function (r1,r2) {
alert(r1[0]);
alert(r2[0]);
});