使用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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
理解javascript中的严格模式
Feb 01 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php 上传功能实例代码
2010/04/13 PHP
php上传文件常见问题总结
2015/02/03 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python读写unicode文件的方法
2015/07/10 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
pytorch中图像的数据格式实例
2020/02/11 Python
文秘专业大学生求职信
2013/11/10 职场文书
店长助理岗位职责
2013/12/13 职场文书
公司企业表扬信
2014/01/11 职场文书
美术国培研修感言
2014/02/12 职场文书
有创意的广告词
2014/03/18 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
工程安全生产协议书
2014/11/21 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
《角的度量》教学反思
2016/02/18 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Java使用Unsafe类的示例详解
2021/09/25 Java/Android