jquery defered 对象学习

Kindlecode

2017-01-29

文章参考 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>

jquery blog