上一篇文章 ，將jQuery.ajax中的一些細節補充完。這篇文章講解如果將類AJAX方法都包裝進jQuery.ajax中。下篇文章則講解各預過濾器和分發器的細節。
?
為什么要包裝起來？?
我們知道，古老的XMLHttpRequest出于同源策略考慮，是不支持跨域的。所以，在前端想動態加載跨域Javascript腳本，通常是使用被稱為Script DOM Element的方案，如：
var
scriptElem = document.createElement("script"
);
scriptElem.src
= "http://anydomain.com/A.js"
;
document.getElementsByTagName(
"head")[0].appendChild(scriptElem);
同理，JSON也無法通過XMLHttpRequest進行跨域，所以利用Script DOM Element，將JSON填入一個回調函數中來實現其跨域，也就是JSONP（JSON with padding， 填充式JSON或參數式JSON）。
實際上JSONP就是將，得到JSON后回調的函數通過GET傳參告訴服務器，然后服務器拼接一段腳本，用該回調函數并參數為需要的JSON數據，如：
callback({ "name": "Justany_WhiteSnow" });
jQuery團隊當然希望開發者開發的時候，不需要想需不需要跨域，只要直接使用就行了。
所以他們把XMLHttpRequest、Script DOM Element、JSONP包裝起來，都當成AJAX來使用。
這里順便提一下，其實現代瀏覽器（Firefox 3.5+、Safari 4+、Chrome等）中，通過XMLHttpRequeest實現了CORS（Cross-Origin Resource Sharing， 跨源資源共享）原生支持。也就是XMLHttpRequest在某些瀏覽器中，實際上是可以跨域的，只需要設置一下HTTP Response Header中的Access-Control-Allow-Origin。比如設置成通配符*。
而IE8也引入XDomainRequest也實現了CORS。
但畢竟某些瀏覽器不行，所以，咳咳……這不能成為一種通用方案。
?
怎么包裝起來？?
首先我們有一個山寨XHR對象，也就是jqXHR對象。通過對其添加 send、 abort來模擬XHR對象。
可是我們需要在不同方案執行前先處理一下特異性的東東，所以我們需要一個預過濾機制（ Prefilter ）來預先處理一下。
然后我們需要知道到底應當用那一套方案來執行整個過程，所以我們需要一個分發機制（ Transport ）來得到最后的jqXHR對象。
?
inspectPrefiltersOrTransports
我們在jQuery.ajax找到了預過濾和分發機制的函數，inspectPrefiltersOrTransports。
//
預過濾
inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
//
……
//
得到transport
transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
然后我們看看這個函數在干些什么。
//
檢測函數，預過濾或者分發器
function
inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {
//
定義個參數對象
var
inspected =
{},
//
看看傳進來的結構體是prefilters， 還是transports
//
如果是prefilters，證明這是預過濾過程，如果是transports分發過程
//
所以這個是，是不是在分發過程
seekingTransport = ( structure ===
transports );
function
inspect( dataType ) {
var
selected;
//
將inspected的dataType對應屬性設置成true
inspected[ dataType ] =
true
;
//
遍歷prefilters對應dataType對象中的所有過濾器或者轉換器工廠函數
jQuery.each( structure[ dataType ] || [],
function
( _, prefilterOrFactory ) {
//
得到dataType或者轉換器
var
dataTypeOrTransport =
prefilterOrFactory( options, originalOptions, jqXHR );
//
如果dataType為字符串，即上面過程是過濾器
//
如果在預過濾過程
//
并且這個過濾出來的dataType不等于剛開始傳進來的dataType
if
(
typeof
dataTypeOrTransport === "string" && !seekingTransport && !
inspected[ dataTypeOrTransport ] ) {
//
將現在這個新的dataType插入到options中
options.dataTypes.unshift( dataTypeOrTransport );
//
檢測新的dataType
inspect( dataTypeOrTransport );
return
false
;
//
否則如果在分發過程
}
else
if
( seekingTransport ) {
//
定義selected為dataTypeOrTransport
return
!( selected =
dataTypeOrTransport );
}
});
return
selected;
}
//
檢查dataTypes數組的第一個，如果結果是undefined，
//
則看看上面檢查的是不是通配符*，如果不是則檢查通配符
return
inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*"
);
}
我們可以看到，這個函數實際上就是從prefilters和transports中取出對應dataType的東東，然后過濾或者分發。
那么怎么定義prefilters和transports這兩個對象的呢？
?
jQuery.ajaxPrefilter & jQuery.ajaxTransport
實際上，jQuery是通過這兩個接口來定義上面兩個對象的內容的，一個是定義預過濾器，另一個則定義分發器。
jQuery.ajaxPrefilter =
addToPrefiltersOrTransports( prefilters );
jQuery.ajaxTransport
= addToPrefiltersOrTransports( transports );
而這兩個方法都是由addToPrefiltersOrTransports生成的。
?
addToPrefiltersOrTransports
//
jQuery.ajaxPrefilter和jQuery.ajaxTransport的構造函數
function
addToPrefiltersOrTransports( structure ) {
//
dataTypeExpression是可選參數，缺省值為*
return
function
( dataTypeExpression, func ) {
//
如果dataTypeExpression不是字符串
//
模擬重載
if
(
typeof
dataTypeExpression !== "string"
) {
func
=
dataTypeExpression;
//
缺省為*
dataTypeExpression = "*"
;
}
var
dataType,
i
= 0
,
//
將dataTypeExpression轉為小寫，并用空白拆成數組
dataTypes = dataTypeExpression.toLowerCase().match( core_rnotwhite ) ||
[];
//
如果func是一個函數
if
( jQuery.isFunction( func ) ) {
//
遍歷dataTypeExpression中的所有dataType
while
( (dataType = dataTypes[i++
]) ) {
//
如果有必要則刪除頭部的+號
if
( dataType[0] === "+"
) {
//
刪除+號
dataType = dataType.slice( 1 ) || "*"
;
//
往structure對應的dataType中推入func函數
(structure[ dataType ] = structure[ dataType ] ||
[]).unshift( func );
//
否則不需要處理
}
else
{
//
往structure對應的dataType中推入func函數
(structure[ dataType ] = structure[ dataType ] ||
[]).push( func );
}
}
}
};
}
接下來就是通過調用jQuery.ajaxPrefilter和jQuery.ajaxTransport方法，添加預過濾器和分發器來完成包裝。
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
