OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

Ajax——异步检查用户名是否存在示例

2022-2-5 16:59| 发布者: 菜鸟教程小白| 查看: 243| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 在任何网站注册用户的时候，都会检查用户是否已经存在，有了Ajax，有了异步交互，当用户输完用户名继续填写其他信息的时候，Ajax就将信息发到了服务器去检查该用户名是否已经被注册了 ...

在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了Ajax，有了异步交互，当用户输完用户名继续填写其他信息的时候，Ajax就将信息发到了服务器去检查该用户名是否已经被注册了，这样如果用户名已经存在，不用等用户将所有数据都提交就可以给出提示。采用这种方式大大改善了用户体验。
regist.jsp

复制代码代码如下:

 
<%@ 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; 
//创建Ajax核心对象XMLHttpRequest 
function createXMLHttp(){ 
if(window.XMLHttpRequest){ 
xmlHttp = new XMLHttpRequest(); 
}else{ 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
function checkUsername(username){ 
createXMLHttp(); 

//设置请求方式为GET，设置请求的URL，设置为异步提交 
xmlHttp.open("GET","CheckServlet?username="+username,true); 

//将方法地址复制给onreadystatechange属性 
//类似于电话号码 
xmlHttp.onreadystatechange = checkUsernameCallback(); 
//将设置信息发送到Ajax引擎 
xmlHttp.send(null); 
} 
function checkUsernameCallback(){ 
//Ajax引擎状态为成功 
if(xmlHttp.readyState == 4){ 
//HTTP协议状态为成功 
if(xmlHttp.status == 200){ 
var text = xmlHttp.responseText; 
if(text == "true"){ 
document.getElementById("msg").innerHTML = "此用户名已存在，无法使用！"; 
}else{ 
document.getElementById("msg").innerHTML = "此用户名可以使用"; 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<form action="regist.jsp" method="post"> 
用户名:<input type="text" name="username" onblur="checkUsername(this.value)"><span id="msg"></span><br/> 
密&nbsp;&nbsp;码:<input type="password" name="password"><br/> 
<input type="submit" value="注册"> 
<input type="reset" value="重置"> 
</form> 
</body> 
</html> 

CheckServlet.java

复制代码代码如下:

 
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){//用户名已经存在了 
out.print("true"); 
}else{ 
out.print("false"); 
} 

} 
}catch(Exception e){ 
e.printStackTrace(); 
}finally{ 
try{ 
conn.close(); 
}catch(Exception e){ 
e.printStackTrace(); 
} 
} 
} 
} 