javascript - 如何异步接收后端消息？

Question

我需要验证用户名，因此当用户输入用户名时，应将其发送到后端以验证其可用性。我有以下代码，但对从后端接收可用或不可用消息有疑问。

   function verifyUsername(value){
           if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                  document.getElementById("mymessage").innerHTML=xmlhttp.responseText;
                } 
            }
            xmlhttp.open("get","verifyUsername?username="+value,false);
            xmlhttp.send();
        }


  ....
  <div id="mymessage"></div>
   ....

服务器端伪代码(实际实现:Java)

 ....
 if(verify(username))
    return "Username is not available";
 else
   return "username is available";

Answer 1

我将给出一个 jQuery 示例，我不会关心纯 JavaScript 版本。您正在寻找的是在 ajax 请求返回后触发的回调函数。

// listen to a click event on a button OR something 
$("#buttonName").on("click", function(event){

    // prevent any default activity
    event.preventDefault();

    // get your value 
    var value = $("#mymessage").val();

    // jQuery ajax event
    $.ajax({
      url : "verifyUsername?username="+value,
      type: 'GET'
    }).done(function ( data ) {
       if ( console && console.log ) {
      console.log( "Data returned :"+data )
       // do something else
    }
    }):

.done() 是成功回调选项，还有其他选项:

    // jQuery ajax event
        $.ajax({
          url : "verifyUsername?username="+value,
          type: 'GET'
        })
    // successful callback
    .done(function(){ // success })
    // fail/error callback
    .fail(function(){ // fail })
    // completed callback 
    .always(function(){ // will always execute, even if request fails })
});

引用:http://api.jquery.com/jQuery.ajax/