如何等待异步请求完成

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; 
});