javascript - jQuery Ajax, overwrite onreadystatechange handler

Question

I'm recently fooling around with some ajax polling techniques. However, it seems like I can't overwrite the onreadystatechange handler from a XMLHttpRequest object in FireFox (3.6.7).

On tracking the problem why FF throws an exception when trying to access onreadystatechange, I realized it depends whether the send() method was called or not.

In other words, here is an example (plain js, no jQuery so far), that works:

(This is fairly simplified just for a demonstration)

var myxhr = new XMLHttpRequest();
myxhr.open("GET", "/my/index.php");
myxhr.onreadystatechange = function(){
    console.log('ready state changed');
};
console.log("onreadystatechange function: ", myxhr.onreadystatechange);
myxhr.send(null);

This works, better said it's possible to access myxhr.onreadystatechange here. If I switch the last two lines of code, FF throws an exception, basically telling me that I'm not allowed to access this object.

myxhr.send(null);
console.log("onreadystatechange function: ", myxhr.onreadystatechange);

Fails.

So where is my actual problem?

Well, I want to use jQuery's $.ajax(). But if I try to overwrite the onreadystatechange method of a XHR object that was returned from $.ajax(), I receive the same FireFox exception.

Ok I already found out why this happens, so I thought about, hey what about the beforeSend property of $.ajax() ? So I basically tried this:

var myxhr = $.ajax({
   url:        "/my/index.php",
   type:       "GET",
   dataType:   "text",
   data:        {
       foo:    "1"
   },
   beforeSend: function(xhr){
       var readystatehook = xhr.onreadystatechange;

       xhr.onreadystatechange = function(){
           readystatehook.apply(this, []);
           console.log('fired');
       };
   },
   success:    function(data){
       console.log(data);
   },
   error:      function(xhr, textStatus, error){
       console.log(xhr.statusText, textStatus, error);
   }
});

Guess what, FireFox throws an exception. So what do you do now? You digg into the jQuery source, like I did. But that brought more questions than answers actually. It looks like beforeSend() is really called before xhr.send() is executed. So I'm wondering why on earth FireFox does not allow to overwrite the handler at this point.

Conclusion?

It's impossible to create a custom readystatechange handler with jQuery/Firefox ?

Answer 1

If you want a large level of customization, you can just get the XMLHttpRequest object and control it yourself.

var x=new $.ajaxSettings.xhr();
x.onreadystatechange=function(){ ... }
...