使用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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
javascript 原型继承介绍
Aug 30 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
Javascript动画效果(1)
Oct 11 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 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
php去除HTML标签实例
2013/11/06 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Prototype Number对象 学习
2009/07/19 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
用python制作个视频下载器
2021/02/01 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
物流管理专业职业生涯规划书
2014/01/06 职场文书
环卫工作个人总结
2015/03/04 职场文书
物业客服专员岗位职责
2015/04/07 职场文书