时间戳

首页 > 解决方案 > AJAX Vanilla JavaScript - 仅在第一个已发送后才发送 2cnd 异步帖子

javascript - AJAX Vanilla JavaScript - 仅在第一个已发送后才发送 2cnd 异步帖子

问题描述

我正在制作一个 HotSpot，一旦你输入了你的电子邮件地址，它就可以让你访问互联网。

为此，我需要制作两个单独的 AJAX 帖子。

问题是，如果将 async 设置为 false（而不是 true），我会收到警告*。

xhr.open('POST', 'http://router/login', false);

警告*：主线程上的 Synchronus XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助http://xhr.spec.whatwg.org。

把它们加起来。我想我需要制作两个异步 AJAX POST（因为同步给了我警告），而第二个（电子邮件）只能在第一个（用户名、密码）发送后发送。

我目前遇到的问题是，有时邮件被插入数据库，有时却没有。我也不想为用户设置一个巨大的 setTimeout 来重定向。

    <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" id="email" name="email" autofocus="autofocus" />
        <br />
        <input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
    </form>

<script type="text/javascript">

document.getElementById("submit_ok").addEventListener("click", SendAjax);
    function SendAjax() {
        var email = document.getElementById("email").value;
        console.log(email);
        // Check if field is empty 
        if (email=="") {
            alert("Please enter your email.");
        }
        // AJAX code to submit form
        else{
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://router/login', true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
            xhr.send("popup=true&username=HSuser&password=SimpleUserPassword");
            {
                setTimeout(function(){
                    var xhr2= new XMLHttpRequest();
                    xhr2.open('POST', 'http://server/insertDB.php', true);
                    xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
                    var useremail = document.getElementById("email").value;
                    xhr2.send("Email="+encodeURIComponent(useremail));
                    setTimeout(function (){
                        location.href="http://server/redirected.html";}
                        ), 1000
                }, 2000);
            }
        }
    }

编辑：发布一个可能的解决方案的片段。它目前没有按预期工作，发布它以便我们可以更详细地讨论可能的问题。

document.getElementById("submit_ok").addEventListener("click", SendAjax);
    function SendAjax() {
        var email = document.getElementById("email").value;
        console.log(email);
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }
        // AJAX code to submit form
        else{
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://router/login', true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
            xhr.send("popup=true&username=HSuser&password=SimpleUserPassword");
            xhr.onreadystatechange = function () {
            var DONE = this.DONE || 4;
                if (this.readyState === DONE){
                    var xhr2= new XMLHttpRequest();
                    xhr2.open('POST', 'http://server/insertDB.php', true);
                    xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "Access-Control-Allow-Origin: *");
                    var useremail = document.getElementById("email").value;
                    xhr2.send("Email="+encodeURIComponent(useremail));
                    xhr2.onreadystatechange = function () {
                    var DONEDONE = this.DONEDONE || 4;
                        if (this.readyState === DONEDONE){
                            location.href="http://server/redirected.html";
                        }
                    }
                }
            }
        }
    }

我试过这个选项，它“不起作用”。计算机最终确实可以访问互联网（大约 8 秒），“用户”被立即重定向并且电子邮件没有保存在数据库中（即使在修订之后）。

我要感谢大家迄今为止提供的帮助。

标签： javascriptajax

解决方案

您可以使用两个选项，第一个是定义 XHR 事件处理程序：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  var DONE = this.DONE || 4;
  if (this.readyState === DONE){
    ... make here the second request (xhr2) ...
    ... timeouts not needed ...
  }
}

就像在https://en.wikipedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener中描述的那样，只要在请求完成时触发事件，就不再需要超时。

另一个选项更简单：从异步模式更改为同步。这将阻塞接口，因此通常不太受欢迎。此处更改为 false：

xhr.open('POST', 'http://router/login', false);

推荐阅读