刮/使用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扩展此数据。是否有一个AJAX监听器对JavaScript可以做到这一点？一个工具包？我需要一些方向。 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??

推荐答案

我要展示解决问题的两种方式。哪种方法你挑，不要忘了看我的回答底部！的

首先，我present一个简单的方法，它的仅在该页面使用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 的文档中找到。 用法：

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请求，您必须修改内置 XMLHtt prequest 方法。这需要更多的code ...：

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扩展工作

在previously显示code必须在页面的上下文中运行（在你的情况下，拍卖页）。出于这个原因，必须使用该注入一个内容脚本（！）的脚本。利用这一点并不难，我指的是这个答案的相关详细的解释以及用法的示例：<一href="http://stackoverflow.com/a/9517879/938089?building-a-chrome-extension-inject-$c$c-in-a-page-using-a-content-script">Building一个Chrome扩展 - 使用内容脚本注入code在页​​面

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。报头也可以被修改。这不过不是（还）可以读，更不用说修改请求的响应主体。如果你要这个功能，星<一href="https://$c$c.google.com/p/chromium/issues/detail?id=104058">https://$c$c.google.com/p/chromium/issues/detail?id=104058.

You can read the request body, request headers and response headers with the chrome.webRequest API. The headers can also be modified. It's however not (yet) possible to read, let alone modify the response body of a request. If you want this feature, star https://code.google.com/p/chromium/issues/detail?id=104058.

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