Javascript 如何从后端异步接收消息？

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

   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>
   ....

---

我将给出一个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 })
});

---

参考资料：

如果我正确理解了问题，那就是“从服务器端返回正确的响应”。 实际实现被称为Java，因此我假设Ajax请求提交到一个后端Servlet。 您需要在doGet方法中获取HttpServletResponse对象的句柄（使用get时），添加逻辑以验证用户名并将响应文本发送回。 差不多

public void doGet(HttpServletRequest request,HttpServletResponse response)
  throws ServletException, IOException 
{
    String username = request.getParameter(username);
    String responseText = "";
    boolean isUserAval;
    //add your logic to verify username setting isUserAval to true/false accordingly

    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    if(isUserAval)
    {
       responseText = "Username is available";
    }
    else
    {
       responseText = "Username is not available";
    }
    out.println(responseText);
    out.close();
}

---

使用下面的功能。。。您还将注意到，请求将有一个readystate和类似的内容，您正在查找介于200-202之间的prolly statusCode，就绪状态为4，状态文本为OK

var request = $.get(url, function(event){
   //If your within your application your url can be the method you need
   //I.E. Ruby URL post would be /api/v1/users/find_user_by_ID
   //This URL Points to the api/v1 folder than the users controller
   //Than finally the method inside the controller (find_user_by_ID)
}

---

我还相信，无论您做什么，都不需要使用javascript，如果您使用PHP或Ruby，您可以简单地添加PHP或Ruby标记并创建if语句，而不是使用javascript添加和删除类，或者根据每个步骤中发生的情况切换隐藏和显示。

谢谢，但如何将其与onclick关联？因此，一旦用户键入数据并单击文本框，就会触发此功能？有几种方法可以实现这一点。你听一个事件，点击，按键等等。我会更新我的答案来反映这一点

var request = $.get(url, function(event){
   //If your within your application your url can be the method you need
   //I.E. Ruby URL post would be /api/v1/users/find_user_by_ID
   //This URL Points to the api/v1 folder than the users controller
   //Than finally the method inside the controller (find_user_by_ID)
}