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

I agree with Maz here, you can still benefit form the query handling and creating of the object, and also no need to patch jquery for this

however, if you dont mind patching jquery you could add these lines

        // The readystate 2
        } else if ( !requestDone && xhr && xhr.readyState === 2 && isTimeout !== 'timeout' && s.state2) {
            s.state2.call( s.context, data, status, xhr );
        // The readystate 3
        } else if ( !requestDone && xhr && xhr.readyState === 3 && isTimeout !== 'timeout' && s.state3) {
            s.state3.call( s.context, data, status, xhr );

before this line: (jQuery v 1.4.4) or just search for the readyState === 4 in the source

        // The transfer is complete and the data is available, or the request timed out
        } else if ( !requestDone && xhr && (xhr.readyState === 4 || isTimeout === "timeout") ) {

now you can use the $.ajax again and put a handler up for state2 and state3 like so:

$.ajax({
    url: 'http://www.stackoverflow.com',
    cache: false,
    success:function(){console.log('success');},
    error: function (){console.log('error');},
    complete: function (){console.log('complete');},
    state2: function (context,data,status,xhr) {console.log('state2');},
    state3: function (context,data,status,xhr) {console.log('state3');}
});

it doesnt exactly behave like the other handlers, eg returngin false wont do a thing
but you can still handle the xhr object and abort that way

ill see if i can submit this to be included in the source later this day, who knows they might accept it