异步AJAX请求顺序问题：热点认证后无法稳定提交邮箱至数据库

看起来你已经找对了方向——用请求完成事件来串联两个AJAX调用，但有两个核心问题导致你的方案没达到预期：

1. 你只检查了readyState === 4（请求完成），但没验证请求是否成功（比如HTTP状态码处于200-299的成功区间）。
2. 路由器的权限开通不是请求返回后立刻生效的，哪怕第一个AJAX成功返回，网络权限可能还需要几秒才能真正可用，这时候立刻发第二个请求会因无权限而失败。

改进后的可靠实现 #

下面是结合请求成功校验+智能重试机制的解决方案，确保第二个存邮箱的请求能在网络权限生效后执行，并且只有在操作完成后才跳转：

document.getElementById("submit_ok").addEventListener("click", SendAjax);

function SendAjax() {
    const email = document.getElementById("email").value.trim();
    console.log(email);

    if (!email) {
        alert("Please enter your email.");
        return;
    }

    // 第一步：发送路由器认证请求
    const authXhr = new XMLHttpRequest();
    authXhr.open('POST', 'http://router/login', true);
    authXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 注意：Access-Control-Allow-Origin是服务器响应头，不需要在请求中设置
    authXhr.send("popup=true&username=HSuser&password=SimpleUserPassword");

    authXhr.onload = function() {
        // 确认认证请求成功返回
        if (this.status >= 200 && this.status < 300) {
            console.log("路由器认证完成，等待网络权限生效...");
            // 带重试机制尝试保存邮箱
            attemptSaveEmail(email);
        } else {
            alert("网络认证失败，请重试。");
        }
    };

    authXhr.onerror = function() {
        alert("无法连接到路由器，请检查网络状态。");
    };
}

// 带重试逻辑的邮箱保存函数
function attemptSaveEmail(email, retryCount = 0) {
    const maxRetries = 5;    // 最多重试5次
    const retryDelay = 1500; // 每次重试间隔1.5秒

    if (retryCount >= maxRetries) {
        alert("无法保存邮箱信息，请稍后尝试。");
        // 根据业务需求，即使保存失败也可以跳转
        location.href = "http://server/redirected.html";
        return;
    }

    const saveXhr = new XMLHttpRequest();
    saveXhr.open('POST', 'http://server/insertDB.php', true);
    saveXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    saveXhr.send(`Email=${encodeURIComponent(email)}`);

    saveXhr.onload = function() {
        if (this.status >= 200 && this.status < 300) {
            console.log("邮箱保存成功，开始跳转...");
            location.href = "http://server/redirected.html";
        } else {
            // 请求失败，触发重试
            console.log(`保存失败，第${retryCount+1}次重试中...`);
            setTimeout(() => attemptSaveEmail(email, retryCount + 1), retryDelay);
        }
    };

    saveXhr.onerror = function() {
        // 网络错误（大概率是权限还未生效），触发重试
        console.log(`网络连接失败，第${retryCount+1}次重试中...`);
        setTimeout(() => attemptSaveEmail(email, retryCount + 1), retryDelay);
    };
}

关键改动说明 #

• 用onload替代onreadystatechange：onload只在请求成功完成时触发，比手动检查readyState更简洁可靠。
• 校验HTTP状态码：确保请求真正成功，而不是仅仅完成（比如避免5xx服务器错误、4xx客户端错误的情况）。
• 移除无效请求头：Access-Control-Allow-Origin是服务器返回的响应头，在请求中设置没有任何作用，直接删除。
• 添加智能重试机制：针对路由器权限生效的延迟问题，设置合理的重试次数和间隔，平衡用户体验与成功率。
• 完善错误处理：分别处理认证失败、保存失败、网络错误等场景，给用户明确的反馈。

这样修改后，就能保证第二个请求在网络权限可用后再发送，并且只有在邮箱保存成功（或重试耗尽）后才会跳转，完美解决你遇到的问题。

内容的提问来源于stack exchange，提问作者DrDoom