function listen() {
var origin = {
open: XMLHttpRequest.prototype.open,
send: XMLHttpRequest.prototype.send
}
XMLHttpRequest.prototype.open = function(a, b) {
// console.log('open');
// this.addEventListener('loadend', onReadyStateChangeReplacement);
this.addEventListener('load', replaceFn)
// this.addEventListener('readystatechange', replaceFn);
origin.open.apply(this, arguments)
}
XMLHttpRequest.prototype.send = function(a, b) {
origin.send.apply(this, arguments)
}
function replaceFn(obj) {
// console.log(obj);
// var url = obj.target.responseURL;
console.log('监听', this)
// console.log('监听', this.status, this.readyState, this.response)
}
}
listen()
升级版
/**
* 页面接口请求监控
*/
function recordHttpLog() {
// 监听ajax的状态
function ajaxEventTrigger(event) {
var ajaxEvent = new CustomEvent(event, {
detail: this
})
console.log('ajaxEvent', ajaxEvent)
window.dispatchEvent(ajaxEvent)
}
var OldXHR = window.XMLHttpRequest
function newXHR() {
var realXHR = new OldXHR()
realXHR.addEventListener('abort', function() { ajaxEventTrigger.call(this, 'ajaxAbort') }, false)
realXHR.addEventListener('error', function() { ajaxEventTrigger.call(this, 'ajaxError') }, false)
realXHR.addEventListener('load', function() { ajaxEventTrigger.call(this, 'ajaxLoad') }, false)
realXHR.addEventListener('loadstart', function() { ajaxEventTrigger.call(this, 'ajaxLoadStart') }, false)
realXHR.addEventListener('progress', function() { ajaxEventTrigger.call(this, 'ajaxProgress') }, false)
realXHR.addEventListener('timeout', function() { ajaxEventTrigger.call(this, 'ajaxTimeout') }, false)
realXHR.addEventListener('loadend', function() { ajaxEventTrigger.call(this, 'ajaxLoadEnd') }, false)
realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange') }, false)
return realXHR
}
window.XMLHttpRequest = newXHR
// window.addEventListener('ajaxReadyStateChange', function(e) {
// var currentTime = new Date().getTime()
// setTimeout(function() {
// var url = e.detail.responseURL
// var status = e.detail.status
// var statusText = e.detail.statusText
// console.log('ajaxReadyStateChange', e, url, status, statusText, currentTime)
// }, 2000)
// })
// window.addEventListener('ajaxLoadStart', function(e) {
// var currentTime = new Date().getTime()
// setTimeout(function() {
// var url = e.detail.responseURL
// var status = e.detail.status
// var statusText = e.detail.statusText
// console.log('ajaxLoadStart', e, url, status, statusText, currentTime)
// }, 2000)
// })
// window.addEventListener('ajaxLoadEnd', function(e) {
// var currentTime = new Date().getTime()
// var url = e.detail.responseURL
// var status = e.detail.status
// var statusText = e.detail.statusText
// console.log('ajaxLoadEnd', url, status, statusText, currentTime)
// })
// window.addEventListener('ajaxError', function(e) {
// var currentTime = new Date().getTime()
// var url = e.detail.responseURL
// var status = e.detail.status
// var statusText = e.detail.statusText
// console.log('ajaxError', url, status, statusText, currentTime)
// })
}
recordHttpLog()