스프링에서 AJAX 사용하기(+JSON)

순서 :

1) RESTful 사용 선언(@RestController or @ResponseBody)

2) 자바스크립트로 AJAX function (checkId) 구현

3) 콜백 함수 구현

1) RESTful 사용 선언

RESTful 통신은 자원(JSON) 중심으로 통신 가능케 해준다.

동작시키기 위해서는 다음과 같은 2가지 방법을 쓴다.

ㄱ) @Controller를 @RestController로 바꾸거나,

ㄴ) AJAX 사용할 메소드에 @ResponseBody 붙임

<LoginController.java>

@ResponseBody

          @RequestMapping("checkId/{id}") //checkId?id=obama

          public CheckIdVo checkId(@PathVariable("id") String id){

                    //jackson lib를 추가했기 때문에 vo 반환시 자동으로 vo를 json으로 바꿔줌.

                    CheckIdVo checkIdVo = new CheckIdVo();

                    checkIdVo.setId(id);                                          //id:obama

                    checkIdVo.setCheckId(dao.selectId(id)); //checkId:true

                    return checkIdVo;

          }

<http://localhost:6445/l11_comments/checkId/obama>

페이지가 제대로 출력되게 하려면 AJAX 통신을 사용해서

페이지 내부(SignupForm.jsp)에서 받아야 한다.

2) 자바스크립트로 AJAX function (checkId) 구현

<SignupForm.jsp>

//id 중복 검사(AJAX 실행)
        function checkId(userId){
            if(userId){
                var http = new XMLHttpRequest();
                var url = "checkId/"+userId;
                http.onreadystatechange = function(){
                    if(this.readyState==4 && this.status==200){
                        //DOM 조작하는 메소드
                        readyIdCheck(JSON.parse(this.responseText));
                    }
                }
                http.open("GET",url,true);
                http.send();
                
            }else{
                document.getElementById("checkId").innerHTML = "id를 입력하세요";
                document.getElementById("checkId").style.color = "red";
            }
        }

위는 주로 AJAX 통신 담당하며

콜백 함수에서 실질적인 기능 담당

3) 콜백 함수 구현

AJAX 통신으로 받아온 JSON 파일을 이용해

다음과 같이 출력해준다.

//id 중복 검사(콜백 함수)
        var readyIdCheck = function(checkIdJson){
            var msg;
            var checkIdFlagValue = "0";
            if(checkIdJson['checkId']){
                msg = '사용중인 아이디입니다.';
                checkIdLabel.style.color = "red";
            }else{
                msg = '사용 가능한 아이디입니다.';
                checkIdFlagValue = "1";
                checkIdLabel.style.color = "blue";
            }
            checkIdLabel.innerHTML = msg;
            checkIdFlag.value = checkIdFlagValue;
        }

<input onblur="checkId(this.form.id.value)">를 통해

AJAX와 콜백 함수가 실행된다.

onblur 외에도 다양한 이벤트가 있다.

4) 나머지 정리

ㄱ. 태그 변수 정리

ㄴ. 패스워드 재입력 일치 검사

ㄷ. 이름 공란 검사

ㄹ. form 제출 검사

ㄱ. 태그 변수 정리

코드 줄수를 줄이기 위해 자주 사용되는 element는 변수로 정리해두었다.

//태그 변수 정리
        var checkIdLabel = document.getElementById("checkId");
        var checkIdFlag = document.getElementById("checkIdFlag");
        var uNameDom = document.getElementById("uName");
        var uPwd = document.getElementById("uPwd");
        var pwdCheck = document.getElementById("pwdCheck");
        var pwdCheckLabel = document.getElementById("pwdCheckLabel");

ㄴ. 패스워드 일치 검사

//패스워드 재입력 검사
        pwdCheck.addEventListener("change",function(){
            var msg = "비밀번호를 다시 확인하세요.";
            var checkPwdFlagValue = "0";
            var labelColor = "red";
            if(this.value == this.form.uPwd.value){
                msg = "사용할 수 있는 비밀번호입니다.";
                labelColor = "green";
                checkPwdFlagValue = "1";
            }
            pwdCheckLabel.innerHTML = msg;
            pwdCheckLabel.style.color = labelColor;
            uPwd.style.borderColor = labelColor;
            pwdCheck.style.borderColor = labelColor;
            this.form.checkPwdFlag.value = checkPwdFlagValue;
        });

ㄷ. 이름 공란 검사

//이름 공란 검사
        uNameDom.onblur = function(){
            if(!this.value){
                uNameDom.style.borderColor = "red";
                document.getElementById("checkName").innerHTML = "X";
                this.form.checkNameFlag.value = "0";
            }else{
                uNameDom.style.borderColor = "green";
                document.getElementById("checkName").innerHTML = "O";
                this.form.checkNameFlag.value = "1";
            }
        }

ㄹ. form 제출 검사(idFlag, pwdFlag, nameFlag가 모두 1인지)

<input type="hidden" name="checkIdFlag" id="checkIdFlag" value="0">
<input type="hidden" name="checkPwdFlag" id="checkPwdFlag" value="0">
<input type="hidden" name="checkNameFlag" id="checkNameFlag" value="0">

//form제출 검사
        var signupForm = function (form){
            if(form.checkIdFlag.value == "0"){
                alert("아이디 중복체크하세요.");
            }else if(form.checkPwdFlag.value == "0"){
                alert("패스워드 체크하세요")
            }else if(form.checkNameFlag.value == "0"){
                alert("이름은 꼭 입력하세요.")
            }else{
                form.submit();
            }
        }