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

来源：互联网发布：mac zip 临时文件编辑：程序博客网时间：2024/06/04 20:02

在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了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核心对象XMLHttpRequestfunction 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/>密  码:<input type="password" name="password"><br/><input type="submit" value="注册"><input type="reset" value="重置"></form></body></html>

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

CheckServlet.java