js监听页面请求

代码封装

//监听ajax请求
(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;
})();

调用

window.addEventListener('ajaxReadyStateChange', function (e) {
        e.detail.onload=function () {
			console.log(e.detail)
        }
    });
### 如何使用原生 JavaScript 捕获或监听页面中的 AJAX 请求 捕获或监听页面中的 AJAX 请求可以通过拦截 `XMLHttpRequest` 对象的行为来实现。具体来说,可以重写该对象的原型方法(如 `open` 和 `send`),从而在每次发起 AJAX 请求时执行自定义逻辑。 以下是详细的实现方式: #### 实现方案 通过覆盖 `XMLHttpRequest.prototype.open` 方法,在调用原始方法之前记录请求的相关信息。同样地,也可以覆盖 `XMLHttpRequest.prototype.send` 来进一步增强功能[^1]。 ```javascript // 存储原始的 open 方法 const originalOpen = XMLHttpRequest.prototype.open; // 覆盖默认的 open 方法 XMLHttpRequest.prototype.open = function(method, url, async, user, password) { console.log(`Captured request: Method=${method}, URL=${url}`); // 可在此处添加更多逻辑,比如存储请求数据供后续分析 // 调用原始的 open 方法 return originalOpen.apply(this, arguments); }; ``` 上述代码片段展示了如何捕捉所有的 AJAX 请求并打印其 HTTP 方法和目标地址。如果还需要监控其他属性或者事件,则可以在类似的上下文中扩展此模式[^2]。 对于更复杂的场景,例如需要截取响应内容的情况,还可以结合 `onreadystatechange` 或者 Promise 的形式来进行处理: ```javascript // 定义一个新的 send 函数以支持额外的功能 function customSend(data){ this.addEventListener("load", ()=>{ console.log("Response received:", this.responseText); }); return this.originalSend.call(this,data); } let oldSend=XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send=function(){ this.originalSend=oldSend; return customSend.apply(this,arguments); } ``` 以上脚本不仅能够跟踪请求本身的信息,还能够在接收到服务器返回的数据之后立即对其进行审查[^3]。 注意:这种技术主要用于调试目的;实际部署前应考虑隐私保护以及可能带来的性能影响等问题。 ### 注意事项 - 上述修改会影响整个页面及其子框架内的所有 XHR 行为。 - 如果项目依赖第三方库管理网络通信,请确认这些更改不会干扰正常运行流程。 相关问题
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值