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. 자바 에서 실제 데이터베이스 검증 작업 을 수행 합 니 다.

//       

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

	}

}