Ajax -- Example of Asynchronous User Name check

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 greatly improves the user experience.
Regist. jsp Copy codeThe Code is as follows: <% @ page language = "java" contentType = "text/html; charset = UTF-8"
PageEncoding = "UTF-8" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
<Script type = "text/javascript">
Var xmlHttp;
// Create the Ajax core object XMLHttpRequest
Function createXMLHttp (){
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest ();
} Else {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}
Function checkUsername (username ){
CreateXMLHttp ();

// Set the request method to get, set the request URL to asynchronous submission
XmlHttp. open ("GET", "CheckServlet? Username = "+ username, true );

// Copy the method address to the onreadystatechange attribute
// Similar to a phone number
XmlHttp. onreadystatechange = checkUsernameCallback ();
// Send the setting information to the Ajax Engine
XmlHttp. send (null );
}
Function checkUsernameCallback (){
// The Ajax engine status is successful.
If (xmlHttp. readyState = 4 ){
// The HTTP protocol status is successful.
If (xmlHttp. status = 200 ){
Var text = xmlHttp. responseText;
If (text = "true "){
Document. getElementById ("msg"). innerHTML = "this user name already exists and cannot be used! ";
} Else {
Document. getElementById ("msg"). innerHTML = "this user name can be used ";
}
}
}
}
</Script>
</Head>
<Body>
<Form action = "regist. jsp" method = "post">
Username: <input type = "text" name = "username" onblur = "checkUsername (this. value) "> <span id =" msg "> </span> <br/>
Password: <input type = "password" name = "password"> <br/>
<Input type = "submit" value = "register">
<Input type = "reset" value = "reset">
</Form>
</Body>
</Html>

CheckServlet. javaCopy codeThe Code is as follows: public class CheckServlet extends HttpServlet {
Private static final long serialVersionUID = 1L;
Public static final String DBDRIVER = "com. microsoft. sqlserver. jdbc. SQLServerDriver ";
Public static final String DBURL = "jdbc: sqlserver: // localhost: 1433; DatabaseName = bbs ";
Public static final String DBUSER = "sa ";
Public static final String DBPASS = "pass ";

Public CheckServlet (){
Super ();
}
Protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
This. doPost (request, response );
}
Protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Request. setCharacterEncoding ("UTF-8 ");
Response. setContentType ("text/html ");
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
PrintWriter out = response. getWriter ();
String username = request. getParameter ("usernaem ");
Try {
Class. forName (DBDRIVER );
Conn = DriverManager. getConnection (DBURL, DBUSER, DBPASS );
String SQL = "select count (username) from user where username =? ";
Pst = conn. prepareStatement (SQL );
Pst. setString (1, username );
Rs = pst.exe cuteQuery ();
If (rs. next ()){
If (rs. getInt (1)> 0) {// the user name already exists
Out. print ("true ");
} Else {
Out. print ("false ");
}

}
} Catch (Exception e ){
E. printStackTrace ();
} Finally {
Try {
Conn. close ();
} Catch (Exception e ){
E. printStackTrace ();
}
}
}
}

Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.