使用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中获取请求的URL参数
Dec 22 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
JS原形与原型链深入详解
May 09 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
基于JavaScript实现省市联动效果
Jun 22 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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
定义php常量的详解
2013/06/09 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python模块的加载讲解
2019/01/15 Python
Python字典对象实现原理详解
2019/07/01 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
迎新晚会邀请函
2014/02/01 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
秋季运动会广播稿
2014/02/22 职场文书
高中军训感言800字
2014/03/05 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android