[AJAX] 002 AJAX异步验证

目标：完成新注册用户的异步验证功能。在用户输入完新的id后判断id是否以存在。

（1） 前台 首先编写一个注册页面register.htm

表单：提交表单给checkForm()验证
onblur="checkUserid(this.value)

<form action="regist.jsp" method="post" onsubmit="return checkForm()">
	用户ID：<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br>
	姓  名：<input type="text" name="name"><br>
	密  码：<input type="password" name="password"><br>
	<input type="submit" value="注册">
	<input type="reset" value="重置">
</form>

　　ajax操作和checkForm()

	<script type="javascript">	

		//① 设置变量
		var xmlHttp ;
		var flag = false ;
		
		//② 创建XMLHttp对象
		function createXMLHttp(){
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest() ;
			} else {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
			}
		}
		
		    //③ 用户ID的验证函数  传递的参数是userid 也就是用户输入的注册id
			function checkUserid(userid){
			
			//创建XMLHttpRequest对象
			createXMLHttp() ;
			
			//创建一个HTTP请求，以post方式将userid交给checkservlet去验证
			xmlHttp.open("POST","CheckServlet?userid="+userid) ;
			
			//调用回调函数 生成可视化的页面响应
			xmlHttp.onreadystatechange = checkUseridCallback ;
			
			发送请求
			xmlHttp.send(null) ;
			
			//友好提示
			document.getElementById("msg").innerHTML = "正在验证..." ;
		}
		
		//④ 回调函数
		function checkUseridCallback(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					var text = xmlHttp.responseText ;
					if(text == "true"){	// 用户id已经存在了
						document.getElementById("msg").innerHTML = "用户ID重复，无法使用！" ;
						flag = false ;
					} else {
						document.getElementById("msg").innerHTML = "此用户ID可以注册！" ;
						flag = true ;
					}
				}
			}
		}
		
		//⑤ 表单验证函数  若返回flag=true  则提交表单 为false则不提交
		//如果用户的ID已存在了  那么通过这个check判断表单是否可以提交
		function checkForm(){
			return flag ;
		}
	</script>

（2）后台 checkservlet.java 执行真正的数据库验证操作

//接受传递的参数
String userid = request.getParameter("userid") ;		

//定义sql语句
String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ;
pstmt = conn.prepareStatement(sql) ;
pstmt.setString(1,userid) ;
rs = pstmt.executeQuery() ;

if(rs.next()){
	if(rs.getInt(1)>0){	// 用户ID已经存在了
		out.print("true") ;
	} else {
		out.print("false") ;
	}
}