javascript - 如何捕获页面上的所有请求和响应，并根据需要对每个响应状态执行操作

Question

他们是否有任何方式来监控由脚本、点击或其他任何东西触发的页面上发出的所有请求，它不应该依赖于任何脚本 block 或代码，只监控使用 jquery 和 javascript 发出的请求

例子:

//监听页面上所有的请求。

monitor{

    success:function(){

    }
    error:function(){

    }
}

Answer 1

您无法跟踪网页上的所有请求。但是，您可以通过将 $.ajax bay 替换为包装器来跟踪使用 jQuery 发出的请求。

示例替换插件:

(function($, undefined) {
    // a private variable which will store the current active monitors
    var monitors = [];

    // a public API to add a monitor.
    $.monitorAjax = function(monitor) {
        monitors.push(monitor);
    };


    // here starts the implementation.

    // a function to wrap a callback (error or success) to make monitors functions called.
    var wrapCallback = function(name, settings) {
        return function() {
            for(var i = 0; i < monitors.length; i++) {
                var monitor = monitors[i];
                if(monitor[name] != null) monitor[name].apply(this, arguments);
            }
            if(settings[name] != null) settings[name].apply(this, arguments);
        };
    };


    // replace $.ajax by a wraped version which will replace success and error callbacks by wrappers.
    // note that you may also track calls and their settings if you want.
    var unwrappedAjax = $.ajax;
    $.ajax = function(url, settings) {
        if(settings == null) settings = {};

        var wrappedSuccess = wrapCallback("success", settings);
        var wrappedError = wrapCallback("error", settings);

        var wrappedSettings = $.extend({}, settings, {success: wrappedSuccess, error: wrappedError});

        return unwrappedAjax(url, wrappedSettings);
    };
})(jQuery);