是指在写ajax异步请求时该如果写回调呢？写啥回调呢？错误时触发哪个回调呢？
常见的有：
$.post(url, {}, function(res){
}, 'json');
殊不知这种在出错的时候没有任何的处理。。。
通常我这样写：
$.ajax({
url: '',
data: {},
dataType: 'json',
type: 'POST',
success: function(res){},
error: function(){},
complete: function(){}
});
你可能在说，代码可能有点多，其实我感觉只要业余清晰，代码多点也是能接受的，当然你可以用伟大的promise处理回调。。。在jquery里她转换成了deferred
一定要考虑的
缓存问题，这个通常发生在ie低版本，如ie7，一般使用时间缀解决
loading的状态，一定要让用户知道当前处理正在请求过程中
返回值出错，通常给予友好提示
服务器出错，其中包括404,500等状态
网络超时，一般有个时间限制
用户主动中断请求，如：abort
比如我的代码片断：
// 判断逻辑，如果成功才发请求
// 给出loading状态
// 发送请求，并所当前请求存放起来，以方便用户主动清除
XHR = $.ajax({
url: '',
data: {},
dataType: 'json',
type: 'POST',
success: function(res){
if(res && res.errcode === 0){
// 成功
} else {
// 返回值不理想
}
},
error: function(xhr, status){
// status => timeout,parsererror,error,abort
if(xhr && status !== 'abort'){
// 如果不是用户主动中断
}
},
complete: function(){
// 关闭loading
}
});
注：不管成功或者失败都会执行complete回调，且是在error或success后执行
回调触发的类型
error
错误回调，相当于fail
当后端出错，或者服务器状态码不为200，会触发error，第二参数为error
当返回值解析错误时触发error，第二个参数为parsererror
当响应超时时触发error，第二个参数为timeout
当用户主动中断请求时触发error，第二个参数为abort
以上是在jquery和zepto中测试
success
成功回调，相当于done
在jquery中当返回状态为200且内容正常解析后触发
在zepto中当返回值状态为200且内容不为空时触发，这是一个坑啊。。。
complete
完成回调，相当于always
不管成功还是失败，该事件总会执行，顺序在success和error之后
jquery版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery版本</title>
</head>
<body>
<h2>请点击并查看控制台</h2>
<br>
<button data-url="/api/testajax/success">成功</button>
<button data-url="/api/testajax/404">404</button>
<button data-url="/api/testajax/500">500</button>
<button data-url="/api/testajax/parseError">解析json错误</button>
<button data-url="/api/testajax/empty">返回值空</button>
<button data-url="/api/testajax/timeout">超时</button>
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript">
function send(url){
$.ajax({
url: url,
data: {
r: new Date().getTime()
},
dataType: 'json',
error: function(a,b){
console.log(a,b, 'error');
},
success: function(a){
console.log(a, 'success');
},
complete: function(a){
console.log(a, 'complete');
},
timeout: 3000
});
}
$('button').on('click', function(){
send($(this).data('url'));
});
</script>
</body>
</html>
zepto版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zepto版本</title>
</head>
<body>
<h2>请点击并查看控制台</h2>
<br>
<button data-url="/api/testajax/success">成功</button>
<button data-url="/api/testajax/404">404</button>
<button data-url="/api/testajax/500">500</button>
<button data-url="/api/testajax/parseError">解析json错误</button>
<button data-url="/api/testajax/empty">返回值空</button>
<button data-url="/api/testajax/timeout">超时</button>
<script type="text/javascript" src="/static/zepto.js"></script>
<script type="text/javascript">
function send(url){
$.ajax({
url: url,
data: {
r: new Date().getTime()
},
dataType: 'json',
error: function(a,b){
console.log(a,b, 'error');
},
success: function(a){
console.log(a, 'success');
},
complete: function(a){
console.log(a, 'complete');
},
timeout: 3000
});
}
$('button').on('click', function(){
send($(this).data('url'));
});
</script>
</body>
</html>