Ajax的實現及使用 zepto

之前歸納了ajax技術的基礎知識,汗顏的是這兩篇本應該在年初補上的,但因為種種原因,並沒有補上.不過還好最近有空,所以開始整理之前的日記.共分為兩篇:對於zepto ajax**的實現解析;對於jquery ajax**的實現解析;

關於基礎部分的知識,有興趣的可以檢視ajax的實現及使用-原生物件.

這裡整理的是自己在閱讀zepto的ajax實現原始碼時的一些感悟.

這是開頭的區域性變數,其中可以大概了解作用的,除了正規表示式之外,originanchor這個物件,就蠻有意思的,其在內部快取了當前瀏覽器訪問位址.在下面的函式裡,應當是用來驗證資訊的.

全域性的引數大概就是這樣,最關鍵的應當是其中定義的xhr物件,直接返回xmlhttprequest物件,當然,這裡沒有做相容.

在原始碼裡還有個

$.active = 0;

大致上,所有的基礎引數就是這麼多了

這裡對於引數做了處理,保證每次的引數都會是乙個區域性變數,不會影響外部的原始引數.

deferred這個引數應當是用來執行promise的相關操作,而不是用**來實現.

真正的開始是

ajaxstart(settings);
function ajaxstart(settings)

這裡用active做判斷,只有當active=0時,$.active++ === 0才成立.

然後如果沒有修改預設配置的global,則開始執行

這兩個函式.

用於觸發全域性事件,這就相當於是留了乙個鉤子,用於擴充套件ajax的功能.

使用類似:

$(document).on('ajaxbeforesend', function(e, xhr, options))

繼續執行

這裡除了判斷是否是跨域,

還通過serializedata()函式進行引數序列化,如果型別是get,則

url會加上拼接而成的字串,引數設定為:

就會變成類似

轉換方法主要是

可以看到最主要的還是params.add(),用於將物件轉為字串,這裡的traditional我確實沒有怎麼用到過這種引數結構,暫且不表.

最後的返回,通過array的join,轉為以&分割的字串.

而在settings.cache為false或者該請求是乙個jsonp的情況下,給其url加上時間戳.

這裡就是設定各種頭部資訊的地方,當然,如果沒有傳任何引數,則會預設使用當前頁面的頭部資訊,並在最後傳遞給

xhr.setrequestheader = setheader

接下來就是$.ajax方法的核心

可以看到,仍然使用了xhr物件的onreadystatechange()方法,監聽請求傳送的情況,當然,在傳送請求之前,如果想結束該請求,那麼可以在settings的beforesend()**中返回false.

在對於status狀態碼進行判斷時,多加了乙個

(xhr.status == 0 && protocol == 'file:')

這裡主要對於本地檔案進行了處理.

因為返回的是xhr物件,所以我們可以直接使用abort方法來取消ajax請求,但onreadystatechange()同樣會一直執行下去,所以如果不想繼續執行函式需要加入自己的判定條件,而對於timeout來說,更是要在**中拿到事件型別,再決定執行事件.

當然這裡也對返回的資料進行了解析,如果不符合相應的datatype,則會報錯,觸發parsererror全域性事件.

這裡就是常用的**方法,可以看到,不僅觸發了相應的全域性事件,而且將請求處理資訊返回給了使用者.

可以看到,常見的執行順序,就如同官方文件中的差不多

對於zepto中的jsonp方法,首先

可以看到,仍然是通過標籤的方式,動態引入,但這種方法缺點也很明顯

首先就是無法阻止,因為當載入標籤的時候,請求就已經傳送出去了,還有無法確定請求是否失敗.

script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackname)

這裡把設定的函式名替換到url中去,在新增的script標籤裡,就能開始請求,而通過對於load,error兩個事件的監聽,來判斷jsonp是否執行成功,以檔案是否載入完畢的方式來檢測jsonp的執**況.

至於其他,比如$.get,$.post等,都是使用$.ajax的一種快捷方式,就不加說明了