What is Ajax (Asynchronous Javascript And Xml) & 회원가입

1. Ajax (Asynchronous Javascript And Xml) 정의

일반적으로 HTTP 프로토콜은 클라이언트가 Request를 보내면 서버에서 데이터를 처리한후 Response를 보내고 연결을 끊는 방식으로 동작한다. 

결국은 response의 body에 이동하는 화면의 HTML 정보가 담겨져 있기 때문에 전체 화면을 로딩하게 된다.

회원가입 아이디 중복체크를 할 때, Ajax를 사용하지 않고 구현을 한다고 생각해보자. 그럼 아래와 같이 동작할 것이다.

 1. 사용자가 웹 브라우저에 아이디를 포함한 정보 입력하고 정보를 Request의 body에 넣고 서버에 요청을 한다.

 2. 서버가 DB에 접근해서 해당 아이디가 있는지 확인한다.

 3. Response 객체의 body에 화면의 HTML 정보와 아이디 중복유무, 사용자가 입력한 회원가입 정보를 보낸다.

 4. 웹 브라우저에서는 화면 전체를 불러와 사용자에게 보여준다.

결국은 단순히, 회원가입 유무를 확인하기 위한 Boolean 값 때문에 전체 화면 페이지를 불러오게 되어 자원낭비를 초래한다. 

이러한 문제를 해결할 수 있는 방법이 Ajax 이다. Ajax는 Asynchronous Javascript And Xml 약자이다. 

웹 브라우저가 가지고 있는 XMLHttpRequest 객체를 활용해서 전체 페이지를 로딩하는 것이 아닌, 페이지의 일부만 로딩하는 기법이다.

이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 자원의 효율성을 높일 수 있다. (최근에는 Json을 더 많이 활용한다. xml은 태그로 데이터를 관리하기 때문에 입력하는 것이 어렵다.) 또한, Ajax는 비동기적으로 동작한다. 그 뜻은, 웹 브라우저에서 서버로 요청을 보낼 때, 요청을 보낸 후에도 프로그램이 계속 동작한다는 것이다. 예를들자면, 서버가 회원가입 아이디를 중복체크를 하는 동안에도 사용자는 웹 브라우저에 계속 정보를 입력할 수 있다.

2. Ajax (Asynchronous Javascript And Xml) 장점/단점

 (1) Ajax 장점

  - 페이지를 전체 로딩하는 것이 아닌, 일부 페이지만 로딩하는 것이기 때문에 속도 측면에서 향상

  - 서버에서 처리하는 동안, 웹 브라우저 동작 (비동기)

 (2) 단점

  - 연속적으로 데이터를 요청하면 서버의 부하 증가

3. Ajax (Asynchronous Javascript And Xml)를 이용해서 회원가입 구현

이번에는 회원가입을 Ajax로 구현하려고 한다. 회원가입에서 Ajax로 처리하는 것은 두가지 기능이다.

 (1) 아이디 중복체크

           
$("#userId").focusout(duplicationCheck);

function duplicationCheck(e) {
     var queryString = $("form[name=join]").serialize();
     var url = '/api/users/duplicationCheck';

     $.ajax({
         type : 'post',
         url : url,
         data : queryString,
         dataType : 'json',
         error : function (xhr) {
             console.log("아이디 중복확인 Ajax 실패!");
         },
         success : function (data) {
             console.log(data);
             if(!data.valid) {
                 alert(data.errorMessage);
             }
             if(data.valid) {
                 $(".btn.btn-success.clearfix.pull-right").removeAttr('disabled');
             }
         }
     });
 }

 - 1라인은 userId라는 id값을 가지고 있는 text box의 포커스가 벗어났을 때, duplication function을 호출하라는 명령이다.

 - 4라인은 form 태그의 정보들을 직렬화한 것이다. 직렬화는 외부로 데이터를 전송할 수 있도록 Byte 형태로 데이터를 변환하는 기술을 의미한다. 

 - 7 ~ 24 라인은 post 방식으로 url에 queryString이라는 직렬화된 정보를 데이터를 전달하고 Json 타입으로 데이터를 전달받는 것이다. 

   그리고 성공할 때는 success에 정의된 함수를 호출한다. 

 (2) 회원가입 

   
$("form[name=join] > button[type=submit]").click(join);
function join(e) {
    e.preventDefault();
    console.log("회원가입");
    var queryString = $("form[name=join]").serialize();
    var url = '/api/users';

    $.ajax({
        type : 'post',
        url : url,
        data : queryString,
        dataType : 'json',
        error : function () {
            console.log("회원가입 실패!");
        },
        success : function (data) {
            console.log(data);
            if(!data.valid) {
                alert(data.errorMessage);
            }
            if(data.valid) {
                window.location.href = '/';
            }
        }
    });
}

  - 상세한 내용은 중복체크 메소드와 유사해서 설명은 생략하겠다. e.preventDefault() 메소드는 Button을 눌렀을 때 발생하는 이벤트를 실행시키지 않겠다는

    메소드이다. 해당 버튼이 submit 타입이기 때문에 e.preventDefault()를 사용하지 않으면 Ajax가 아닌 방법으로 동작하게 된다.  

  - 회원가입을 Ajax로 처리하지 않으면, 가입 내용을 잘못 입력했을 경우, 실패 메세지와 이전에 사용자가 입력했던 정보, 화면 정보를 전달해야만 한다.

    하지만, Ajax로 처리하면 화면 이동이 없기 때문에 화면을 새로 로딩할 필요없고, 사용자가 입력했던 내용도 보존되기 때문에 실패 메세지만 전달하면 된다.

    그리고 성공했을 경우, javascript의 redirect 기능을 통해 화면이동만 하면된다.