使用 GreasyMonkey 脚本抑制网页上的 AJAX 调用

问题描述

作为我日常工作的一部分，我需要在包含多个字段的网页中填写数据。该网页的构建方式是，在选择每个字段时，会发送 AJAX 请求以进行验证和获取结果。大约有 20 个字段可以输入。此外，我发现代码是这样编写的，即在每个 AJAX 请求中发送所有 20 个字段的数据以获取结果。

但是，在慢速连接上，这会导致过度延迟，由于来自服务器的 AJAX 验证和页面刷新，我必须在选择每个字段时等待 5-10 秒。我想编写一个 Greasymonkey/Violentmonkey/Tapermonkey 脚本来抑制 AJAX，直到我填满所有 20 个字段。

注意：字段上的 onChange/click 事件包含除 AJAX 调用之外的许多其他验证，因此我不想抑制字段上的 onChange/click 事件。

典型的选择如下：

<h6 class="spin">Tube end<span class="facet-toggle"></span></h6>
    <ul style="display: block;">
        <li data-value="00any" class="  " data-display-value="Any Value" data-facet-name="C8948E"> <a> Any Value </a> </li>

        <li data-value="bevelend" class="  " data-display-value="Bevel end" data-facet-name="C8948E"> <a> Bevel end <i> 2</i> </a> </li>

        <li data-value="plainend" class="  " data-display-value="Plain end" data-facet-name="C8948E"> <a> Plain end <i> 147</i> </a> </li>

        <li data-value="screwed" class="  " data-display-value="Screwed" data-facet-name="C8948E"> <a> Screwed <i> 34</i> </a> </li>

        <li data-value="screwedandsocketed" class="  " data-display-value="Screwed and socketed" data-facet-name="C8948E"> <a> Screwed and socketed <i> 9</i> </a> </li>

        <li data-value="screwedwithoneendsocket" class="  " data-display-value="Screwed with one end Socket" data-facet-name="C8948E"> <a> Screwed with one end Socket <i> 59</i> </a> </li>
    </ul>
<div class="facet-footer">&nbsp;</div>

Developer Tools Screenshot

解决方法

您可以monkey patch AJAX 函数并过滤掉用于验证的 URL。

首先，您需要阅读代码使用什么函数。有两个 API。

XMLHTTPRequest 和新的 fetch API。

需要修改代码，过滤掉不需要的网址。

如果页面使用 Fetch 你可以使用：

var ignoreURL = /validation/;

(function (fetch) {
    window.fetch = function(url,...args) {
        if (!url.match(ignoreURL)) {
            return fetch(url,...args);
        }
        return Promise.resolve({
           json: () => Promise.resolve({valid: true})
        });
    };
})(fetch);

如果您的页面使用 fetch，您需要调查发送了什么请求，如果它是 JSON 并且代码使用 res.json() 那么您需要返回脚本期望从 AJAX 请求中获得的任何内容。这里只是一个 {valid: true} 示例，但您需要检查您的确切请求。

如果代码使用 jQuery，您需要查看 jQuery 使用的代码，如果它使用 XMLHttpRequest 对象发送 AJAX 请求，您需要修改该对象，类似于上面的 fetch，但需要更多工作。