javascript - 使用 javascript 的 Ajax/XMLHttpRequest 跟踪

Question

我知道 firebug 可以跟踪页面上的所有 Ajax/XHR 事件。但是我需要准备一个工具来自动跟踪在现有网页上点击按钮时的这些调用。

我的网页的 HTML 和 JS 结构如下:

HTML:

<a href="javascript:void(0)" id="callButton" class=" call-btn " style="width: 30px;">Call</a>

JS:

scope: this,
id: 'callButton',
handler: function () {
    Ext.Ajax.request({
        url: '/Ajax/getCall/callUser/',
        params: {
            userID: usr.id
        },

任何人都可以建议如何在另一个 javascript 或其他东西的帮助下跟踪这个 ajax 调用吗？基本上我需要得到按钮点击时调用的内容，在这个例子中:“/Ajax/getCall/callUser/”。它也应该适用于我页面上的所有按钮。

Answer 1

在脚本的开头添加:

XMLHttpRequest.prototype.oldSend = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function (data) {
    // there you can log requests
    console.log("AJAX request was sent.");
    this.oldSend.call(this, data);
}

这会在 XMLHttpRequest 对象上创建 send 方法的副本，内部方法替换为可以记录 AJAX 请求的方法，此方法调用发送 AJAX 请求的内部方法。

示例:http://jsfiddle.net/fgp783rz/1