使用jQuery全局事件ajaxStart為特定請求實現(xiàn)提示效果的代碼
更新時間：2010年12月30日 11:45:04 作者：
首先，重寫Ajax方法的代價太高，仍然可以利用jQuery自身的Ajax Events。
情景
如何在特定的請求上實現(xiàn)"ajaxStart"的效果？
首先，重寫Ajax方法的代價太高，仍然可以利用jQuery自身的Ajax Events。
Ajax觸發(fā)的全局事件會像一個標準事件一樣傳播到所有DOM節(jié)點上。層級：jQuery Events > Ajax Events > 自定義Ajax事件。
實現(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']);
}
// 預備發(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ā)時傳遞額外的參數給事件處理程序。
這里用事件的命名空間來進行觸發(fā)來源的判斷。adapt方法相當于適配器的應用，用一套改善的接口替代了另一套接口。
如果要增加load方法，稍微麻煩一點，因為有可能是ajax方法或者元素的onload事件。
要添加一個代理方法，并進行類型判斷：
var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare();
_load.apply(this,arguments);
return this;
};
使用
所有方法參數仍與原先一致：
Wo.post(url, [data,] callback)
如何在特定的請求上實現(xiàn)"ajaxStart"的效果？
首先，重寫Ajax方法的代價太高，仍然可以利用jQuery自身的Ajax Events。
Ajax觸發(fā)的全局事件會像一個標準事件一樣傳播到所有DOM節(jié)點上。層級：jQuery Events > Ajax Events > 自定義Ajax事件。
實現(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']);
}
// 預備發(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ā)時傳遞額外的參數給事件處理程序。
這里用事件的命名空間來進行觸發(fā)來源的判斷。adapt方法相當于適配器的應用，用一套改善的接口替代了另一套接口。
如果要增加load方法，稍微麻煩一點，因為有可能是ajax方法或者元素的onload事件。
要添加一個代理方法，并進行類型判斷：
復制代碼 代碼如下:
var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare();
_load.apply(this,arguments);
return this;
};
使用
所有方法參數仍與原先一致：
復制代碼 代碼如下:
Wo.post(url, [data,] callback)
相關文章
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄猨Query事件綁定方法學習總結(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結合實例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery實現(xiàn)form表單元素序列化為json對象的方法
這篇文章主要介紹了jQuery實現(xiàn)form表單元素序列化為json對象的方法,涉及jQuery基于serializeArray方法實現(xiàn)表單序列化的相關技巧,需要的朋友可以參考下2015-12-12
本文給大家分享的是作者在自己的博客上使用jQuery+ajax實現(xiàn)實用的點贊插件代碼，這里推薦給大家，希望對大家能夠有所幫助。2016-07-07
鼠標經過時圖片產生塌陷，實則應該將邊框控制直接加在IMG標簽上即可，下面有個不錯的示例，大家可以感受下2013-11-11
Jquery AJAX實現(xiàn)頁面的統(tǒng)計代碼，后臺用的是php,這篇文章主要是學習jquery下ajax的簡單實現(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 實例詳解的相關資料,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄猨query基本選擇器匹配多個元素的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09