在窗口卸载事件上发送发布请求（AJAX 请求与表单提交与图像请求）答案

【问题标题】：Sending post request on window unload event (AJAX request Vs Form submit Vs Image request)在窗口卸载事件上发送发布请求（AJAX 请求与表单提交与图像请求）
【发布时间】：2014-10-06 13:39:41
【问题描述】：

我正在尝试跟踪在我的网站上发生的用户事件。一种方法是在每次看到事件时发送一个 ajax 请求。但这会不必要地加载服务器。缓解此问题的一种方法是在卸载事件时批量发送请求（现在我已将阈值设置为 16 个事件）。但是在“卸载/卸载前”事件期间会出现问题。

以下是我面临的问题：

AJAX 请求不工作，除非它们是同步的。但是我需要使用异步，因为如果服务器响应很慢，它的对应物可能会导致问题。 Stack Overflow 中就此事提出的大多数问题都建议您使用“同步”。其中一些如下所示。

我可以使用图像。那么这个方法工作正常（请求被记录），但它是一个 GET 请求。我需要 POST 请求。
我可以使用将结果加载到隐藏 iframe 中的表单。这在 Chrome (36.0.1985.125) 上工作正常（请求被记录）但在 Firefox (31.0) 上失败。

但在 Chrome 上我遇到了一个奇怪的问题。也就是说，如果我删除“目标”属性，则不会记录请求。在“unload/beforeunload”事件期间发起请求是否需要“target”属性？

Stack Overflow 的一个回答建议表单提交是异步的。如果是这样，为什么浏览器不像在“卸载/卸载前”事件期间取消 AJAX 请求那样取消请求？对于图片也是同样的问题。

How to make form submission synchronous?

我使用的测试代码如下。我在 MAC 上使用 XAMPP 服务器。

test.html 前端代码。

test.php 后端代码。

【问题讨论】：

标签： javascript jquery ajax forms jquery-events

【解决方案1】：

试试这个技巧：

$.post('log.php', {hello:'world'}, function() {
    sleepy.abort();
});

var sleepy = $.ajax({
    url: '/sleep.php',
    async: false,
});

【讨论】：

【解决方案2】：

Navigator.sendBeacon()正是你所需要的✨

有关Navigator.sendBeacon()的更多信息，您应该查看Millennial JS或helpful google dev article：D

【讨论】：