jquery deferred object learning

Article referencehttp ://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

Simply put, the deferred object is jQuery's callback function solution . In English, defer means "delay", so the meaning of a deferred object is to "delay" until some point in the future to execute.

<!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("Haha, successful!");
		})
　　	.fail(function(){
			alert("Something went wrong!");
		})
		.done(function(){
			alert("Second callback function!");
		});
	*/
	
	var httpService = function(userSetting){

		//Inside the function, create a new Deferred object
		var dtd = $.Deferred();

		// ajax default configuration information
		var defaultSetting = {
			type: "GET",
			url: "",
			data: "",
			success: function(msg){
				console.log("ajax success in");
			}
		};

		// Check the parameters entered by the user
		userSetting = userSetting || {};

		// merge configuration information
		var setting = $.extend(defaultSetting,userSetting);
		
		$.ajax({
			type: setting.type,
			url: setting.url,
			data: setting.data,
			// beforeSend is called before sending the request, and passes an XMLHttpRequest as a parameter
			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);
				}
				// Change the execution state of the Deferred object
				dtd.resolve(msg);
			},
			//There are three parameters: XMLHttpRequest object, error message, (optional) caught exception object.
			error:function(XMLHttpRequestObject,msg,errorObj){
				console.log("error");
				if(setting.error != null && setting.error != undefined){
					setting.error(msg);
				}
				// Change the execution state of the Deferred object
				dtd.reject(XMLHttpRequestObject);
			},
			// dataFilter is called after a successful request. Pass in the returned data and the value of the "dataType" parameter.
			// and must return new data (possibly processed) to pass to the success callback.
			dataFilter: function (response,dataType) {
				console.log("dataFilter");
// console.dir(arguments);
				return response;
			},
			// complete This function is called when the request has completed, whether it succeeded or failed.
			// Pass in the XMLHttpRequest object, and a string containing a success or error code
			complete: function (XMLHttpRequestObject) {
				console.log("complete");
				//console.dir(arguments);
			}
		});
		// return the promise object
		return dtd.promise();
	};

	var mySetting = {
		type: "POST",
		url: "hb.php",
		data: "name=liumei",
		// success of traditional execution returns to
		success: function(msg){
			console.log("Huang Biao test success callback function!" + msg);
		},
		// fail back to traditional execution
		error : function(msg){
			console.log("Huang Biao test failed callback function!" + msg);
		}
	};

	httpService(mySetting)
			// deffered callback function for successful execution
	.done(function(msg){
		console.log("ajax success out callback");
		alert(1 + " msg : " + msg);
	})
		// deffered callback function for failed execution
	.fail(function(XMLHttpRequestObject){
		console.log("ajax error out callback");
		alert(1 + " msg : " + XMLHttpRequestObject);
	});
	});
</script>
</html>

jquery deferred object learning

Guess you like