使用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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 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接口中interface存在的意义
2013/06/27 PHP
php通过session防url攻击方法
2014/12/10 PHP
php 问卷调查结果统计
2015/10/08 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
利用Python破解斗地主残局详解
2017/06/30 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python模拟用户登录验证
2017/09/11 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
现金会计岗位职责
2013/12/05 职场文书
银行内勤岗位职责
2014/04/09 职场文书
学习之星事迹材料
2014/05/17 职场文书
大班亲子运动会方案
2014/06/10 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
详解MySQL的半同步
2021/04/22 MySQL
go语言求任意类型切片的长度操作
2021/04/26 Golang
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Python极值整数的边界探讨分析
2021/09/15 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis