Возвращаемое значение из функции с вызовом Ajax

Может ли кто-нибудь сказать мне, как вернуть значение 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;
}

Вышеуказанная функция срабатывает, когда вы нажимаете submit в регистрационной форме (как это должно быть очевидно). Проблема в том, что эта форма отправляется независимо от того, что ответ, а поле предупреждения иногда ничего не показывает [пусто], иногда вообще не отображается. Однако, если я изменил окончание status на false вручную [т. замените status на false], в поле предупреждения появится правильное значение.

P.S. Я хуже, чем noob в javascript, поэтому предложения по обычному улучшению кода также приветствуются.

ОТВЕТЫ

Ответ 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() {

Что это значит, говорит, что при изменении onreadystatechange запроса AJAX будет выполняться анонимная функция, которую вы определяете. Этот код НЕ выполняется сразу. Он ждет события. Это асинхронный процесс, поэтому в конце определения функции javascript будет продолжать работать, и если состояние не изменилось к моменту его получения до return status;, переменная status, очевидно, не успела бы установить, а ваша script не будет работать должным образом. Решение в этом случае должно всегда return false;, а затем, когда событие срабатывает (т.е. Сервер ответил с выходом PHP скрипт), вы можете определить статус и отправить форму, если все в порядке.

Ответ 2

Можно выполнить синхронный метод отправки, поэтому 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;
}

Как я уже говорил, это не очень хорошая идея. Практически всегда лучше делать запрос асинхронно, поэтому другой код может работать, пока вы ждете ответа. Там есть причина A jax вместо S jax.