文章参考 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery deffered 学习</title>
</head>
<body>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function(){
/*
$.ajax("hb.php")
.done(function(){
alert("哈哈,成功了!");
})
.fail(function(){
alert("出错啦!");
})
.done(function(){
alert("第二个回调函数!");
});
*/
var httpService = function(userSetting){
//在函数内部,新建一个Deferred对象
var dtd = $.Deferred();
// ajax 默认的配置信息
var defaultSetting = {
type: "GET",
url: "",
data: "",
success: function(msg){
console.log("ajax success in");
}
};
// 检查用户输入的参数
userSetting = userSetting || {};
// 合并配置信息
var setting = $.extend(defaultSetting,userSetting);
$.ajax({
type: setting.type,
url: setting.url,
data: setting.data,
// beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数
beforeSend: function (XMLHttpRequestObject) {
console.log("beforeSend");
console.dir(XMLHttpRequestObject);
},
success: function (msg) {
console.log("success");
if(setting.success != null && setting.success != undefined){
setting.success(msg);
}
// 改变Deferred对象的执行状态
dtd.resolve(msg);
},
//有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
error:function(XMLHttpRequestObject,msg,errorObj){
console.log("error");
if(setting.error != null && setting.error != undefined){
setting.error(msg);
}
// 改变Deferred对象的执行状态
dtd.reject(XMLHttpRequestObject);
},
// dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。
// 并且必须返回新的数据(可能是处理过的)传递给success回调函数。
dataFilter: function (response,dataType) {
console.log("dataFilter");
// console.dir(arguments);
return response;
},
// complete 当请求完成之后调用这个函数,无论成功或失败。
// 传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串
complete: function (XMLHttpRequestObject) {
console.log("complete");
//console.dir(arguments);
}
});
// 返回promise对象
return dtd.promise();
};
var mySetting = {
type: "POST",
url: "hb.php",
data: "name=liumei",
// 传统方式执行的成功回到
success: function(msg){
console.log("黄彪测试成功回调函数!" + msg);
},
// 传统方式执行的失败回到
error : function(msg){
console.log("黄彪测试失败回调函数!" + msg);
}
};
httpService(mySetting)
// deffered 成功执行的回调函数
.done(function(msg){
console.log("ajax success out callback");
alert(1 + " msg : " + msg);
})
// deffered 失败执行的回调函数
.fail(function(XMLHttpRequestObject){
console.log("ajax error out callback");
alert(1 + " msg : " + XMLHttpRequestObject);
});
});
</script>
</html>