正文

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

變量定義

關于基礎部分的知識,有興趣的可以查看Ajax的實現及使用-原生對象.

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

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

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

在源碼里還有個

$.active = 0;

大致上,所有的基礎參數就是這么多了

入口

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

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

真正的開始是

ajaxStart(settings);

function ajaxStart(settings) {

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

}

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

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

這兩個函數.

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

使用類似:

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

// dosomething

})

繼續執行

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

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

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

url會加上拼接而成的字符串,參數設置為:

{

name:"test"

}

就會變成類似

轉換方法主要是

可以看到最主要的還是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全局事件.

常用回調

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

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

jsonp

對于zepto中的jsonp方法,首先

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

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

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

document.head.appendChild(script)

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

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

小結,

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。