Ajax asynchronously checks whether the user name exists (with demo download)

Source: Internet
Author: User

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 xmlhttprequestcreatexmlhttprequest (); 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.

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

Download demo

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.