我們知道 Ajax 的底層實現(xiàn)其實是很簡單的(拋開IE不說),標(biāo)準(zhǔn)的 w3c 直接提供了 XMLHttpRequest 方法。我們主要站在設(shè)計的角度來理解,如何設(shè)計出低耦合高內(nèi)聚的代碼 jQuery 對 Ajax 的處理主要體現(xiàn)在對瀏覽器兼容,數(shù)據(jù)的處理過濾以及各種事件的封裝上,主要有以下幾部分?jǐn)U展:
提供快捷接口 提供底層接口 提供數(shù)據(jù)序列化 提供全局 Ajax 事件處理
分析下面一個demo
給 document 綁定 ajaxStart、ajaxComplete 回調(diào)事件,trigger 綁定一個點擊事件。通過 click 觸發(fā)事件發(fā)送一個 ajax 請求,并且通過 complete、done、ajaxStart、ajaxComplete 返回狀態(tài)回調(diào)。
$(document).ajaxStart(function() { console.log(arguments) }).ajaxComplete(function() { $(".log").text("Triggered ajaxComplete handler."); }); $(".trigger").click(function() { //發(fā)送ajax請求 $.ajax({ url: "php.html", context: document.body, complete: function() { console.log(this) } }).done(function() { console.log(this) }); });
這里實現(xiàn)比較特別的地方,針對 ajax 提供 3 種回調(diào)方式:
換句話說,針對ajax的請求,每一步的狀態(tài)、成功、失敗或者進(jìn)行中,我們有 3 種方式可以監(jiān)聽,但是每一種還是有各自的區(qū)別:
那么我們思考下為什么要設(shè)計這么多接口?這么多功能怎么融合在一起的?
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報