使用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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
JS出现404错误原理及解决方案
Jul 01 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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分页类
2015/11/12 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
28个JS验证函数收集
2010/03/02 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
对python 命令的-u参数详解
2018/12/03 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
诉前财产保全担保书
2014/05/20 职场文书
毕业论文致谢信
2015/05/14 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python