快捷導(dǎo)航

使用jQuery全局事件ajaxStart為特定請求實現(xiàn)提示效果的代碼

更新時間：2010年12月30日 11:45:04 作者：

首先，重寫Ajax方法的代價太高，仍然可以利用jQuery自身的Ajax Events。

情景
如何在特定的請求上實現(xiàn)"ajaxStart"的效果？
首先，重寫Ajax方法的代價太高，仍然可以利用jQuery自身的Ajax Events。
Ajax觸發(fā)的全局事件會像一個標(biāo)準(zhǔn)事件一樣傳播到所有DOM節(jié)點上。層級：jQuery Events > Ajax Events > 自定義Ajax事件。
實現(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ù)給事件處理程序。
這里用事件的命名空間來進行觸發(fā)來源的判斷。adapt方法相當(dāng)于適配器的應(yīng)用，用一套改善的接口替代了另一套接口。
如果要增加load方法，稍微麻煩一點，因為有可能是ajax方法或者元素的onload事件。
要添加一個代理方法，并進行類型判斷：

復(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)

您可能感興趣的文章: