使用 Ajax 调用从函数返回值

Question

谁能告诉我如何将status 的值作为函数的返回值返回。

function checkUser() {
    var request;
    var status = false;

    //create xmlhttprequest object here [called request]

    var stu_id = document.getElementById("stu_id").value;
    var dName = document.getElementById("dName").value;
    var fileName = "check_user.php?dName=" + dName + "&stu_id=" + stu_id;
    request.open("GET", fileName, true);
    request.send(null);

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            var resp = parseInt(request.responseText, 10);
            if(resp === 1) {
                alert("The display name has already been taken.");
                status = false;
            }
            else if(resp === 2) {
                alert("This student ID has already been registered");
                status = false;
            }
            else if(resp === 0) {
                status = true;
            }
        }
    }
    return status;
}

当您在注册表单中点击提交时会触发上述功能（必须很明显）。问题是，无论响应是什么，此表单都会提交，并且警报框有时不显示任何内容[空白]，有时根本不显示。但是，如果我手动将结尾 status 更改为 false [即将status 替换为false]，正确的值会显示在警告框中。

附：我比 javascript 的菜鸟还差，所以也欢迎提出一般改进代码的建议。

Answer 1

问题是onreadystatechange 不会触发，直到……等待它……状态改变。所以当你return status; 大部分时候状态都来不及设置。您需要做的是始终return false; 并在onreadystatechange 内部确定您是否要继续。如果你这样做了，那么你提交表格。简而言之，获取处理返回值的代码，而是从 readystatechange 处理程序中运行它。你可以直接这样做：

request.onreadystatechange = function() {
    if (request.readyState == 4) {
        var resp = parseInt(request.responseText, 10);
        switch (resp) {
        case 0:
            document.getElementById('myform').submit();
            break;
        case 1:
            alert("The display name has already been taken.");
            break;
        case 2:
            alert("This student ID has already been registered");
            break;
        }
    }
}
return false; // always return false initially

或通过将continuation 传递给进行异步调用的函数：

function checkUser(success, fail) {
    ...
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            var resp = parseInt(request.responseText, 10);
            switch (resp) {
            case 0:
                success(request.responseText);
            case 1:
                fail("The display name has already been taken.", request.reponseText);
                break;
            case 2:
                fail("This student ID has already been registered", request.reponseText);
                break;
            default:
                fail("Unrecognized resonse: "+resp, request.reponseText);
                break;
            }
        }
    }

除此之外，在默认的return false; 之前，您可能希望有某种指示符来指示正在发生的事情，例如禁用提交字段、显示加载圈等。否则用户可能会感到困惑，如果它是获取数据需要很长时间。

进一步说明

好吧，所以你的方法不起作用的原因主要是在这一行：

request.onreadystatechange = function() {

这是说当 AJAX 请求的onreadystatechange 更改时，您定义的匿名函数将运行。此代码不会立即执行。它正在等待事件发生。这是一个异步过程，所以在函数定义结束时，javascript 将继续运行，如果状态在到达return status; 时没有改变，那么变量status 显然没有时间设置并且你的脚本无法按预期工作。这种情况下的解决方案是始终使用return false;，然后当事件触发时（即服务器以 PHP 的脚本输出响应），您可以确定状态并在一切正常的情况下提交表单。

Answer 2

可能同步执行 send 方法，所以 request.responseText 将立即可用，但通常不是一个好主意。该请求将挂起浏览器，直到完成。

要将请求设置为同步，请将request.open的第三个参数设置为“false”。

function checkUser() {
    var request;
    var status = false;

    //create xmlhttprequest object here [called request]

    var stu_id = document.getElementById("stu_id").value;
    var dName = document.getElementById("dName").value;
    var fileName = "check_user.php?dName=" + dName + "&stu_id=" + stu_id;
    request.open("GET", fileName, false);
    request.send(null);

    if (request.status === 200) {
        var resp = parseInt(request.responseText, 10);
        if(resp === 1) {
            alert("The display name has already been taken.");
            status = false;
        }
        else if(resp === 2) {
            alert("This student ID has already been registered");
            status = false;
        }
        else if(resp === 0) {
            status = true;
        }
    }
    else {
        alert("Request failed");
        status = false;
    }

    return status;
}

正如我之前提到的，这不是一个好主意。异步执行请求几乎总是一个更好的主意，这样其他代码就可以在您等待响应时运行。 Ajax 流行而不是 Sjax 是有原因的。