使用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 ajax 仿百度分页函数
Oct 29 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
如何用JS实现简单的数据监听
May 06 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
javascript判断office版本示例
2014/04/11 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python制作爬虫抓取美女图
2016/01/20 Python
浅析Django中关于session的使用
2019/12/30 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python开发入门——set的使用
2020/09/03 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
大学生表扬信范文
2014/01/09 职场文书
安全生产计划书
2014/05/04 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
国庆节标语大全
2014/10/08 职场文书
英文慰问信
2015/02/14 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis