Ajax — an example of asynchronously checking the existence of a user name

Time:2021-9-13

When registering a user on any website, it will check whether the user already exists. Long ago, the processing method was to submit all data to the server for verification. Obviously, the user experience of this method is very poor; Later, with Ajax and 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. In this way, if the user name already exists, you can give a prompt without waiting for the user to submit all the data. In this way, the user experience is greatly improved.
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, the URL of the request, and asynchronous submission
xmlHttp.open(“GET”,”CheckServlet?username=”+username,true);

//Copy the method address to the onreadystatechange property
//Similar to a phone number
xmlHttp.onreadystatechange = checkUsernameCallback();
//Send setup information to the Ajax engine
xmlHttp.send(null);
}
function checkUsernameCallback(){
//The Ajax engine status is success
if(xmlHttp.readyState == 4){
//The HTTP protocol status is success
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”>
User name: < input type = “text” name = “username” onblur = “checkusername (this. Value)” > < span > < / span > < br / >
Secret & nbsp& nbsp; Code: < input type = “password” name = “password” > < br / >
< input type = “submit” value = “register” >
< input type = “reset” value = “reset” >
</form>
</body>
</html>

CheckServlet.java

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