使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码


Posted in Javascript onDecember 30, 2010

情景
如何在特定的请求上实现"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)
Javascript 相关文章推荐
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 #Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 #Javascript
js TextArea的选中区域处理
Dec 28 #Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 #Javascript
JS date对象的减法处理实现代码
Dec 28 #Javascript
javascript中检测变量的类型的代码
Dec 28 #Javascript
javascript中的作用域scope介绍
Dec 28 #Javascript
You might like
php和javascript之间变量的传递实现代码
2012/12/19 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
Git命令之分支详解
2021/03/02 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python中用于计算对数的log()方法
2015/05/15 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python中turtle库的使用实例
2019/09/09 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
Prototype如何更新局部页面
2013/03/03 面试题
学校后勤人员职责
2013/12/27 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
家长会欢迎标语
2014/06/24 职场文书
四风对照检查材料范文
2014/09/27 职场文书
行为习惯主题班会
2015/08/14 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers