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") ;

	}

}