custom XMLHttpRequest.prototype.open

Question

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {
    this.addEventListener("readystatechange", function(event) {  
    if(this.readyState == 4){
       var self = this;
       var response = {
         method: method,
         uri: uri,
         responseText: self.responseText
      };
      console.log(response);  
    } else {
        console.log(this.readyState);
    }
    }, false);
  open.call(this, method, uri, async, user, pass);
};

I am trying to listen for XHR before they are being sent. Something similar to jQuery's beforeSend in the $.ajax method.

My goal is to listen for all XHR's before they are being sent. I suppose the closest thing would be to check above if this.readyState === 1?

Would the code above cause any ajax libraries like jQuery to malfunction because I use prototype on XMLHttpRequest?

Answer 1

I am trying to listen for XHR before they are being sent.

Then try to spoof the send() method, not the open() one.

Would the code above cause any ajax libraries like jQuery to malfunction because I use prototype on XMLHttpRequest?

No, not really. Only,

• it won't work where those libs choose not to use XMLHttpRequest (particularly IE)
• …and even fail if the browser does not support the XMLHttpRequest object (or does not support accessing or modifying its prototype)
• libs might be able to work around your spoof by dereferencing the functions before you can (though I don't know any common lib that does)
• Your code calls the native method with a fixed number of arguments, not sure if that affects anything, and it does not re-return the result (even if we know it's undefined). To be 100% sure, use return open.apply(this, arguments);.