确保更改页面后请求将完成答案

【问题标题】：Making sure request will be completed after changing page确保更改页面后请求将完成
【发布时间】：2013-01-28 23:59:14
【问题描述】：

问题是：我有使用 JavaScript 发送日志的自定义分析引擎。我想在用户提交表单后发送日志。使用 AJAX 发送日志。现在问题来了，表单提交不是AJAX，刷新页面是正常请求。

我已经了解到，即使客户端中止连接，您也可以强制执行脚本

Does php execution stop after a user leaves the page?

我想了解的是，如果在发送 AJAX 调用后几乎立即提交表单，如何确保服务器接收请求和标头？

【问题讨论】：

标签： javascript ajax

【解决方案1】：

假设这是您的带有提交按钮的表单：

<form id="myForm" action="/myAction.html" method="POST">

    <!-- form inputs -->
    <input type="submit" value="submit me!" />

</form>

使用 JavaScript，您可以绑定到表单的提交事件，进行 ajax 调用，然后返回 true 以继续将表单提交到服务器：

<script type="text/javascript">

document.getElementById('myForm').addEventListener('submit', function(e){
    // do your ajax call here and when you finish, return true from
            // this function (in the ajax success callback)
    return true;
});

</script>

【讨论】：

这需要一个同步的 AJAX 调用。
所以你可以等到readyState 2（收到请求）或3（处理请求）而不是等到4（请求完成并且响应准备好）
但是不能异步返回。

【解决方案2】：

var url = "...";
var my_form = document.getElementsByTagName("form")[0];
var request_received = false;

my_form.addEventListener("submit", function(e) {
    if (!request_received) {
        e.preventDefault(); // prevent the form from submitting

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState >= 2 && !request_received) {
                request_received = true;
                my_form.submit(); // submit the form only if the request has been received
            }
        };
        xhr.open("GET", url, true);
        xhr.send();

        return false;
    }
}, false);

【讨论】：