没有时间在窗口卸载时发送获取请求

Question

我想在用户关闭浏览器窗口时通知服务器。

我尝试了所有

$(window).bind("beforeunload", function() {
    $.get("${contextPath}/notify?direction=logout");
});

和

$(window).unload( function() {
    $.get("${contextPath}/notify?direction=logout");
});

和

$(window).unload(function() {
    $.ajax({
      url: "${contextPath}/notify?direction=logout"
    });
});

但两者都不能很好地工作，尽管事实上，手册中说它可能应该这样做。

在 Firefox 中，我仅在窗口关闭时没有通知，但在页面刷新时有通知。在 Chrome 中，我两者都没有。

我试图在 Firebug 或 Chrome 开发者工具中跟踪这个脚本，发现如果被跟踪它就开始工作了！所以我认为它不能正常工作，因为它没有时间在窗口关闭或导航之前发送请求。

这是真的？如何完成我的任务？

解决方案

这有效：

$(window).bind("beforeunload",
    function() {
        $.ajax({
            async: false,
            url: 'notify'
        });
    }
);

Answer 1

其他答案已过时，并会导致其他问题，例如不可靠的信令或延迟下一页的加载。

最好的解决方案是使用navigator.sendBeacon：https : //developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}

此方法用于分析和诊断代码以将数据发送到服务器。

发送分析的一个问题是，当用户完成一个页面时，站点通常希望发送分析：例如，当用户导航到另一个页面时。在这种情况下，浏览器可能即将卸载页面，在这种情况下，浏览器可能会选择不发送异步 XMLHttpRequest 请求。

过去，网页试图将页面卸载延迟足够长的时间以发送数据。为此，他们使用了解决方法，例如：

• 使用阻塞同步 XMLHttpRequest 调用提交数据。
• 创建一个元素并设置它的 src。大多数用户代理会延迟卸载以加载图像。
• 创建几秒钟的无操作循环。

所有这些方法都会阻止卸载文档，从而减慢导航到下一页的速度。下一页无法避免这种情况，因此新页面看起来很慢，即使是上一页的错误。

使用 sendBeacon() 方法，当用户代理有机会时异步传输数据，不会延迟卸载或下一次导航。这意味着：

• 数据发送可靠
• 它是异步发送的
• 不影响下一页的加载

Answer 2

这非常棘手，因为浏览器不会等到响应到来，因此 ajax 请求可能会中止。

你可以在 beforeunload 事件中尝试这样的事情。

$(window).bind("beforeunload", function() {
    $.ajax({
        async: false,//This will make sure the browser waits until request completes
        url: "${contextPath}/notify?direction=logout"
    });
});