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 ();
}
}
}
}