修改Ajax返回内容

针对线上的web服务，有时想通过改ajax返回结果来确认逻辑问题，那么我们可以通过对XMLHttpRequest的原型修改来完成这个拦截目的。【不常见，但是也有需要的状况】

下面的Demo实例是将URL符合正则/app\.json/gi 的ajax返回修改成 {name: "Debug Anywhere", version: "1.0"} ：

// Demo实例，对app.json这个文件内容进行修改
intercept_ajax([
    {
        method: 'get',
        pattern: /app\.json/gi,    // 支持正则 或 完整url
        callback: function(response){
            var result = JSON.stringify({ name: "Debug Anywhere", version: "1.0" });
            return result;
        }
    }
]);

上述的 intercept_ajax 函数是对 ajax 拦截的函数，参数是个数组，可以同时对多个规则进行拦截修改。intercept_ajax函数的实现如下：

// ajax open prototype
var ajax_open_original = XMLHttpRequest.prototype.open;
// cached rules
var cacheRules = [];

/**
 * intercept response of XMLHttpRequest
 * 
 * @param {object} rules rules to intercept response
 * @param {string} rules.method  get/post/put/delete/patch
 * @param {string|RegExp} rules.pattern  regexp or string
 * @param {Function} rules.callback  
 */
function intercept_ajax (rules) {
    cacheRules = cacheRules.concat(rules);
    XMLHttpRequest.prototype.open = function() {
        var open_arguments = arguments;
        var method = open_arguments[0].toLowerCase(),
            url = open_arguments[1];

        // intercept or not
        var flag = false;
        var callback = function () {}; 
        for(let i = 0, len = cacheRules.length; i < len; i++) {
            var curRule = cacheRules[i];
            if ((curRule.method ? curRule.method === method : true) 
                && curRule.pattern instanceof RegExp ? curRule.pattern.test(url) : curRule.pattern === url) {
                flag = true;
                callback = curRule.callback;
                break;
            }
        }

        this.addEventListener('readystatechange', function(event) {
            if (flag && this.readyState === 4) {
                console.log('[ajax-intercept]', method, url);
                var response = callback(event.target.responseText);
                console.log('[ajax-intercept] response original', event.target.responseText, ', intercept result', response);
                Object.defineProperty(this, 'response', { writable: true });
                Object.defineProperty(this, 'responseText', { writable: true });
                this.response = this.responseText = response;
            }
        });

        return ajax_open_original.apply(this, open_arguments);
    };
};
window.intercept_ajax = intercept_ajax;

使用

• 浏览器上使用
  在console控制台将intercept_ajax 函数定义粘贴进去并执行。之后再使用intercept_ajax函数对具体接口进行内容修改。
• 在Debug Anywhere 中使用
  将 intercept_ajax 函数定义 及 它的使用分拆成2个脚本。注意脚本先后执行顺序问题。进入debug页面即可。

下图是在 Debug Anywhere 中对 https://www.debug-anywhere.com/debug 页面进行ajax拦截并修改的截图。

WechatIMG423.jpeg

资源

• intercept_ajax源代码
• Debug Anywhere下载