$(window).unload在离开网页之前等待AJAX​​调用完成

Question

基本上,一旦用户在我的应用程序中留下网页,我需要使用AJAX调用PHP脚本,这将在网页上花费一些时间到数据库,然后离开页面.

等待AJAX​​请求完成非常重要,因为用户无法访问我的应用程序中的网页,除非他们在前一页上花了一定时间(比方说两分钟).

这是我的jquery代码:

$(document).ready(function() {

    var teid = TEID;
    var startTime = new Date().getTime();

    $(window).unload(function() {
        var timeSpentMilliseconds = new Date().getTime() - startTime;
        var t = timeSpentMilliseconds / 1000 / 60;

        $.ajax({
            type: 'POST',
            url: '/clientarea/utils/record-time',
            data: 'teid=' + teid + '&t=' + t
        });
    });

});

我应该如何更改它以便在离开网页之前等待AJAX​​请求结束？

编辑:

或者更好(更容易)让AJAX请求每分钟重复一次.那可能吗？

Answer 1

好吧,您可以设置async: false您的AJAX调用以使浏览器在执行任何其他操作之前等待请求完成,但请注意,这将在请求期间"挂起"浏览器.

$.ajax({
    type: 'POST',
    async: false,
    url: '/clientarea/utils/record-time',
    data: 'teid=' + teid + '&t=' + t
});

从手册:

^{默认情况下,所有请求都是异步发送的(默认情况下设置为true).如果需要同步请求,请将此选项设置为false.跨域请求和dataType:"jsonp"请求不支持同步操作.请注意,同步请求可能会暂时锁定浏览器,并在请求处于活动状态时禁用任何操作.}

Answer 2

最好的解决方案是使用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);
};

希望这可以帮助!

Answer 3

如何在卸载处理程序中设置cookie？服务器应该在后续请求中看到它.

<script>
    $(window).unload(function(){document.cookie='left_on='+(new Date())})
</script>