页面卸载时使用 JQuery 的 Ajax 请求答案

【问题标题】：Ajax request with JQuery on page unload页面卸载时使用 JQuery 的 Ajax 请求
【发布时间】：2010-12-21 18:04:55
【问题描述】：

我正在尝试这样做：

$(window).unload( function () { 

$.ajax({
    type: "POST",
    url: "http://localhost:8888/test.php?",
    data: "test",
    success: function(msg){
         alert( "Data Saved: " + msg );
    }
}); 
alert (c);
});

但是，成功警报从未显示，此请求似乎甚至没有到达服务器。我做错了什么？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我相信您需要使用async : false 参数使请求同步（默认情况下它是异步的）。

同步请求会锁定浏览器，直到它们完成。如果请求是异步的，页面只会继续卸载。它足够快，甚至连请求都没有时间触发。

【讨论】：

谢谢。你有解释为什么这个必须是同步的吗？
同步请求会锁定浏览器直到它们完成。如果请求是异步的，页面只会继续卸载。它足够快，甚至连请求都没有时间触发。
这是否意味着如果浏览器需要很长时间才能卸载（可能是硬盘驱动器问题）有时可能会发送请求？或者它从未发送过。只是好奇。
虽然这是正确答案，但令我不安的是，您还没有注意到它是 evil。在慢速网络连接上，您将阻止用户的浏览器以这种方式进行操作。
没有影响

【解决方案2】：

尝试使用 async = false 调用它；

jQuery.ajax({url:"http://localhost:8888/test.php?", async:false})

我刚试过。

【讨论】：

【解决方案3】：

最好的解决方案是使用navigator.sendBeacon。这是全新的功能，开始在新版本的浏览器中实现。该功能在 Chrome 39 和 Firefox 31 之后的浏览器中可用。在撰写本文时，Internet Explorer 和 Safari 不支持该功能。为确保您的请求在尚不支持新功能的浏览器中发送，您可以使用以下解决方案：

var navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
  var client = new XMLHttpRequest();
  client.open("POST", url, false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(data);
};

此函数不允许您注册 onsuccess 回调。

【讨论】：

目前，这仍被列为实验性的，“语法和行为......在未来版本中可能会发生变化”
更新：当您编写此答案时，这可能并不为人所知，但 sendBeacon 不应与 unload 和 beforeunload 事件一起使用，因为它可能不能可靠地触发——应该使用visibilitychange 事件。有关详细信息，请参阅 MDN 文档。

【解决方案4】：

HTML 5 规范声明alert()、prompt() 等在window.unload() 事件期间将不可用。请参阅window.unload() 了解更多详情。您可以使用console.log('success'); 而不是alert() 来检查结果。

【讨论】：

【解决方案5】：

也许您使用onbeforeunload 事件会取得更大的成功？

   $(window).bind('beforeunload', ...

【讨论】：

Safari 不支持 beforeunload 事件

【解决方案6】：

您的函数和 Ajax 调用看起来不错，所以我猜测您的浏览器窗口在 ajax 调用有时间访问服务器并返回之前已关闭。当窗口关闭时，ajax 调用可能会返回一些东西，尝试在你的 ajax 调用中添加错误函数，看看是否是这种情况：

error: function (xhr, textStatus) {
    alert('Server error: '+ textStatus);
}

【讨论】：

我真的不需要它来“返回”（即不需要成功警报，仅用于调试目的）。但是，我确实需要在卸载完成之前触发 ajax 请求。