Ajax에 관하여

예전 프로젝트를 했었을 때도 그렇고 지금 하고있는 웹 어플리케이션에서도 마찬가지로 Ajax를 쓰고있다. 

그저 편하게 남들 소스를 가져와서 수정만 했을뿐이지 어떻게 돌아가는지 찾아보거나 하지는 않았다.

그래서 글을 남긴다.

일반적으로 form submit()을 통해 서버에 요청을 보내면 결과값으로 HTML이 브라우져로 전달되면서 화면이 전체적으로 다시 그려지게 된다. 하지만 수행하고자 하는 작업에 따라서 원하는 영역에만 결과값을 보여주고 싶거나, 서버에서 응답이 오기전에 다른 작업을 수행해야 할 수도 있다. 그래서 사용하는 것이 Ajax이다.

[위키에서 가져온 Ajax를 사용했을 때와 아닐때의 비교]

왼쪽과 같이 Ajax를 사용하지 않을경우 화면에 표시할 HTML과 각종 CSS데이터를 모두 서버에서 받아오지만, Ajax를 사용하면 원하는 결과값만 XML 또는 JSON과 같은 형태로 받아올 수 있다.

이를 가능해게 해주는 핵심 구성요소가 바로 XMLHttpRequest(xhr)이다. Ajax는 이놈의 객체를 이용해서 서버와 비동기로 통신을 할 수 있다. 익스플로러 5버전에서는 ActiveXObject 라는 객체를 이용해서 비동기식 통신을 구현했다고는 하나, 요즘 나오는 익스플로러 버전이나 파이어폭스, 크롬 등 대부분의 브라우저에서는 XHR을 사용한다고 하니 무시해도 될 것 같다.

브라우저 콘솔에서 쉽게 var object1 = new XMLHttpRequest(); 로 객체를 생성할 수 있다. 이 객체에 내장된 open(), send() 메서드를 사용하여 서버와 비동기식 통신을 하고, readyState 프로퍼티, status 프로퍼티 등을 이용해 통신상태 체크 등을 할 수 있다고는 하나 대부분의 경우는 제이쿼리(jQuery)를 사용해 구현한다.

jQuery에서는 친절하게 $.ajax() 메서드를 제공하여 서버와 비동기식 통신을 할 수 있도록 해준다. ($.get()이나 $.post() 메서드도 있다.)

$('#submit_button').click(function(e){
    var params = $("#form01").serialize();
    var url = "test01";
    $.ajax({
        url: url,
        type: 'POST',
        data: params,
        dataType: 'html',
        success: function (result) {
            if (result){
                // 데이타 성공일때 이벤트 작성
            }
        },
        error : function(result){
            
        }
    });
    e.preventDefault();
});

위와같이 $.ajax([key:value 옵션]) 을 이용해 서버로 통신요청을 하며 콜백함수도 지정해 성공이나 실패시 원하는 작업을 수행할 수도 있다. 다양한 옵션을 줄 수 있으니 원하는 작업이 있을때는 구글링을 해보자.

웹 서버에서는 이에대한 응답을 XML 또는 JSON 형태로 보내주는데, 대부분의 경우에는 JSON이 XML보다 낫다고 한다. (JSON이 XML보다 파싱하기에 좀더 빠르고 쉽다.)

끝.