[Spring] AJAX 비동기 통신 - 아이디 중복 체크 기능 구현 (2023.06.01)

🎈 AJAX (Asynchronous JavaScript and XML)

클라이언트와 서버간 비동기적 정보 교환이 가능한 통신 기능 

** 화면 전환 없이

 

• 자바스크립트의 라이브러리 중 하나
• 데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법
• 화면 갱신이 없어서 사용자 입장에서 매우 편리하고 빠르게 작업을 처리하는 것처럼 느껴지게 함
• 하지만, 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해짐

 

📖 Ajax 장점

• 페이지의 갱신 없이 서버와 비동기 통신을 가능하게 해줌
• 화면이 새로 로딩되는 것이 아니므로 속도면에서 성능 개선 (웹페이지 속도 향상)
• 별도의 플러그인이 필요하지 않음
• Http 전송 중에도 클라이언트가 웹 어플리케이션과 상호작용 할 수 있음

 

💻 Ajax 활용하여 아이디 중복 체크 기능 구현하기 - spring  / jquery 

 

1. index.jsp - html 부분

email 중복체크 input 태그에 onClick 이벤트 지정

 

<li><h5>회원가입</h5></li>
	<form action="member/join" method="post">
		<li><input type="text" name="email" placeholder="Email을 입력하세요" id="input" ></li>
		<li><input type="button" value="email 중복체크" onClick="checkEmail()"></li>
		<li><span id="result"></span></li>
		<li><input type="password" name="pw" placeholder="PW를 입력하세요" ></li>
		<li><input type="text" name="tel" placeholder="전화번호를 입력하세요" ></li>
		<li><input type="text" name="address" placeholder="집주소를 입력하세요" ></li>
		<li><input type="submit" value="JoinUs" class="button fit"></li>
	</form>

2. index.jsp - script 부분

email 인풋 태그에서 지정한 아이디 (input) 변수로 저장

ajax로 memberController의 emailCheck로 요청 > 반환값(res) 받아서 id가 result인 <span>에 값 넣기

 

<script>
	function checkEmail(){
	//이메일 가져오기
	//자바스크립트라면 document.getElementById("email").value
	//innerHtml : 태그 사이의 html 요소 포함하며 가져오기 >>> 제이쿼리에서는 html()
	//html() >> 값 가져오기 / html("<h1>s</h1>") >> 값 추가하기
	//innerText : 태그 사이의 text만 가져오기 >>> 제이쿼리에서는 text()
	//value : input 태그에 작성된 값(사용자가 입력한(선택한) 값) 가져오기 >>> 제이쿼리에서는 val()
		let input = $("#input").val()
		console.log(input)
					
	//비동기통신 : json {"key" : "value"} 키값으로 구별, xml<> 태그로 구별 >> 자주 쓰는 형식
		$.ajax({
		//요청경로
			url : "member/emailcheck",
		//http 요청 메서드 (get방식이 기본으로 생략 가능)
			type : "get", 
			data : {'input' : input },
			success : function(res){
		//res : 서버 응답값
			console.log(res)
			if(res=="success"){
				$("#result").text('사용할 수 있는 이메일') 
			}else{//fail
				$("#result").text('사용할 수 없는 이메일') 
			}
		},
		error : function(){
			alert("통신실패")
		}
	})
}
</script>

 

3. MemberController - emailCheck

클라이언트가 전송한 input값(이메일) 파라미터로 받음

응답할 때는 뷰를 반환하지 않고 문자열을 반환

	//뷰를 반환하지 않고 data(model)을 반환하는 메서드로 변경해야 함
	//@Controller >> view를 반환하는 메서드
	//@Controller + @ResponseBody 사용 >> model을 반환하는 메서드
	@RequestMapping(value="/member/emailcheck")
	public @ResponseBody String emailCheck(@RequestParam("input") String email) {
		System.out.println(email);
		
		int result = mapper.emailCheck(email);
		
		System.out.println(result);
		
		if(result>0) { //값이 이미 존재 >> 사용불가능한 이메일
			System.out.println("ss");
			return "fail"; //일반문자열
		}else { //값이 없음 >> 사용가능한 이메일
			System.out.println("qq");
			return "success";
		}
	}

 

4. MemberMapper 

annotaion 방식 활용하여 mybatis 사용

sql문 작성시 조회하는 정보는 count(*) - int형

>> 만약 같은 아이디가 데이터베이스에 있다면 숫자 1을 없다면 0을 반환할 것

 

	//이메일 중복 체크
	@Select("select count(*) email from webmember where email=#{email}")
	public int emailCheck(String email);