使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
人气:0
情景
如何在特定的请求上实现"ajaxStart"的效果？
首先，重写Ajax方法的代价太高，仍然可以利用jQuery自身的Ajax Events。
Ajax触发的全局事件会像一个标准事件一样传播到所有DOM节点上。层级：jQuery Events > Ajax Events > 自定义Ajax事件。
实现
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']);
}
// 预备发送请求
,_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);
}
});
}
};
有两种方法可以判断出触发的事件是否为特定的事件：
确定的命名空间。
在触发时传递额外的参数给事件处理程序。
这里用事件的命名空间来进行触发来源的判断。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)
如何在特定的请求上实现"ajaxStart"的效果？
首先，重写Ajax方法的代价太高，仍然可以利用jQuery自身的Ajax Events。
Ajax触发的全局事件会像一个标准事件一样传播到所有DOM节点上。层级：jQuery Events > Ajax Events > 自定义Ajax事件。
实现
复制代码 代码如下:
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']);
}
// 预备发送请求
,_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);
}
});
}
};
有两种方法可以判断出触发的事件是否为特定的事件：
确定的命名空间。
在触发时传递额外的参数给事件处理程序。
这里用事件的命名空间来进行触发来源的判断。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)
加载全部内容