使用 JavaScript 抓取/窃听 AJAX 数据? [英] Scrape / eavesdrop AJAX data using JavaScript?

问题描述

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

Is it possible to use JavaScript to scrape all the changes to a webpage that is being updated live with AJAX? The site I wish to scrape updates data using AJAX every second and I want to grab all the changes. This is a auction website and several objects can change whenever a user places a bid. When a bid is placed the the following change:

当前买入价目前的高价投标人拍卖计时器已加回时间

The current Bid Price The current high bidder The auction timer has time added back to it

我希望使用基于 JavaScript 的 Chrome 扩展程序获取这些数据.是否有可以完成此操作的 JavaScript AJAX 侦听器?工具包?我需要一些指导.JavaScript 能做到这一点吗??

I wish to grab this data using a Chrome extension built on JavaScript. Is there a AJAX listener for JavaScript that can accomplish this? A tool kit? I need some direction. Can JavaScript accomplish this??

推荐答案

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

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

First, I present a simple method which only works if the page uses jQuery. The second method looks slightly more complex, but will also work on pages without jQuery.

以下示例展示了如何基于方法(例如 POST/GET)、URL 和读取 (POST) 数据和响应正文实施过滤器.

The following examples shows how you can implement filters based on method (eg POST/GET), URL, and read (POST) data and response bodies.

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

More information about the jQuery method can be found in the documentation of .ajaxSuccess. Usage:

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

纯 JavaScript 方式

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

Pure JavaScript way

When the website does not use jQuery for its AJAX requests, you have to modify the built-in XMLHttpRequest method. This requires more code...:

(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 扩展程序中工作

之前显示的代码必须在页面的上下文中运行(在您的情况下是拍卖页面).因此，必须使用内容脚本，它注入(！) 脚本.使用这个并不难，我参考这个答案的详细解释和用法示例:构建 Chrome 扩展程序 - 使用内容脚本在页面中注入代码.

Getting it to work in a Chrome extension

The previously shown code has to be run in the context of the page (in your case, an auction page). For this reason, a content script has to be used which injects (!) the script. Using this is not difficult, I refer to this answer for a detailled explanation plus examples of usage: Building a Chrome Extension - Inject code in a page using a Content script.

您可以使用 chrome.webRequest 读取请求正文、请求标头和响应标头 API.标题也可以修改.然而，它(还)无法读取，更不用说修改请求的响应主体了.如果您想要此功能，请在 https://code.google.com/上加星标p/chromium/issues/detail?id=104058.

这篇关于使用 JavaScript 抓取/窃听 AJAX 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！