使用jQuery全局事件ajaxStart為特定請求實(shí)現(xiàn)提示效果的代碼
更新時(shí)間：2010年12月30日 11:45:04 作者：
首先，重寫Ajax方法的代價(jià)太高，仍然可以利用jQuery自身的Ajax Events。
情景
如何在特定的請求上實(shí)現(xiàn)"ajaxStart"的效果？
首先，重寫Ajax方法的代價(jià)太高，仍然可以利用jQuery自身的Ajax Events。
Ajax觸發(fā)的全局事件會(huì)像一個(gè)標(biāo)準(zhǔn)事件一樣傳播到所有DOM節(jié)點(diǎn)上。層級：jQuery Events > Ajax Events > 自定義Ajax事件。
實(shí)現(xiàn)
Wo = window.Wo || {};
Wo.ajax = {
spinner : $([])
,init : function() {
var $spinner = this.spinner = $('#ajax-loading');
var show = function(e) {
if(e.namespace === 'Wo') $spinner.show();
};
var hide = function(e) {
$spinner.hide();
};
$spinner.bind({
'ajaxStart.Wo' : show
,'ajaxStop.Wo' : hide
,'ajaxError.Wo' : hide
});
this.adapt(['getJSON','get','post','ajax']);
}
// 預(yù)備發(fā)送請求
,_prepare : function() {
this.spinner.trigger('ajaxStart.Wo');
}
// 接口批量變更
,adapt : function(fns) {
var self = this;
$.each(fns,function(i,fn) {
Wo[fn] = function() {
self._prepare();
$[fn].apply(this,arguments);
}
});
}
};
有兩種方法可以判斷出觸發(fā)的事件是否為特定的事件：
確定的命名空間。
在觸發(fā)時(shí)傳遞額外的參數(shù)給事件處理程序。
這里用事件的命名空間來進(jìn)行觸發(fā)來源的判斷。adapt方法相當(dāng)于適配器的應(yīng)用，用一套改善的接口替代了另一套接口。
如果要增加load方法，稍微麻煩一點(diǎn)，因?yàn)橛锌赡苁莂jax方法或者元素的onload事件。
要添加一個(gè)代理方法，并進(jìn)行類型判斷：
var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare();
_load.apply(this,arguments);
return this;
};
使用
所有方法參數(shù)仍與原先一致：
Wo.post(url, [data,] callback)
如何在特定的請求上實(shí)現(xiàn)"ajaxStart"的效果？
首先，重寫Ajax方法的代價(jià)太高，仍然可以利用jQuery自身的Ajax Events。
Ajax觸發(fā)的全局事件會(huì)像一個(gè)標(biāo)準(zhǔn)事件一樣傳播到所有DOM節(jié)點(diǎn)上。層級：jQuery Events > Ajax Events > 自定義Ajax事件。
實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
Wo = window.Wo || {};
Wo.ajax = {
spinner : $([])
,init : function() {
var $spinner = this.spinner = $('#ajax-loading');
var show = function(e) {
if(e.namespace === 'Wo') $spinner.show();
};
var hide = function(e) {
$spinner.hide();
};
$spinner.bind({
'ajaxStart.Wo' : show
,'ajaxStop.Wo' : hide
,'ajaxError.Wo' : hide
});
this.adapt(['getJSON','get','post','ajax']);
}
// 預(yù)備發(fā)送請求
,_prepare : function() {
this.spinner.trigger('ajaxStart.Wo');
}
// 接口批量變更
,adapt : function(fns) {
var self = this;
$.each(fns,function(i,fn) {
Wo[fn] = function() {
self._prepare();
$[fn].apply(this,arguments);
}
});
}
};
有兩種方法可以判斷出觸發(fā)的事件是否為特定的事件：
確定的命名空間。
在觸發(fā)時(shí)傳遞額外的參數(shù)給事件處理程序。
這里用事件的命名空間來進(jìn)行觸發(fā)來源的判斷。adapt方法相當(dāng)于適配器的應(yīng)用，用一套改善的接口替代了另一套接口。
如果要增加load方法，稍微麻煩一點(diǎn)，因?yàn)橛锌赡苁莂jax方法或者元素的onload事件。
要添加一個(gè)代理方法，并進(jìn)行類型判斷：
復(fù)制代碼 代碼如下:
var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare();
_load.apply(this,arguments);
return this;
};
使用
所有方法參數(shù)仍與原先一致：
復(fù)制代碼 代碼如下:
Wo.post(url, [data,] callback)
您可能感興趣的文章:
- jquery ajax請求方式與提示用戶正在處理請稍等
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- ajax 自動(dòng)完成下拉框 自動(dòng)提示位置問題
- asp+ajax仿google搜索提示效果代碼
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
- jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
- Ajax實(shí)現(xiàn)智能提示搜索功能
- Ajax帶提示的驗(yàn)證表單實(shí)例
- jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開提示錯(cuò)誤的bug解決方法
- ajax實(shí)現(xiàn)輸入提示效果
相關(guān)文章
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09
jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
下面小編就為大家?guī)硪黄猨Query事件綁定方法學(xué)習(xí)總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery頭像裁剪工具jcrop用法實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實(shí)例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)form表單元素序列化為json對象的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)form表單元素序列化為json對象的方法,涉及jQuery基于serializeArray方法實(shí)現(xiàn)表單序列化的相關(guān)技巧,需要的朋友可以參考下2015-12-12
jQuery+ajax實(shí)現(xiàn)實(shí)用的點(diǎn)贊插件代碼
本文給大家分享的是作者在自己的博客上使用jQuery+ajax實(shí)現(xiàn)實(shí)用的點(diǎn)贊插件代碼，這里推薦給大家，希望對大家能夠有所幫助。2016-07-07
jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
鼠標(biāo)經(jīng)過時(shí)圖片產(chǎn)生塌陷，實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可，下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-11-11
Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
Jquery AJAX實(shí)現(xiàn)頁面的統(tǒng)計(jì)代碼，后臺用的是php,這篇文章主要是學(xué)習(xí)jquery下ajax的簡單實(shí)現(xiàn)。2010-06-06
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼，使用jQuery UI Autocomplete的朋友可以參考下2012-04-04
這篇文章主要介紹了jQuery解析XML 實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09