针对线上的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
