使用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中的getUTCDay()方法使用详解
Jun 10 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
简单的js计算器实现
Oct 26 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
WebPack基础知识详解
Jan 16 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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实现的多维数组去重操作示例
2018/07/21 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jquery编写日期选择器
2017/03/16 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python shutil模块用法实例分析
2019/10/02 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
python爬取招聘要求等信息实例
2020/11/20 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
初中学校军训方案
2014/05/09 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers