jQuery是一款非常強(qiáng)大的Javascript庫(kù),其中的load方法是用來(lái)加載遠(yuǎn)程數(shù)據(jù)到當(dāng)前頁(yè)面中。
在使用load方法時(shí),我們可以直接傳入一個(gè)需要加載的頁(yè)面url,并指定加載成功后需要執(zhí)行的回調(diào)函數(shù)。但是,如果需要對(duì)源碼進(jìn)行深入分析和定制化的話(huà),我們就需要了解load方法的源代碼。
jQuery.fn.load = function (url, params, callback) {
var selector, type, response,
self = this,
off = url.indexOf(" ");
if (off >-1) {
selector = jQuery.trim(url.slice(off, url.length));
url = url.slice(0, off);
}
if (jQuery.isFunction(params)) {
callback = params;
params = undefined;
} else if (params && typeof params === "object") {
type = "POST";
}
if (self.length >0) {
jQuery.ajax({
url: url,
// Send data to the server
type: type || "GET",
dataType: "html",
data: params
}).done(function (responseText) {
// Save response for use in complete callback
response = arguments;
self.html(selector ?
// If a selector was specified, locate the right elements in a dummy div
// Exclude scripts to avoid IE 'Permission Denied' errors
jQuery("").append(jQuery.parseHTML(responseText)).find(selector) :
// Otherwise use the full result
responseText);
}).complete(callback && function (jqXHR, status) {
self.each(callback, response || [jqXHR.responseText, status, jqXHR]);
});
}
return this;
};上述代碼中,我們可以看到load方法的實(shí)現(xiàn)大致分為以下幾步:
- 對(duì)傳入的url進(jìn)行處理,如果其中包含了選擇器,則將選擇器分離。
- 判斷是否有傳入params參數(shù),如果有則使用POST方式向服務(wù)器請(qǐng)求數(shù)據(jù)。
- 使用jQuery.ajax方法向服務(wù)器請(qǐng)求數(shù)據(jù),并保存請(qǐng)求的結(jié)果。
- 將請(qǐng)求結(jié)果中的指定部分(如果有選擇器)插入到當(dāng)前頁(yè)面中。
- 執(zhí)行回調(diào)函數(shù)(如果有)。
通過(guò)深入分析源代碼,我們可以根據(jù)實(shí)際需求進(jìn)行針對(duì)性的修改和定制化,從而讓load方法更加適應(yīng)我們的需求。