在离开前向服务器发送AJAX请求

Question

据说从Firefox > 4开始，将窗口jQuery对象绑定到beforeunload不再起作用。

我想要做的是提交一个AJAX post请求来删除我的服务器的memcache数据。

当我刷新唯一打开的选项卡时，我可以看到beforeunload事件在Firefox和Chrome中都被调用，并显示如下代码的console.log消息："firefox / NON-firefox delete"。问题在于，我从未看到"memcache delete"的console.log消息，这表明我的服务器从未接收到$.ajax请求。

我知道这样做浏览器嗅探很糟糕，并且if和else语句包含的内容没有任何区别。我只是展示了我在Firefox中尝试但不成功的代码。

有人有什么想法吗？

$(window).bind('beforeunload', function(){ 
  if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
    console.log('firefox delete');
     memcacheDelete();
     return null;
  } 
  else {
    console.log('NON-firefox delete');
    memcacheDelete();
    return null;
  }
});

function memcacheDelete() {
   $.ajax({
      url: "/memcache/delete", 
      type: "post",
      data:{}, 
      success:function(){
          console.log('memcache deleted');
      }//success
  }); //ajax
}

- tim peterson

Answer 1

Ajax是异步的。

当您刷新（或关闭）浏览器时，会调用beforeunload。这意味着一旦beforeunload完成执行，页面将刷新（或关闭）。

当您进行Ajax请求时（由于它是异步的），Javascript解释器不会等待ajax success事件被执行，并继续执行beforeunload。

ajax success预计会在几秒钟后调用，但由于页面已经刷新/关闭，您将看不到它。

附注:

.success()方法已过时，已被.done()方法替代

参考资料

- Jashwant

---

@Jashwant，感谢您的解释。虽然我有证据表明在关闭/重新打开浏览器后使用Chrome时memcache删除成功，但在使用Firefox时仍然没有删除。这里似乎还有其他问题...将$.ajax转换为同步的async:false是否有帮助？ - tim peterson

似乎将$.ajax选项中的async改为false可以解决这个问题。有什么理由不这样做吗？ - tim peterson

是的，为了开发者的方便，提供所有选项。使用适合您的选项即可 :) - Jashwant

它适用于Chrome和Safari吗？ - java seeker

应该可以。测试一下自己，然后让社区知道吧 :) - Jashwant

Answer 2

为了完整起见，以下是我所做的，感谢@Jashwant的指导： 我注意到这个其他SO Q&A建议相同的解决方案。 关键在于下面$.ajax调用中的async:true(false)：

$(window).bind('beforeunload', function(){ 
  if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
    console.log('firefox delete');
     var data={async:false};
     memcacheDelete(data);
     return null;
  } 
  else {
    console.log('NON-firefox delete');
     var data={async:true};
     memcacheDelete(data);
    return null;
  }
});

function memcacheDelete(data) {
  $.ajax({
    url: "/memcache/delete", 
    type: "post",
    data:{}, 
    async:data.async,
    success:function(){
      console.log('memcache deleted');
    }//success
  }); //ajax
}

- tim peterson

---

只是满足我的好奇心。在你的Firefox检测程序中，&& new Number(RegExp.$1) >= 4 的意义（用途）是什么？只是确保Firefox是4或更高版本吗？ - trejder