How to use Ajax to asynchronously check whether the user name is duplicated

This time I will show you how to use Ajax to asynchronously check whether the user name is duplicated, and how to use Ajax to asynchronously check whether the user name is duplicated. What are the precautions?The following is a practical case, let's take a look .

When registering a user on any website, it will check whether the user already exists. A long time ago, the processing method was to submit all data to the server for verification. Obviously, the user experience of this method was very bad; later, with Ajax and asynchronous interaction, when the user finished entering the user name and continued to fill in other information , Ajax sends the information to the server to check whether the user name has been registered, so that if the user name already exists, a prompt can be given without waiting for the user to submit all data. Using this method greatly improves the user experience. Today I will talk to you about this interaction method.

The following is to use JS to obtain the user ID and then send it to the user_validate.jsp page, and then receive the message returned by the page through the callback method and notify the user.

function validate(field) { 
  if (trim(field.value).length != 0) { 
    //创建Ajax核心对象XMLHttpRequest 
    createXMLHttpRequest(); 
     
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    //将方法地址复制给onreadystatechange属性 
    //类似于电话号码 
    xmlHttp.onreadystatechange=callback; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
  } 
} 
 
function callback() { 
  //alert(xmlHttp.readyState); 
  //Ajax引擎状态为成功 
  if (xmlHttp.readyState == 4) { 
    //HTTP协议状态为成功 
    if (xmlHttp.status == 200) { 
      if (trim(xmlHttp.responseText) != "") { 
        //alert(xmlHttp.responseText); 
        document.getElementById("spanUserId").innerHTML = "<font color=&#39;red&#39;>" + xmlHttp.responseText + "</font>"; 
      }else { 
        document.getElementById("spanUserId").innerHTML = ""; 
      } 
    }else { 
      alert("请求失败，错误码=" + xmlHttp.status); 
    } 
  } 
}

The user_validate.jsp page receives the user ID and queries whether it exists based on the ID. If it exists, it will be returned. If it does not exist, nothing will be returned.

<% 
  String userId = request.getParameter("userId"); 
  if(UserManager.getInstance().findUserById(userId) != null) { 
    out.println("用户代码已经存在"); 
  } 
%>

The check method is triggered when the cursor leaves the user code text box.

Copy code The code is as follows:

Rendering

About how to based on the user I won’t post the code for querying whether the ID already exists, because it is too simple and I am afraid of wasting everyone’s bandwidth if I post it.

When doing web development, you should pay more attention to the user experience. Using more client-side verification (of course, a server verification is required for security) and asynchronous interaction can effectively improve the user experience. Only when users feel comfortable using it and if users like to use what we make, will our work be meaningful. Our goal is to satisfy users.

Details determine success or failure. The various prompts on the page are all very small details. Don’t underestimate these small details. If they are done well, they can bring you more users; if they are not done well, they may bring you users. No longer use. Programmers pay attention to details to make users fall in love with the Web experience!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to receive josn data using josnp in ajax

##How to use an elegant solution for front-end ajax requests accomplish

The above is the detailed content of How to use Ajax to asynchronously check whether the user name is duplicated. For more information, please follow other related articles on the PHP Chinese website!