使用JavaScript刮刮/窃听AJAX数据?

前端之家收集整理的这篇文章主要介绍了使用JavaScript刮刮/窃听AJAX数据?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用 JavaScript来刮擦所有正在使用AJAX进行更新的网页所做的更改?该网站我希望使用AJAX每秒更新数据,我想抓住所有的变化.这是拍卖网站,每当用户出价时,几个对象都可以更改.当出价出现以下变化时:

当前出价
目前高出价者
拍卖计时器已添加回来

我希望使用基于JavaScript的Chrome扩展程序来获取这些数据.有没有可以实现这一点的JavaScript AJAX监听器?一个工具包?我需要一些方向JavaScript可以完成吗?

解决方法

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

首先,我提出一个简单的方法,只有在页面使用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方式

当网站不使用jQuery的AJAX请求时,您必须修改内置的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注入(!)脚本.使用这个并不困难,我参考这个答案一个详细的解释和使用的例子: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.

猜你在找的Ajax相关文章