jQuery deferred应用之ajax详细源码分析（二）
2024-09-02 18:00:34
在上一节中，我只贴出了$.Deferred的源码分析，并没用讲解怎么使用它，现在我们先看看$.ajax是如何使用它，让我们进行异步任务的处理。
如果没看上节的代码，请先稍微了解一下jQuery Deferred的工作原理，这样ajax你才能用得更好。
这里我将以一个跨域请求 "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"这个js文件为例，讲解jQuery的ajax工作原理，知道了原理，什么ajax都是浮云了。
先看这张图片，对$.ajax先来看全局的展望
这里外部有两个变量 prefilters = {}, transports = {}, 他们将会应为addToPrefiltersOrTransports() 通过闭包变为
prefilters={json:[fun],jsonp:[fun],script:[fun]} transports={*:[fun],script:[fun]} 这里先不讨论这两个变量，我们这次用实例开始吧
var req = $.ajax("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js",
{ dataType: "script", cache: true, timeout: "10000", statusCode: {200: function () { console.log("request finished and response is ready") },
0: function () { console.log("request wrong")} } }).done(function () { console.log("跨域请求成功") }).success(function () { console.log("跨域请求成功2") });;
req.done(function () { console.log("跨域请求成功3") });
这里，设置跨域请求js文件,简单的参数配置,前面说过jQuery ajax有强大的ajaxSettings参数配置,这里为什么$.ajax().done().success()呢？其实这个$.ajax()会返回一个jqXHR,然后这个对象
因为这句代码deferred.promise(jqXHR)，使得jqXHR具有deferred对象的所有只读方法。详情见上章，接下来一步步看这个代码如何执行.
ajax: function (url, options) {
//如果url是对象的话，冒充1.5版本之前的方法 -->$.ajax({url:"xx",data:{},})
if (typeof url === "object") {
options = url;
url = undefined;
}
//强制设置options成为一个对象 -->options为对象
options = options || {};
//这里创建了ajax的很多私有变量
var //创建最终的ajax参数对象s
s = jQuery.ajaxSetup({}, options), -->通过$.ajaxSetup改变默认的参数配置，返回给s.
// Callbacks context
callbackContext = s.context || s,
// Context for global events
// It's the callbackContext if one was provided in the options
//如果是Dom node或者jQuery collection
globalEventContext = callbackContext !== s &&
(callbackContext.nodeType || callbackContext instanceof jQuery) ?
jQuery(callbackContext) : jQuery.event,
// 创建一个deferred对象
deferred = jQuery.Deferred(), -->使用到了Deferred对象
completeDeferred = jQuery._Deferred(),
// Status-dependent callbacks
//一组数值的HTTP代码和函数对象，当响应时调用了相应的代码 如$.ajax({statusCode: {404: function() {alert('page not found');}});
默认为空对象
statusCode = s.statusCode || {}, -->这里我们传了一个 statusCode:{200:function(){}..}
// ifModified key
ifModifiedKey,
// 请求头部 (they are sent all at once)
requestHeaders = {},
requestHeadersNames = {},
// 响应 headers
responseHeadersString,
responseHeaders,
// transport
transport,
//请求超时时间，异步请求下请求多少时间后中止请求,
timeoutTimer, -->timeout:10000
// 判断是否是跨域请求的变量
parts,
// jqXHR state
state = 0,
// To know if global events are to be dispatched
fireGlobals,
// Loop variable
i,
//伪劣的jqXHR, -->这里就是返回的jqXHR对象,初始一些key
jqXHR = {
readyState: 0,
/*设置dataType,达到预期服务器返回的数据类型，，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
*/
setRequestHeader: function (name, value) {
//这里状态还为0，表示还在发送请求前，设置请求头
if (!state) {
var lname = name.toLowerCase();
name = requestHeadersNames[lname] = requestHeadersNames[lname] || name;
requestHeaders[name] = value; //私有requestHeadersNames
}
return this;
},
// Raw string
getAllResponseHeaders: function () {
return state === 2 ? responseHeadersString : null;
},
// Builds headers hashtable if needed
getResponseHeader: function (key) {
var match;
if (state === 2) {
if (!responseHeaders) {
responseHeaders = {};
while ((match = rheaders.exec(responseHeadersString))) {
responseHeaders[match[1].toLowerCase()] = match[2];
}
}
match = responseHeaders[key.toLowerCase()];
}
return match === undefined ? null : match;
},
// Overrides response content-type header
overrideMimeType: function (type) {
if (!state) {
s.mimeType = type;
}
return this;
},
// Cancel the request
abort: function (statusText) {
statusText = statusText || "abort";
if (transport) {
transport.abort(statusText);
}
done(0, statusText);
return this;
}
};
/* Callback for when everything is done, jQuery作者喜欢函数里嵌套函数,局部调用方便
* 2: request received
* 4: request finished and response is ready <---readyState
* 200: "OK"
* 404: Page not found <----status
*/
function done(status, nativeStatusText, responses, headers) { -->这个done函数写到这个函数的内部，处理不同状态的req，
其实这个写法改成var done=function(){}更好
// 请求状态为2，表面已经请求过一次，立即返回 -->我是分析到下面回来的 ,第一次请求默认的state=0
if (state === 2) {
return;
}
// State is "done" now
state = 2; -->哦，处理了，为什么是2呢，因为XMLHttpRequest 状态为2的意思是
request received
// 如果存在超时请求中止，清楚这个timeout
if (timeoutTimer) { -->timeout有用了，这里被清除了~_~,我都响应请求了，肯定得把你删了
clearTimeout(timeoutTimer);
}
// Dereference transport for early garbage collection
// (no matter how long the jqXHR object will be used)
transport = undefined;
// Cache response headers
responseHeadersString = headers || "";
// Set readyState
jqXHR.readyState = status > 0 ? 4 : 0;
var isSuccess,
success,
error,
statusText = nativeStatusText,
response = responses ? ajaxHandleResponses(s, jqXHR, responses) : undefined,
lastModified,
etag;
// If successful, handle type chaining
if (status >= 200 && status < 300 || status === 304) { -->服务器成功处理了 我们的状态是200
// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if (s.ifModified) {
if ((lastModified = jqXHR.getResponseHeader("Last-Modified"))) {
jQuery.lastModified[ifModifiedKey] = lastModified;
}
if ((etag = jqXHR.getResponseHeader("Etag"))) {
jQuery.etag[ifModifiedKey] = etag;
}
}
// If not modified
if (status === 304) {
statusText = "notmodified";
isSuccess = true;
// If we have data
} else {
try {
success = ajaxConvert(s, response); --> 200状态，isSucess=true
statusText = "success";
isSuccess = true;
} catch (e) {
// We have a parsererror
statusText = "parsererror";
error = e;
}
}
} else {
// We extract error from statusText
// then normalize statusText and status for non-aborts
error = statusText;
if (!statusText || status) {
statusText = "error";
if (status < 0) {
status = 0;
}
}
}
//设置jqXHR.status 其实也就是XMLHttpRequest状态
jqXHR.status = status; -->哦，这里设置了jqXHR的状态了 200
jqXHR.statusText = "" + (nativeStatusText || statusText);
// 成功请求 resolveWith
if (isSuccess) {
deferred.resolveWith(callbackContext, [success, statusText, jqXHR]);
->成功了，当然得resolveWith，是不是发现done或者
success进来的函数一个个执行了^_^
} else { //失败请求 rejectWith
->resolve意味着什么？意味后面不管你done().done() 多少都会被直接触发 ~_~
deferred.rejectWith(callbackContext, [jqXHR, statusText, error]);
}
// 状态参数代码,默认为空
jqXHR.statusCode(statusCode);
statusCode = undefined;
if (fireGlobals) {
globalEventContext.trigger("ajax" + (isSuccess ? "Success" : "Error"),
[jqXHR, s, isSuccess ? success : error]);
}
// 不管请求成功与否都执行的complete resolveWith
completeDeferred.resolveWith(callbackContext, [jqXHR, statusText]);
-->原来$.ajax().complete在这里调用，所以不管成功没有都resolve了
if (fireGlobals) {
globalEventContext.trigger("ajaxComplete", [jqXHR, s]);
// Handle the global AJAX counter
if (!(--jQuery.active)) {
jQuery.event.trigger("ajaxStop");
}
}
}
// 给这个jqXHR对象附上deferred对象的只读方法，包括done,always,isResolved等等，这里表明了，为什么$.ajax过后
//我们可以使用sucess,error,complete方法
deferred.promise(jqXHR);
jqXHR.success = jqXHR.done; -->作者为了让我们更好的调用，又多了3个借口，哎，其实可以直接不需要的
jqXHR.error = jqXHR.fail;
jqXHR.complete = completeDeferred.done;
// Status-dependent callbacks 其实这个参数变量很少用,不过还可以，目前可以触发两个状态的statusCode: {200: function ()
//{ console.log("request ok") }, 404: function () { console.log("page not found")} }
jqXHR.statusCode = function (map) { --> map={200:"..",0:".."}
if (map) {
var tmp; //临时函数变量
if (state < 2) {
for (tmp in map) {
statusCode[tmp] = [statusCode[tmp], map[tmp]];
}
} else {
tmp = map[jqXHR.status]; //jqXHR返回相应的callback,然后调用then方法触发
--> 我们的状态代码在这里调用,通过jqXHR.then方法调用
jqXHR.then(tmp, tmp);
}
}
return this;
};
// Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
// We also use the url parameter if available
// Remove 将url的hash去掉 rhash=/#.*$/ rprotocol = /^\/\// ajaxLocParts[1]="http:"
s.url = ((url || s.url) + "").replace(rhash, "").replace(rprotocol, ajaxLocParts[1] + "//");
// 取出dataTypes list，不存在则为* rspacesAjax = /\s+/ 如:s.dataType=[*]
s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().split(rspacesAjax);
//默认设置crossDomain 同域请求为false， 跨域请求为true,如果想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true
if (s.crossDomain == null) {
//同ajaxLocParts变量,这里也是通过这个请求的url来判断是否是跨域请求
parts = rurl.exec(s.url.toLowerCase());
//这里来判断是否是跨域请求,又是!! 主要判断请求的url parts与 ajaxLocParts -->这里智能判断你的请求地址是否是跨越，很
牛气吧，这里我们的corssDomain为true
s.crossDomain = !!(parts &&
(parts[1] != ajaxLocParts[1] || parts[2] != ajaxLocParts[2] ||
(parts[3] || (parts[1] === "http:" ? 80 : 443)) !=
(ajaxLocParts[3] || (ajaxLocParts[1] === "http:" ? 80 : 443)))
);
}
//如果存在data参数并且 processData=true&&s.data为一个对象吧 -->我们没传data参数,processData参数默认为true，
表示默认序列化参数data
if (s.data && s.processData && typeof s.data !== "string") {
//调用序列化函数
s.data = jQuery.param(s.data, s.traditional);
}
// Apply prefilters
inspectPrefiltersOrTransports(prefilters, s, options, jqXHR); -->发送请求前，调用过滤器将
// If request was aborted inside a prefiler, stop there
if (state === 2) {
return false;
}
// We can fire global events as of now if asked to
fireGlobals = s.global;
// Uppercase the type
s.type = s.type.toUpperCase();
// Determine if request has content
//rnoContent= /^(?:GET|HEAD)$/
s.hasContent = !rnoContent.test(s.type);
// Watch for a new set of requests
if (fireGlobals && jQuery.active++ === 0) {
jQuery.event.trigger("ajaxStart");
}
// More options handling for requests with no content
if (!s.hasContent) {
//如果data参数存在,则append to url
if (s.data) { -->我们以前是不是喜欢xx.php?data="xx"&&.. 这里会把序列化
后的data传到问号后面，很简单吧
//rquery = /\?/请求的url是否存在"?" 就比如请求"user.php?" -->这就是为什么data参数会被传到url？后面
s.url += (rquery.test(s.url) ? "&" : "?") + s.data;
// #9682: remove data so that it's not used in an eventual retry
delete s.data;
}
// Get ifModifiedKey before adding the anti-cache parameter
ifModifiedKey = s.url;
// Add anti-cache in url if needed
if (s.cache === false) {
var ts = jQuery.now(),
// try replacing _= if it is there
ret = s.url.replace(rts, "$1_=" + ts);
// if nothing was replaced, add timestamp to the end
s.url = ret + ((ret === s.url) ? (rquery.test(s.url) ? "&" : "?") + "_=" + ts : "");
}
}
// Set the correct header, if data is being sent
if (s.data && s.hasContent && s.contentType !== false || options.contentType) {
jqXHR.setRequestHeader("Content-Type", s.contentType);
}
// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if (s.ifModified) {
ifModifiedKey = ifModifiedKey || s.url;
if (jQuery.lastModified[ifModifiedKey]) {
jqXHR.setRequestHeader("If-Modified-Since", jQuery.lastModified[ifModifiedKey]);
}
if (jQuery.etag[ifModifiedKey]) {
jqXHR.setRequestHeader("If-None-Match", jQuery.etag[ifModifiedKey]);
}
}
/*设置dataType,达到预期服务器返回的数据类型，如果没有dataType参数，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
默认的s.accepts= accepts: {xml: "application/xml, text/xml",
html: "text/html",text: "text/plain",json: "application/json, text/javascript","*": allTypes}
allTypes= ['*\/']+['*'] 如果设置了dataType参数,即 s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().split(/\s+/);
比如：$(url,{dataType:"json"}) 这里第二个参数将成为 "application/json, text/javascript"+",*\/*;q=0.01"
*/
jqXHR.setRequestHeader(
"Accept",
s.dataTypes[0] && s.accepts[s.dataTypes[0]] ?
s.accepts[s.dataTypes[0]] + (s.dataTypes[0] !== "*" ? ", " + allTypes + "; q=0.01" : "") :
s.accepts["*"]
);
//检查头部是否是指了参数 s.headers={} 一个额外的"{键:值}"对映射到请求一起发送 -->我们没设置头部
for (i in s.headers) {
jqXHR.setRequestHeader(i, s.headers[i]);
}
// Allow custom headers/mimetypes and early abort
if (s.beforeSend && (s.beforeSend.call(callbackContext, jqXHR, s) === false || state === 2)) {
// Abort if not done already
jqXHR.abort();
return false;
}
//$.ajax().success(callback).error(callback).complete(callback) 在这里增加callback，这里表面现在的ajax请求可以不止一个回调函数
for (i in { success: 1, error: 1, complete: 1 }) {
jqXHR[i](s[i]);
}
// Get transport
transport = inspectPrefiltersOrTransports(transports, s, options, jqXHR);
// If no transport, we auto-abort
if (!transport) {
done(-1, "No Transport");
} else {
jqXHR.readyState = 1;
// Send global event
if (fireGlobals) {
globalEventContext.trigger("ajaxSend", [jqXHR, s]);
}
// Timeout设置请求超时时间（毫秒）,超时请求后，jqXHR.abort() 中止请求,简单的意思就是在指定的时间内还未响应，停止请求
if (s.async && s.timeout > 0) {
timeoutTimer = setTimeout(function () { -
->这里知道我们为什么设置timeout了吧，就是如果在timeout时间内还没请求到数据
jqXHR.abort("timeout"); 肯定得停止了，如何停止的，得看abort.提前是我们设置了这个参数并且是异步请求
}, s.timeout);
}
try {
state = 1;
transport.send(requestHeaders, done);
-->这个方法就能知道jQuery是如何异步跨越请求这个js文件的，见下面分析
} catch (e) {
// Propagate exception as error if not done
if (state < 2) { -->处理上面这个方法的异常，万一你传得url不存在呢。。。
done(-1, e);
// Simply rethrow otherwise
} else {
jQuery.error(e);
}
}
}
return jqXHR; -->分析到这里，怎么办了？其实看出来，我们只分析了$.ajax()并没用分析后面那段链式操作,
}, 还有js文件怎么请求的，请求到哪儿了？先回到上面的done方法
上面代码的-->指出了这段代码关键的运行，以及为什么我们可以直接$.ajax().done().done()异步处理任务，而且可以同时增加多个回调函数，这多得多亏$.Deferred().
好吧，重点来分析怎么transport.send(requestHeaders,done)来跨域请求我们的js文件吧...怎么jQuery一个ajax这么复杂？还不是为了迎合上千万使用者不同的使用目的。也许对你来说，
你只需要一个简单的ajax请求，我才不管他跨域了没有！这里就是jQuery的一个缺点吧，木办法啊，你们怎么多使用者，我要每个都照顾啊！好吧，来分析js怎么请求的吧
/* 绑定script分发器,通过在header中创建script标签异步载入js. -->看到这里，你会有点了解这个transports分发器在干什么了，
谁叫你要请求js文件啊，还是跨域的，我平时就请求一个.php，没想这么多~_~,
原来ajax可以请求这么多东西
*/
jQuery.ajaxTransport("script", function (s) { if (s.crossDomain) { -->我可是跨域请求哦 var script,
head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; //一步步的获取head元素 return {
/*以下即是异步加载js的常用方法
*/
send: function (_, callback) { -->尼玛的send方法在这里，藏得太深了 script = document.createElement("script"); -->好吧，看到这里，你觉得是不是突然jQuery里怎么会有这么简单的代码了？ script.async = "async"; if (s.scriptCharset) {
script.charset = s.scriptCharset;
} script.src = s.url; // script加载完成触发的callback
script.onload = script.onreadystatechange = function (_, isAbort) { -->js文件加载后的callback
//中止script回调请求或者不存在readyState|| load|complete状态
if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) { //处理ie下得内存泄露问题 ,onload事件触发后，销毁事件.
script.onload = script.onreadystatechange = null; if (head && script.parentNode) { ->head.removeChild(script)?你把我才加载进来的js文件删了
干嘛啊，自己想吧
head.removeChild(script); //加载过后删除script标签元素
} // 注销script变量
script = undefined; ->真把加载进来的script清的一干而尽,看来只能跨域请求js，然后执行一次callback而已，
->有点划不来吧 ~_~ // 如果没有被中止调用callback
if (!isAbort) {
callback(200, "success"); ->这个callback是神马呢?就是上面的done方法,然后这个done方法里面根据不
同的status进行不同的请求，你没忘吧！
}
}
};
//把创建的script加入head头部,但是加载完成后会被清除该script标签
head.insertBefore(script, head.firstChild);
-->把我们请求的js文件加到头部,不加到头部没办法执行里面的函数 ~_~，
执行了又把人家删了
},
/*手动中止script请求
*/
abort: function () { --> 好吧，我们没有abort
if (script) {
script.onload(0, 1);
}
}
};
}
});
这只是一个简单的跨域请求js文件，怎么这么多代码？哎，这个jQuery ajax的参数配置太多了，他会不停的if再if ，这些if造就了jQuery的调用接口这么灵活了，可以这么写，也可以那么写，满足不同
的人的口味。 分析到这里，可能你已经头很大了，木办法，它确实很难，这只是ajax的一部分。
好吧，我承认上面都是低级$.ajax方法，为了满足调用者使用更简单，作者提供了$.get() $.post(),$.getScript(),$.getJSON()，哎，一切为了减少使用者的负担啊，本来是没必要加这些代码的
还是来看看，这几个方法怎么基于$.ajax写出来的，其实很简单了，如果你真真看懂了$.ajax ~_~
/*这里遍历数组扩展$.get() $.post();其实都还是调用的$.ajax，只是type不同
* 这里$.ajax还是返回jqXHR,它与以前版本不同之处是它是超集的XMLHTTPRequest，由于deferred.promise(jqXHR);使这个jqXHR多了一些done,fail,always方法，
* 当然也可以success,fail,complete其实这些方法就是done,fail,always，详情可见$.ajax和$.Deferred对象
*/
jQuery.each(["get", "post"], function (i, method) { -->老生常谈得遍历数组，扩展$.method ,
以后我一定帮你们分析下jQuery核心库代码^_^
jQuery[method] = function (url, data, callback, type) {
//这里就是$.get("url",function(){})式的调用方法
if (jQuery.isFunction(data)) { //统一成$.get("url",data,function(){})
type = type || callback;
callback = data;
data = undefined; //把第二个参数设置成undefined,其目的也是是$.get()的接口灵活，
//从这里可以看出jQuery的调用接口灵活还是基于强大的if判断语句
}
//这里返回1.5版本之前的ajax调用方式
return jQuery.ajax({ -->搞来搞去还是$.ajax，只是帮你设置了参数了
type: method, //get or post
url: url,
data: data,
success: callback,
dataType: type
});
};
}); getScript: function (url, callback) { ->尼玛的，还是调用的get,话说这个方法可以用了动态加载js文件，也可以按需加载哦，
相当于jQuery的js加载器吧，好扯的加载器，
return jQuery.get(url, undefined, callback, "script");
},
//json文件，所有在JSON字符串表示，无论是属性或值，必须用双引号括起来,如{"key1":"value1","key2",:"value2"}保存在一个test.json文件中
//$.getJSON("test.json",function(data){$.each(data,function(key,value){})});
getJSON: function (url, data, callback) {
return jQuery.get(url, data, callback, "json");
},
最新文章
- hosts.allow和hosts.deny
- system generator 卷积编码器快速设计
- CEF3开发者系列之JS与C++交互之一
- 在C#中实现Python的分片技术
- 实际举例C#引用类型和值类型的区别<网摘>
- 控件风格19种，必须倒背如流——其实就是控件所拥有的能力，即有条件使用VCL框架所提供的（功能）代码
- Deep learning From Image to Sequence
- [HDU1001] Sum Problem
- angularjs 动态显示内容适用于$modal
- （2018 Multi-University Training Contest 2）Problem G - Naive Operations
- poj3662 二分+最短路
- position属性absolute与relative 的区别
- Spring Boot 揭秘与实战（二） 数据缓存篇 - Redis Cache
- Bing Developer Assistant开发随记
- grep 正则表达
- Photoshop图层混合模式计算公式大全
- vim分屏
- WPF INotifyPropertyChanged
- python教程（零）·前言
- fpdf中文乱码，添加字符集