JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://dl.dropboxusercontent.com/u/7909102/log.js"></script>
JavaScript
(function() {
// create XMLHttpRequest proxy object
var oldXMLHttpRequest = XMLHttpRequest;
// define constructor for my proxy object
XMLHttpRequest = function() {
var actual = new oldXMLHttpRequest();
var self = this;
function modResponse(actualResponse) {
// modify the response here and return it
log("actual response: " + actualResponse);
return '{"msg": "Hello"}';
}
// generic function for modifying the response that can be used by
// multiple event handlers
function handleResponse(prop) {
return function() {
if (this.responseText && self[prop]) {
self.responseText = modResponse(this.responseText);
}
// call callback that was assigned on our object
if (self[prop]) {
return self[prop].apply(self, arguments);
}
}
}
function handleLoadEvent(fn, capture) {
return actual.addEventListener("load", function(e) {
if (this.responseText) {
self.responseText = modResponse(this.responseText);
}
return fn.apply(self, arguments);
}, capture);
}
// properties we don't proxy because we override their behavior
this.onreadystatechange = null;
this.responseText = null;
this.onload = null;
if (actual.addEventListener) {
this.addEventListener = function(event, fn, capture) {
if (event === "load") {
return handleLoadEvent(fn, capture);
} else {
return actual.addEventListener.apply(actual, arguments);
}
}
}
// this is the actual handler on the real XMLHttpRequest object
actual.onreadystatechange =...