小编典典

jQuery Ajax,覆盖onreadystatechange处理程序

ajax

我最近在愚弄一些Ajax轮询技术。但是,似乎我无法onreadystatechangeXMLHttpRequestFireFox(3.6.7)中的对象覆盖处理程序。

在跟踪为什么FF在尝试访问时引发异常的问题时onreadystatechange,我意识到这取决于是否send()调用了该方法。

换句话说,这是一个有效的示例(纯js,到目前为止没有jQuery):

(这只是为了演示而进行了相当简化)

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);

更好的说是可行的,可以myxhr.onreadystatechange在这里访问。如果我切换最后两行代码,FF会引发异常,基本上是告诉我不允许访问此对象。

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

失败

那么我的实际问题在哪里?

好吧,我想使用jQuery的$.ajax()。但是,如果我尝试覆盖从返回onreadystatechangeXHR对象的方法,则会$.ajax()收到相同的FireFox异常。

好的,我已经发现了为什么会发生这种情况,所以我考虑了,嘿,那的beforeSend属性$.ajax()呢?所以我基本上尝试了这个:

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);
   }
});

猜猜是什么,FireFox引发异常。那你现在怎么办?您像我一样深入jQuery源码。但这带来的问题多于答案。看起来beforeSend()xhr.send()执行之前确实被调用了。所以我想知道为什么FireFox在这一点上不允许覆盖处理程序。

结论?

custom readystatechange handler用jQuery / Firefox 创建一个吗?


阅读 389

收藏
2020-07-26

共1个答案

小编典典

我在这里同意Maz的观点,您仍然可以从查询处理和对象创建中受益,并且也无需为此修补jquery

但是,如果您不介意修补jquery,则可以添加以下行

        // 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 );

在此行之前:(jQuery v 1.4.4)或仅在源代码中搜索readyState === 4

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

现在您可以再次使用$ .ajax并为state2和state3设置一个处理程序,如下所示:

$.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');}
});

它的行为与其他处理程序完全不同,例如returngin false不会做任何事情,但是您仍然可以处理xhr对象并以这种方式中止

虐待看看我是否可以在今天晚些时候将其提交以包含在源中,谁知道他们可能会接受它

2020-07-26