在卸载之前将AJAX发送到服务器

Question

所以据说从Firefox> 4开始,绑定窗口jQuery对象beforeunload不再起作用了.

我想做的是提交AJAX帖子来删除我的服务器的memcache数据.

当我刷新唯一的打开选项卡时,我可以看到beforeunload使用以下代码在firefox和chrome中调用该事件,如console.log消息"firefox/NON-firefox delete"所示.问题是我从未看到console.log消息"memcache delete",表明我的服务器从未看到过$.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
}

Answer 1

Ajax是异步的.

当您刷新(或关闭)浏览器时,beforeunload正在调用.它意味着一旦beforeunload完成执行,页面将刷新(或关闭).

当你执行ajax请求时,(因为它是异步的)javascript解释器不等待ajax success事件被执行并向下移动完成执行beforeunload.

success 应该在几秒后调用ajax,但是当页面被刷新/关闭时你不会看到它.

边注:

.success()方法已弃用,并由.done()方法替换

参考

Answer 2

只是为了完成,这就是我所做的,感谢@Jashwant的指导:我注意到这个其他的SO Q&A提出了相同的解决方案. 关键是在async:true(false)在$.ajax下面的呼叫:

$(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
}