(5)블로그만들기 Ajax 통신 - UserName 중복체크, 회원가입(join)

Ajax

• Ajax는 JavaScript로 비동기 통신을 하며, Json데이터를 주고 받을 수 있다. 
• HTML의 부분적인 Reload가 가능하고, 비동기적 통신이 가능 하다. 
• 지금 까지는 Form 태그를 사용해 임시로 데이터들을 통신을 했었다.

PUT은 값을 전송을 하지 않고 클라이언트의 요청을 그대로 받기 때문에 Form을 사용할 수 없다.

DELETE는 URI에 해당하는 리소스를 제거 하는 요청이기에 Form을 사용 할 필요가 없다.

메서드	FORM태그 전송	AJAX (JS)
GET	가능 주소창,하이퍼링크로도 가능	가능
POST	가능	가능
PUT	불가능	가능
DELETE	불가능	가능

가끔 찾다 보면 POST에 Form을 쓰는 사람, Ajax를 쓰는사람이 있는데 모두 사용이 가능하다 

---

Ajax를 통해 UserName중복,회원가입 만들어보기

UserName중복 만들기

1. 데이터들을 Form으로 감싸고 id값을 준다.
2. Ajax 작성(Script)
3. Controller 수정

1. 데이터들을 Form으로 감싸고 id값을 준다.

2. Ajax 작성(Script)

Ajax 기본 문법 : .ajax로 통신을 하고 .done로 통신 끝난 후 함수를 실행한다

Body에 데이터가 있다면 통신 오브젝트를 작성해준다 .

$.ajax("경로",{
			type:"GET",
			dataType: "json", 
			async:true 
		}).done((res)=>{}

Ajax 작성

<script>
let isUsernameSameCheck = false;
//유저네임 중복체크 
	$("#btnUserNameSameCheck").click(()=>{
    	// Get 요청이므로 Body에 데이터가 없다 -> 통신 오브젝트 만들필요 X
		let username = $("#username").val(); // 사용자 입력한 값

		//2. Ajax 통신 
		$.ajax("users/usernameSameCheck?username="+username,{// ``백틱을 사용은 하면 EL표현식으로 인식 하기 때문에 백틱 X
			type:"GET",
			dataType: "json", 
			async:true 
		}).done((res)=>{// 함수는 람다식 사용
			console.log(res);
			if(res.code == 1){
				if(res.data == false){
					alert("아이디 중복 되지 않았습니다.");
					isUsernameSameCheck = true;// 중복 체크 완료  
				}
				else{
					alert("아이디가 중복 되었습니다. 다른 아이디 사용해주세요")
					isUsernameSameCheck = false;
					 $("#username").val("");//set으로 현재 view에적혀진 id를 비워줌
				}
			}
			
		}); // ajax함수로 통신 시작 done()은 응답
		
	});
    </script>

3. Controller 수정

먼저 통신을 위한 클래스 작성

Controller 

@Controller 어노테이션 때문에 Return이 파일(.jsp)이었다. 

하지만 Ajax는 데이터를 주고 받기 때문에 Return 타입을 임의로 만든 오브젝트로 준다.

확인

Console로 확인

DB에는 원래 ssar이 존재 -> 중복 되었다고 나옴.

회원가입 만들기

• 순서는 위와 동일하게 진행한다.

1. 데이터들을 Form으로 감싸고 id값을 준다.

2. Ajax 작성(Script)

<script>
	let isUsernameSameCheck = false;
	//회원가입
	$("#btnJoin").click(()=>{
		if(isUsernameSameCheck == false){
			alert("유저네임 중복 체크를 진행 해주세요");
			return;
		}
		//0. 통신 오브젝트 생성
		let data ={
				username : $("#username").val(),
				password : $("#password").val(),
				email : $("#email").val()
		};
		$.ajax("/join",{
			type: "POST",
			dataType: "JSON",
			data: JSON.stringify(data),// 데이터 전송할 때 JSON데이터로 전송
			headers: { // Body 데이터를 전송 하기 위해선 contentType이 필요
				"Content-Type" : "application/json"//MIME타입
			}
		}).done((res)=>{
			if(res.code ==1){// 회원가입 성공 하면 main 페이지로 이동 
				location.href = "/";
			}
		});
	});
</script>

3. Controller 작성

JoinDto이 클라이언트의 요청, 즉 전달되는 Body에 담겨 전달되는 데이터이다. @ResquestBody를 붙여준다.

확인