Ajax asynchronously checks whether the user name exists and ajax asynchronously checks the user name

Ajax asynchronously checks whether the user name exists and ajax asynchronously checks the user name

When registering a user on any website, the system checks whether the user already exists. A long time ago, the processing method was to submit all the data to the server for verification. Obviously, this method had a poor user experience. Later, with Ajax, Asynchronous interaction, when the user enters the user name and continues to fill in other information, Ajax sends the information to the server to check whether the user name has been registered. If the user name already exists, you don't have to wait for the user to submit all the data to give a prompt. This method has greatly improved the user experience. Today, let's talk about this interaction method.

The following code uses JS to obtain the user ID and send it to the user_validate.jsp page. Then, the callback method is used to receive the message returned from the page and notify the user.

Function validate (field) {if (trim (field. value). length! = 0) {// create the Ajax core object XMLHttpRequest createXMLHttpRequest (); var url = "user_validate.jsp? UserId = "+ trim (field. value) + "& time =" + new Date (). getTime (); // set the request method to get, set the request URL, and set it to submit xmlHttp asynchronously. open ("GET", url, true); // copy the method address to the onreadystatechange property // similar to the phone number xmlHttp. onreadystatechange = callback; // sends the setting information to the Ajax engine xmlHttp. send (null);} else {document. getElementById ("spanUserId "). innerHTML = "" ;}} function callback () {// alert (xmlHttp. readyState); // if (xmlHttp. readyState = 4) {// The HTTP protocol status is successful if (xmlHttp. status = 200) {if (trim (xmlHttp. responseText )! = "") {// Alert (xmlHttp. responseText); document. getElementById ("spanUserId "). innerHTML = "<font color = 'red'>" + xmlHttp. responseText + "</font>";} else {document. getElementById ("spanUserId "). innerHTML = "" ;}} else {alert ("request failed, error code =" + xmlHttp. status );}}}

The user_validate.jsp page receives the user Id and queries whether the user Id already exists. If yes, nothing is returned.

<% String userId = request. getParameter ("userId"); if (UserManager. getInstance (). findUserById (userId )! = Null) {out. println ("User code already exists") ;}%>

The check method is triggered when the cursor leaves the user code text box.
Copy codeThe Code is as follows: <input name = "userId" type = "text" id = "userId" size = "10" maxlength = "10" value = "<% = userId %>" onblur =" validate (this) ">

I will not post any code that can be queried based on the user ID, because it is too simple to post it to avoid wasting your bandwidth.

Web development requires more consideration of user experience, and more use of client verification (of course, a server verification is required for security) and Asynchronous interaction can effectively improve user experience. Our work is meaningful only when users are comfortable and users like what we do. Our goal is to satisfy users.

The Details determine the success or failure. The prompts on the page are very small details. Don't underestimate these small details. If you do a good job, you can bring more users. If you do not do well, you may not use them any more. Programmers carefully make the details to make users fall in love with the Web experience!