分享分享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
最新资源
- BDD，Python 风格 .zip
- 个人原创STM32F1 BOOTLOADER，主控芯片为STM32F103VET6
- Alpaca 交易 API 的 Python 客户端.zip
- 基于Django与讯飞开放平台的ACGN文化交流平台源码
- 中国象棋（自行初步设计)
- 微信小程序实现找不同游戏
- 100_Numpy_exercises.ipynb
- 2023-04-06-项目笔记 - 第三百二十六阶段 - 4.4.2.324全局变量的作用域-324 -2025.11.23
- 一个简单的模板，开始用 Python 编写你自己的个性化 Discord 机器人.zip
- TP-Link 智能家居产品的 Python API.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
