javascript - jQuery Ajax,覆盖 onreadystatechange 处理程序

标签 javascript jquery ajax

我最近在研究一些 ajax 轮询技术。但是,我似乎无法从 FireFox (3.6.7) 中的 XMLHttpRequest 对象覆盖 onreadystatechange 处理程序。

在跟踪 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()。但是,如果我尝试覆盖从 $.ajax() 返回的 XHR 对象的 onreadystatechange 方法,我会收到相同的 FireFox 异常.

好吧,我已经知道为什么会这样了,所以我想,嘿,$.ajax()beforeSend 属性怎么样?所以我基本上尝试了这个:

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 不允许此时覆盖处理程序。

结论?

不可能用 jQuery/Firefox 创建一个自定义 readystatechange 处理程序

最佳答案

我同意 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 对象并以这种方式中止

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

关于javascript - jQuery Ajax,覆盖 onreadystatechange 处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3309185/

相关文章:

jquery - 无法将焦点设置为 Chrome 扩展中的输入

php - 我想使用 AJAX 根据单击的链接的 ID 动态生成布局

javascript - 如何删除 Javascript 对象属性?

javascript - 包含构造函数的对象的闭包编译器注释

jquery - Mozilla 和 IE 中的制表符输入不向上 ScrollView

javascript - SlideUp() 运行两次

JavaScript 在凸形上发生墙壁碰撞,卡在 Angular 落

javascript - Style-Loader 可用功能在 Webpack 2.x 中不起作用

javascript - 为什么 jQuery 的 ajax ".always"函数无法正常工作

javascript - jQuery 在过滤 AJAX 响应时返回未定义