使用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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
详解Python设计模式之策略模式
2020/06/15 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
nohup的用法
2012/11/26 面试题
优秀党员主要事迹
2014/01/19 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
IT工程师岗位职责
2014/07/04 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
大学生求职自荐信
2015/03/24 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书