JavaScript中XMLHttpRequest请求的if和else分支为何同时执行

核心问题出在XMLHttpRequest的onreadystatechange事件逻辑编写错误：

• onreadystatechange会在XHR生命周期的每一个状态变更节点触发，对应readyState从0（未初始化）到4（请求完成）的5个阶段，并非只在请求结束时触发。
• 你当前的判断逻辑是：只要不满足xhr.readyState == 4 && xhr.status == 200，就直接进入else分支渲染“服务不可用”的错误提示。请求从发起走到完成的过程中，readyState为1（连接建立）、2（请求接收）、3（响应处理中）的阶段都会触发事件，每次都会进入else分支把错误提示写入DOM。
• 成功分支里的window.location.href = "Profile"是异步触发的跳转操作，浏览器发起跳转后不会立刻销毁当前页面，之前已经被写入DOM的错误提示会在跳转前的间隙被渲染出来，就出现了“操作成功、跳转正常，但仍然弹出错误”的现象。

另外你把表单、按钮的重置状态代码写在了xhr.send()之后，这部分代码会在请求刚发起时就同步执行，不等请求返回，属于逻辑不严谨的问题，虽然不是导致本次错误提示闪现的核心原因，但会造成用户可重复点击提交按钮的bug。

• 登录、注册页的成功逻辑一般会先展示成功提示，延迟数百毫秒再执行跳转，中间会覆盖掉之前else分支写入的错误提示，所以不会察觉到错误闪现。
• 本地文件、在线运行环境的请求响应速度极快，或者跳转触发时机更早，错误提示还没来得及被浏览器渲染就被页面跳转打断，因此看不到异常。

1. 修正onreadystatechange的判断逻辑：仅当readyState == 4（请求完成）时，再根据HTTP状态码判断是成功还是失败，不要把请求中间状态判定为请求错误。
2. 把按钮、表单禁用状态的重置逻辑，移动到请求完成的回调分支中，不要在请求刚发起时就恢复可操作状态。
3. 发送请求时对参数做URL转义，避免参数包含特殊字符时导致后端解析异常。

修正后的XHR相关核心代码如下：

xhr.onreadystatechange = function() {
    // 仅在请求完全完成时处理结果
    if (xhr.readyState == 4) {
        // 先恢复按钮和表单的可操作状态
        document.querySelector("#Profile_Save").innerHTML = "Save";
        document.querySelector("#Profile_Save").classList.add("active");
        document.querySelector("#Profile_Save").disabled = false;
        document.querySelector("#Profile_Edit_F_Name").disabled = false;
        document.querySelector("#Profile_Edit_L_Name").disabled = false;
        document.querySelector("#Profile_Edit_Email").disabled = false;

        if (xhr.status == 200) {
            var json = JSON.parse(xhr.responseText);
            if (json.Status == "Ok") {
                window.location.href = "Profile";
            } else {
                document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
                document.querySelector("#Profile_Edit_Msg").classList.add("active_danger"); // 注意原代码存在拼写错误：denger应为danger
                document.querySelector("#Profile_Edit_Msg").innerHTML = json.Message;
            }
        } else {
            // 只有请求完成但状态码异常时才展示通用错误
            document.querySelector("#Profile_Edit_Msg").classList.add("active_danger");
            document.querySelector("#Profile_Edit_Msg").innerHTML = "Sorry, this content isn't available right now";
        }
    }
}
// 对参数做转义后再发送
xhr.send("F_Name=" + encodeURIComponent(f_name) + "&L_Name=" + encodeURIComponent(l_name) + "&Email=" + encodeURIComponent(email));
// 注意：原代码写在xhr.send()后面的重置按钮、表单状态的代码要全部删除，统一移到上面的回调中处理

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