[홈페이지만들기1-2] JSP_회원가입 페이지_아이디 중복체크 기능(Ajax)

jngyoon·2023년 8월 30일
0

혼공일기

목록 보기
9/24

joinview.jsp

<body>
	<form name="joinForm" action="join_db.jsp" method="post">
		<fieldset>
			<legend>회원가입</legend>
			<span id="txt"></span>
			<p>
				<input name="userid" placeholder="아이디를 입력하세요">
				<input type="button" value="중복체크" onclick="checkId()">
			</p>
			<p>	
				<input name="userpw" type="password" placeholder="비밀번호를 입력하세요">
			</p>
			<p>
				<input name="username" placeholder="이름을 입력하세요">
			</p>
			<p>
				<input type="submit" value="회원가입">
			</p>
		</fieldset>
	</form>

</body>
<script>
  	//중복체크는 입력한 값과 DB에 저장되어 있는 값 비교
	function checkId(){
		const userid = document.joinForm.userid;
		const xhr = new XMLHttpRequest();	//XMLHttpRequest() : 웹 브라우저가 서버와 데이터를 교환할 때 사용
		
		xhr.onreadystatechange = function(){		//onreadystatechange : readystate가 change될 때 호출될 함수
			if(xhr.readyState == XMLHttpRequest.DONE){	//XMLHttpRequest.DONE = 4(통신완료상태)
				if(xhr.status == 200){		//xhr.status == 200 or 201: 성공상태	
					let txt = xhr.responseText;		//xhr.responseText : 성공해서 날아온 데이터
					txt = txt.trim();		//양 옆 공백 제거
					if(txt == "O"){
						//성공
						txtTag.innerHTML = "사용할 수 있는 아이디입니다!";
					}
					else{
						//실패
						txtTag.innerHTML = "중복된 아이디가 있습니다!";
					}
				}
			}
			//1. GET방식 : 데이터를 url에 포함해서 보내줌(쿼리스트림을 통해)
			/*
			xhr.open("GET","checkId_db.jsp?userid="+userid.value);	//연결 통로 open
			xhr.send();	//통신(Ajax 요청을 서버로 전달)
			*/
			
			//2. POST방식 : 쿼리스트림x, 보낼 주소만 작성/리퀘스트바디에 데이터를 포함해서 전송하는 방식
			xhr.open("POST", "checkId_db.jsp");
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");		//요청헤더
			xhr.send("userid="+userid.value);	//쿼리스트림
		}
		
		
		
		xhr.open("GET","checkId_db.jsp?userid="+userid.value);
		xhr.send();
	}
</script>

checkId_db.jsp

<%@ include file="DBConnection.jsp"%>
<%
	Connection conn = getConnection();		//db연결
	String userid = request.getParameter("userid");	//userid 데이터 추출
	
	//System.out.println(userid);	//콘솔 확인용
	String sql = "select * from t_user where userid=?";	
	PreparedStatement ps = conn.prepareStatement(sql);
	ps.setString(1, userid);
	
	ResultSet rs = ps.executeQuery();
	
    //중복된 userid가 있으면 실패 => X 출력 / 없으면 성공 => O 출력
	if(rs.next()){
		out.print("X");
	}
	else{
		out.print("O");
	}
%>

참고) Ajax 처리 과정

Ajax 요청시 xhr 객체는 각 상태별로(상황별로) readyState가 바뀐다.
처음에는 0(XMLHttpRequest.UNSET, 보내지 않음)
open 메소드를 호출하는 순간 1(XMLHttpRequest.OPENED)로 바뀜
send 호출시 순차적으로 	 2(XMLHttpRequest.HEADERS_RECEIVED),
						 3(XMLHttpRequest.LOADING), 
                    	 4(XMLHttpRequest.DONE)로 바뀐다. 
                         
최종적으로 readyState가 4가 된다면 (통신이 완료되었다면) 
상태코드(xhr.status)가 성공을 가리키는 200이나 201일 때 응답을 확인한다. 
응답된 데이터로 DOM을 활용하여 알맞게 페이지를 변화시켜준다.
profile
jngyoon
이전 포스트

[홈페이지만들기4] JSP_메인 페이지(main), 로그아웃 페이지

다음 포스트

[홈페이지만들기5] DAO, DTO 이용하여 join_db, login_db, checkId_db.jsp '처리'부분 분리

0개의 댓글