使用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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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 代码优化的42条建议 推荐
2009/09/25 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python实现将xml导入至excel
2015/11/20 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python实现爬山算法的思路详解
2019/04/09 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
大学生演讲稿范文
2014/01/11 职场文书
《长城》教学反思
2014/02/14 职场文书
进步之星获奖感言
2014/02/22 职场文书
库房管理员岗位职责
2014/03/09 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书