正文

之前歸納了ajax技術(shù)的基礎(chǔ)知識,汗顏的是這兩篇本應該在年初補上的,但因為種種原因,并沒有補上.不過還好最近有空,所以開始整理之前的日記.共分為兩篇:對于zepto ajax代碼的實現(xiàn)解析;對于jQuery ajax代碼的實現(xiàn)解析;

變量定義

關(guān)于基礎(chǔ)部分的知識,有興趣的可以查看Ajax的實現(xiàn)及使用-原生對象.

這里整理的是自己在閱讀zepto的ajax實現(xiàn)源碼時的一些感悟.

這是開頭的局部變量,其中可以大概了解作用的,除了正則表達式之外,originAnchor這個對象,就蠻有意思的,其在內(nèi)部緩存了當前瀏覽器訪問地址.在下面的函數(shù)里,應當是用來驗證信息的.

全局的參數(shù)大概就是這樣,最關(guān)鍵的應當是其中定義的xhr對象,直接返回XMLHttpRequest對象,當然,這里沒有做兼容.

在源碼里還有個

$.active = 0;

大致上,所有的基礎(chǔ)參數(shù)就是這么多了

入口

這里對于參數(shù)做了處理,保證每次的參數(shù)都會是一個局部變量,不會影響外部的原始參數(shù).

deferred這個參數(shù)應當是用來執(zhí)行promise的相關(guān)操作,而不是用回調(diào)來實現(xiàn).

真正的開始是

ajaxStart(settings);

function ajaxStart(settings) {

if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')

}

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

然后如果沒有修改默認配置的global,則開始執(zhí)行

這兩個函數(shù).

用于觸發(fā)全局事件,這就相當于是留了一個鉤子,用于擴展ajax的功能.

使用類似:

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

// dosomething

})

繼續(xù)執(zhí)行

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

還通過serializeData()函數(shù)進行參數(shù)序列化,如果類型是get,則

options.url = appendQuery(options.url, options.data), options.data = undefined

url會加上拼接而成的字符串,參數(shù)設(shè)置為:

{

name:"test"

}

就會變成類似

轉(zhuǎn)換方法主要是

可以看到最主要的還是params.add(),用于將對象轉(zhuǎn)為字符串,這里的traditional我確實沒有怎么用到過這種參數(shù)結(jié)構(gòu),暫且不表.

最后的返回,通過array的join,轉(zhuǎn)為以&分割的字符串.

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

這里就是設(shè)置各種頭部信息的地方,當然,如果沒有傳任何參數(shù),則會默認使用當前頁面的頭部信息,并在最后傳遞給

xhr.setRequestHeader = setHeader

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

可以看到,仍然使用了xhr對象的onreadystatechange()方法,監(jiān)聽請求發(fā)送的情況,當然,在發(fā)送請求之前,如果想結(jié)束該請求,那么可以在settings的beforeSend()回調(diào)中返回false.

在對于status狀態(tài)碼進行判斷時,多加了一個

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

這里主要對于本地文件進行了處理.

因為返回的是xhr對象,所以我們可以直接使用abort方法來取消ajax請求,但onreadystatechange()同樣會一直執(zhí)行下去,所以如果不想繼續(xù)執(zhí)行函數(shù)需要加入自己的判定條件,而對于timeout來說,更是要在回調(diào)中拿到事件類型,再決定執(zhí)行事件.

當然這里也對返回的數(shù)據(jù)進行了解析,如果不符合相應的dataType,則會報錯,觸發(fā)parsererror全局事件.

常用回調(diào)

這里就是常用的回調(diào)方法,可以看到,不僅觸發(fā)了相應的全局事件,而且將請求處理信息返回給了用戶.

可以看到,常見的執(zhí)行順序,就如同官方文檔中的差不多

jsonp

對于zepto中的jsonp方法,首先

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

首先就是無法阻止,因為當載入標簽的時候,請求就已經(jīng)發(fā)送出去了,還有無法確定請求是否失敗.

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

document.head.appendChild(script)

這里把設(shè)定的函數(shù)名替換到url中去,在新增的script標簽里,就能開始請求,而通過對于load,error兩個事件的監(jiān)聽,來判斷jsonp是否執(zhí)行成功,以文件是否加載完畢的方式來檢測jsonp的執(zhí)行情況.

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

小結(jié),

本文記錄了我在閱讀zepto關(guān)于ajax的源碼時,所產(chǎn)生的思考,當然,不一定都對.僅做記錄,不斷改進!

總結(jié)

以上是生活随笔為你收集整理的zepto的ajax使用,Ajax的实现及使用-zepto的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。