Question

我有一张ajax注册表。用户可以在输入字段中键入所需的用户名，然后立即点击注册按钮，同时检查用户名是否可用的ajax请求未完成。对于这种情况，我希望仅当检查用户名的ajax请求完成时，注册按钮的操作才开始执行，否则等待它完成然后继续。怎么做？

我希望用户名验证功能保持异步，因为每次用户在输入字段上执行键操作时都会执行。

一种方法是在单击注册按钮时进入setTimeout（）循环，并保持其状态直到标志良好。另一种方法是，如果异步请求未完成，则调用同步用户名检查请求。有更好的方法吗？

如果你在不使用jQuery的情况下给出答案，那就太好了。

Answer 1

不要为此使用setTimeout。

只需使用jquery's ajax的回调功能：执行success回调中的“后”代码或新的done帮助：

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

编辑：

没有jquery，没有立即触发：

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

点击“注册”按钮后，您只需检查requestDoneAndOK，如果是真的，请拨打其他功能。

编辑2：

一旦实现2个条件就执行代码：接收到答案并单击注册按钮。

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};

Answer 2

如果你想在没有jQuery的情况下这样做，你需要使用onreadystatechange来使用默认的JavaScript调用机制。请记住，jQuery只是默认机制的包装器。我建议您使用jQuery或其他东西只是为了防止一大堆跨浏览器问题和http状态更改逻辑。

在这里阅读有关原生内容的所有内容：http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Answer 3

您需要使用回调和存储验证标志布尔值，然后在用户提交注册页面之前需要检查。这是一个jquery实现，但不难将它变成常规js。该方法在此定义：

var goodUsername = false;

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});

// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});

如何等待异步请求完成

3 个答案: