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 监听和捕获 HTTP 请求 在现代 Web 应用程序中,监听和捕获 HTTP 请求是一个常见需求。这可以通过修改原生对象的行为或者借助第三方库来实现。 #### 使用自定义方法拦截 XMLHttpRequest 请求 通过覆盖 `XMLHttpRequest` 的原型方法可以轻松实现对其行为的监控。以下是具体实现: ```javascript (function () { const originalOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function (method, url, async, user, password) { this.addEventListener('readystatechange', function () { if (this.readyState === 4 && this.status >= 200 && this.status < 300) { console.log(`Request to ${url} completed with status:`, this.status); } }); return originalOpen.call(this, method, url, async, user, password); }; })(); ``` 此代码片段展示了如何通过重写 `open` 方法并附加事件监听器来记录每次请求的目标 URL 及其响应状态码[^3]。 #### 拦截 Fetch API 请求 对于基于 Promise 的 Fetch API,则需要创建一个全局代理函数替换默认调用: ```javascript const nativeFetch = window.fetch; window.fetch = async (...args) => { const [resource, config] = args; console.log("Intercepted fetch request:", resource); try { const response = await nativeFetch(...args); console.log("Response received from", resource, "with status code:", response.status); return response; } catch (error) { console.error("Error during intercepted fetch call:", error.message); throw error; } }; ``` 上述脚本不仅能够打印发出的所有 fetch 调用细节,还能处理异常情况下的错误消息传递[^4]。 #### 利用专门工具简化过程 除了手动编写这些钩子外,还有几个流行的开源项目可以帮助更高效地管理网络活动跟踪任务: - **Service Workers**: 它们允许开发者注册后台服务工作线程,在那里他们可以完全控制页面上的任何外部连接尝试。 - **Mock Service Worker (MSW)**: 这是一款用于测试环境模拟远程依赖项的强大框架;它同样适用于实时调试生产流量模式分析目的。 以上介绍了几种主要途径用来监视由客户端发起的各种类型的HTTP通信操作,并提供了相应的实例说明每种方案的具体应用情形[^1][^2]. ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值