分享分享JavaScript监听全部监听全部Ajax请求事件的方法请求事件的方法
最近在做一个小项目，引入了第三方js文件，这个文件会调用XMLHttpRequest向服务器发送 Ajax请求，但是我
有需要监听其Ajax请求的某些事件，以便额外地执行其他脚本。于是稍微看了看监听 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);
资源评论
weixin_38577261
- 粉丝: 4
- 资源: 906
最新资源
- postgis-3.3.8.tar.gz
- postgis-3.2.8.tar.gz
- 机械手机器人含设计文档机械手-气动机械手回转臂结构设计
- 产品自动套袋机sw18可编辑全套技术资料100%好用.zip
- postgis-3.4.4.tar.gz
- postgis-3.5.1.tar.gz
- 机械手机器人含设计文档机械手-数控机床自动夹持搬运装置
- 改进的大蔗鼠优化算法（IGCRA），三个改进策略 快人一步发paper 2024新算法-蔗鼠优化算法Greater Cane Rat Algorithm，GCRA，蔗鼠算法(GCRA)是受蔗鼠觅食
- 机械手机器人含设计文档机械手-数控卧式镗铣床换刀机械手(链式刀库)设计
- COMSOL案例，非均质储层的地热能群井抽采 适用于做地热能开采，模型为非均质模型，利用地质统计学模拟得到储层的非均质性，加载到comsol中，表征渗透率的非均质性
- 机械手机器人含设计文档机械手-送料机械手设计及Solidworks运动仿真
- 产品打码机（sw18可编辑+工程图）全套技术资料100%好用.zip
- 利用改进的麻雀搜索算法实现部分遮光光伏MPPT追踪控制，在原有的SSA算法公式中，为了避免算法后期导致MPPT的较大幅度振荡，在发现者公式中加入线性递减因子 为了使算法不至于收敛太快以至于追踪不到全
- 机械手机器人含设计文档机械手-卧式加工中心换刀机械手的设计
- 七彩虹将星X15 XS 22 笔记本电脑 原厂BIOS备份
- PSCAD仿真模型 建模 变压器空载分闸模型 输出电压电流波形 输出对应磁滞回线 磁过程
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
