使用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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
js操作数组函数实例小结
Dec 10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
JavaScript内置对象之Array的使用小结
May 12 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python使用tkinter实现简单计算器
2018/01/30 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python如何实现线程间通信
2020/07/30 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
车间调度岗位职责
2013/11/30 职场文书
新教师工作感言
2014/02/16 职场文书
财务担保书范文
2014/04/02 职场文书
工人先锋号申报材料
2014/12/29 职场文书
简历自我评价范文
2019/04/24 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android