在项目中需要监听页面中不可控的Ajax请求事件，例如onreadystatechange、onload等。文章介绍了尝试过的多种方法，包括Pub/Sub、jQuery的bind和trigger、jQuery的ajaxComplete，以及MutationObserver，但都因各种限制未能满足需求。最后，文章详细阐述了通过重写XMLHttpRequest原型链的方法，利用CustomEvent来监听Ajax请求的readyState变化和load事件。然而这种方法存在局限，可能无法捕获send之前的readyState 0和1状态，以及send之后绑定的事件。文章提出了疑问，是否可以实现一种方式，在所有Ajax事件触发前执行自定义函数，并询问对于$.ajax调用的处理方法。
最近在做一个项目，其中需要监听页面中不可控代码调用 ajax 请求的事件，比如说监听调用 XHR 后的 onreadystatechange、onload、onloadstart 等事件。
嗯，主要是用原生的 JavaScript 实现。查了挺多资料的，大概的做法是：
1、Pub/Sub，也就是 https://github.com/cowboy/jquery-tiny-pubsub 这个 jQuery 插件。但是因为调用 ajax 请求的代码不可控，无法添加 publish，或者说我不会添加？
2、jQuery 的 bind 和 trigger，同上，代码不可控
3、如果是用 jQuery 实现的，可以直接监听其 ajaxCompete 等事件，然而调用 ajax 请求的并不是 jQuery 的 $.ajax，故此招没用
4、如果 ajax 的回调涉及到 DOM 操作，还可以使用 MutationObserver，但是最多只能知道 ajax 成功并且更新了 DOM，不能监听到 onreadystatechange 等事件
5、直接重写 XHR，配合 CustomEvent 实现
那些已被弃用或降级的方法不作考虑。
针对第五点，查找到了国外相关资料，其做法见如下代码
var open = window.XMLHttpRequest.prototype.open,
send = window.XMLHttpRequest.prototype.send,
ReadyStateChange;
function openReplacement(method, url, async, user, password) {
open.apply(this, arguments);
}
function sendReplacement(data) {
var ajaxReadyStateChange,
a
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
