【转】分享JavaScript监听全部Ajax请求事件的方法
若Ajax请求是由jQuery的$.ajax
发起的,默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件,然而我遇到的却是用原生JavaScript发起的Ajax请求,所以这种方法行不通。
然后呢,还有其他方法,比如说 Pub/Sub,但是这个发起请求的 js 代码我是无法改动的,也就不存在向代码里添加 publish 的问题。同理,jQuery 的 .bind
和 .trigger
也无法使用。
最后,决定使用直接 override XMLHttpRequest
,同时配合使用自定义事件。
在 StackOverflow 上搜索,发现有个歪果仁给出了一个不靠谱的解决方法,嗯,贴出来给大家看看:
;(function () {
var open = window.XMLHttpRequest.prototype.open,
send = window.XMLHttpRequest.prototype.send,
onReadyStateChange; function openReplacement(method, url, async, user, password) {
// some code return open.apply(this, arguments);
} function sendReplacement(data) {
// some code if(this.onreadystatechange) this._onreadystatechange = this.onreadystatechange;
this.onreadystatechange = onReadyStateChangeReplacement; return send.apply(this, arguments);
} function onReadyStateChangeReplacement() {
// some code if (this._onreadystatechange) return this._onreadystatechange.apply(this, arguments);
} window.XMLHttpRequest.prototype.open = openReplacement;
window.XMLHttpRequest.prototype.send = sendReplacement;
})();
这个解决方案,无法监听全部的 XHR Events
,而且 readystatechange
事件是在调用 send
方法后才监听,也就无法监听到 readyState = 1
时的事件。同时,如果在使用 send
方法后再对 onreadystatechange
设置回调函数,会将 override
的代码又一次 override
,也就无法产生预想的效果。
那如何才能正确地 override XHR 呢?贴上代码,一起来看看:
;(function() {
function ajaxEventTrigger(event) {
var ajaxEvent = new CustomEvent(event, { detail: this });
window.dispatchEvent(ajaxEvent);
} var oldXHR = window.XMLHttpRequest; function newXHR() {
var realXHR = new oldXHR(); realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false); realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false); realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false); realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false); realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false); realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false); realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false); realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false); return realXHR;
} window.XMLHttpRequest = newXHR;
})();
这样,就为 XHR
添加了自定义事件。如何调用?
var xhr = new XMLHttpRequest(); window.addEventListener('ajaxReadyStateChange', function (e) {
console.log(e.detail); // XMLHttpRequest Object
});
window.addEventListener('ajaxAbort', function (e) {
console.log(e.detail.responseText); // XHR 返回的内容
}); xhr.open('GET', 'info.json');
xhr.send();
需要注意的是,正常的 readystatechange
等事件 handler
返回的 e
是 XMLHttpRequest
对象,但是自定义方法 ajaxReadyStateChange
等事件 handler 返回的 e
是 CustomEvent
对象,而 e.detail
才是真正的 XMLHttpRequest
对象。而获得 Ajax 请求返回内容的 e.responseText
也需要修改为 e.detail.responseText
。
同时,addEventListener
方法必须挂载在 window 对象
上,而不能是 XHR
实例上。
因为以上代码使用了 CustomEvent
构造函数,在现代浏览器上可以正常使用,但是在 IE 下,甚至连 IE 11 都不支持,所以需要加上 Polyfill
,变成这样:
;(function () {
if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
} CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent;
})();
;(function () {
function ajaxEventTrigger(event) {
var ajaxEvent = new CustomEvent(event, { detail: this });
window.dispatchEvent(ajaxEvent);
} var oldXHR = window.XMLHttpRequest; function newXHR() {
var realXHR = new oldXHR(); realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false); realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false); realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false); realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false); realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false); realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false); realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false); realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false); return realXHR;
} window.XMLHttpRequest = newXHR;
})();
此时,就可以在 IE 9+、Chrome 15+、FireFox 11+、Edge、Safari 6.1+、Opera 12.1+ 上愉快地使用了,以上就是本文的全部内容,希望大家能够喜欢。
from:https://www.jb51.net/article/91419.htm
【转】分享JavaScript监听全部Ajax请求事件的方法的更多相关文章
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- 解决Fiddler不能监听Java HttpURLConnection请求的方法
在默认情况下,Fiddler不能监听Java HttpURLConnection请求.究其原因,Java的网络通信协议栈可能浏览器的通信协议栈略有区别,Fiddler监听Http请求的原理是 在应用程 ...
- javascript监听手机返回键
javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...
- 使用Fiddler监听java HttpURLConnection请求
使用Fiddler监听java HttpURLConnection请求
- JavaScript监听回车事件
记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...
- JavaScript监听页面可见性(焦点)同时改变title的三种方法
JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...
- JavaScript 监听回车事件
JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(event) { if (event.keyCode == "13& ...
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
随机推荐
- 【English】20190429
detect发现 [dɪˈtekt] charger充电器 [ˈtʃɑːrdʒər] unable to detect charger
- Codeforces Round #539 (Div. 2) - D. Sasha and One More Name(思维)
Problem Codeforces Round #539 (Div. 2) - D. Sasha and One More Name Time Limit: 1000 mSec Problem ...
- SUSE12SP3-Mycat(4)rule.xml配置详解
简介 rule.xml 里面就定义了我们对表进行拆分所涉及到的规则定义.我们可以灵活的对表使用不同的分片算法, 或者对表使用相同的算法但具体的参数不同.这个文件里面主要有 tableRule 和 fu ...
- 引入外部 CDN失效时--怎么加载本地资源文件(本文以jquery为例)
相信大家都使用过CDN静态资源库,比如下面 CDN官方静态资源库:https://cdnjs.com/ 七牛前端公开库:http://staticfile.org (vue,react,nl都有) ...
- 在Windows上使用Docker运行.NetCore
今天我们来说下如何在windows下使用docker运行.net core,既然是docker,那么我们首先得在windows上安装docker. 在Windows安装 docker 有两种选择 :1 ...
- 个人完善的springboot拦截器
import lombok.extern.slf4j.Slf4j; import org.manage.management.permission.interceptor.LoginIntercept ...
- MATLAB程序:用FCM分割脑图像
MATLAB程序:用FCM分割脑图像 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 脑图像基础知识请看:脑图像:FCM算法介绍请看:聚类——FCM:数据 ...
- .Net Core的Log方式:Serilog+Kibana
前言 Serilog,支持对象,把log数据序列化成Json,好用方便,容易拓展.Github: https://github.com/handsomeyao77/serilog-sinks-elas ...
- ado.net的简单数据库操作(三)——简单增删改查的实际应用
果然,在犯困的时候就该写写博客,写博客就不困了,哈哈! 上篇我记录了自己的SqlHelper的开发过程,今天记录一下如何使用这个sqlhelper书写一个具有简单增删改查的小实例啦. 实例描述:在数据 ...
- DataTable增加行