javascript - 使用 JavaScript 抓取/窃听 AJAX 数据？

Question

是否可以使用 JavaScript 将所有更改抓取到正在使用 AJAX 实时更新的网页中？我希望抓取的网站每秒使用 AJAX 更新数据，我想抓取所有更改。这是一个拍卖网站，只要用户出价，几个对象就会发生变化。出价后会发生以下变化:

当前出价当前的高出价者拍卖计时器已将时间加回

我希望使用基于 JavaScript 构建的 Chrome 扩展来获取这些数据。是否有 JavaScript 的 AJAX 监听器可以完成此操作？工具包？我需要一些指导。 JavaScript 可以做到这一点吗？？

Answer 1

我将展示两种解决问题的方法。无论您选择哪种方法，都不要忘记阅读我的答案底部!

首先，我介绍了一种仅在页面使用 jQuery 时有效的简单方法。第二种方法看起来稍微复杂一些，但也适用于没有 jQuery 的页面。

以下示例展示了如何根据方法(例如 POST/GET)、URL 以及读取 (POST) 数据和响应主体实现过滤器。

在 jQuery 中使用全局 ajax 事件

有关 jQuery 方法的更多信息可以在 .ajaxSuccess 的文档中找到.用法:

jQuery.ajaxSuccess(function(event, xhr, ajaxOptions) {
    /* Method        */ ajaxOptions.type
    /* URL           */ ajaxOptions.url
    /* Response body */ xhr.responseText
    /* Request body  */ ajaxOptions.data
});

纯 JavaScript 方式

当网站的 AJAX 请求不使用 jQuery 时，您必须修改内置的 XMLHttpRequest 方法。这需要更多代码...:

(function() {
    var XHR = XMLHttpRequest.prototype;
    // Remember references to original methods
    var open = XHR.open;
    var send = XHR.send;

    // Overwrite native methods
    // Collect data: 
    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        return open.apply(this, arguments);
    };

    // Implement "ajaxSuccess" functionality
    XHR.send = function(postData) {
        this.addEventListener('load', function() {
            /* Method        */ this._method
            /* URL           */ this._url
            /* Response body */ this.responseText
            /* Request body  */ postData
        });
        return send.apply(this, arguments);
    };
})();

让它在 Chrome 扩展程序中运行

前面显示的代码必须在页面的上下文中运行(在您的例子中是拍卖页面)。出于这个原因，content script必须使用 注入(inject) (!) 脚本。使用它并不困难，我引用了这个答案以获得详细的解释和用法示例:Building a Chrome Extension - Inject code in a page using a Content script .

一般方法

您可以使用 chrome.webRequest 读取请求正文、请求 header 和响应 header 。应用程序接口(interface)。标题也可以修改。然而，它(还)不可能被读取，更不用说修改请求的响应主体了。如果你想要这个功能，请加星https://code.google.com/p/chromium/issues/detail?id=104058 .