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

招风的黑耳

已于 2024-07-23 09:05:58 修改

阅读量705

点赞数

分类专栏：前端文章标签： ajax okhttp 前端

于 2013-06-19 18:09:02 首次发布

本文链接：https://blog.csdn.net/u010709330/article/details/9131087

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了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/>
	密  码:<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

招风的黑耳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax——异步检查用户名是否存在

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

扫一扫