Ajax를 품은 jQuery

개발자의 길을 선택하면서 Web Page를 드나들 때 남들과는 다른 시선으로 화면을 살펴보는 습관이 생겼습니다. 화면의 내용보다는 신기한 기능을 발견하면 어떻게 동작하는지 예측해보고, 때로는 Source도 열어보기도 하면서 구동하는 원리를 살펴보는 경우가 많아졌습니다. 심지어 화면의 이동 시 화면이 깜빡일 때 Server에서 Data를 조회해서 다시 화면으로 출력하는 일련의 과정들을 머릿속으로 예측하면서 지켜보는 경우도 종종 있었습니다. 또한 예전에는 무심코 지나쳤지만 개발자의 관점으로 조금씩 변화하면서 화면에서 화면 깜빡임이 상당히 불편하고 답답한 느낌을 많이 받았습니다.

이를 해결할 수 있는 방법중에 하나가 바로 Ajax기술입니다. 실제로 오늘날 Ajax기술을 사용해서 동작하고 있는 화면들이 무수히 많습니다. 이번 프로젝트에서도 화면을 구현할 때 Ajax를 많이 사용했는데, 주로 jQuery를 통해 구현했습니다. 이를 계기로 해서 이번에는 jQuery를 이용해서 Ajax를 구현하는 방법과 실제로 Ajax를 사용하면서 경험한 내용에 대해서 소개하겠습니다.

Ajax 소개

Ajax는 'Asynchronous JavaScript and XML'의 약자입니다. Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법입니다. Ajax의 동작원리는 Browser에서 서버로 보낼 Data를 Ajax Engine을 통해 Server로 전송합니다. 이 때 Ajax Engine에서는 JavaScript를 통해 DOM을 사용하여 XMLHttpRequest(XHR) 객체로 Data를 전달합니다. 이 XHR을 이용해서 Server에서 비동기 방식으로 자료를 조회해 올 수 있습니다. Server에서 Data를 전달 할 때 화면전체의 HTML을 전달하지 않고 Text 또는 Xml형식으로 Browser에 전달합니다.

왜 Ajax인가?

물론 Ajax는 Browser의 Version이 낮거나 Ajax를 지원하지 않는 Browser에서는 Ajax통신을 할 수 없으며 화면의 이동 없이 Data를 송수신하기 때문에 보안상에도 치명적인 문제를 일으킬 수 있습니다. 또한 Script기반이기 때문에 개발할 때 Debugging이 불편해서 어려움이 발생 할 수 있는 문제점이 존재합니다. 하지만 이러한 단점에도 불구하고 Ajax를 사용하면서 얻는 이득과 편리함이 훨씬 많기 때문에 많이 사용합니다. Ajax를 사용하지 않은 Web Page에서는 앞에서 언급한 바와 같이 Server로 Data를 전송할 때마다 화면전체를 Refresh하는 방법을 사용합니다. 이런 이유로 사용자가 화면내에서 어떠한 작업을 진행하고 있는 경우에도 초기화 될 뿐만 아니라 화면전체 조회에 의해 Server에 부담을 주며 속도까지 느려지는 현상이 나타납니다. 만약, Ajax를 사용해서 Server와 Data를 주고받게 되면 Server에 보낼 필요한 핵심 Data만 전송하기 때문에 화면 깜빡임도 없으며, Server에 부담이 덜하고 속도문제도 해결할 수 있습니다. 두 번째 이유는 화면마다 특유의 기능을 동작하기 위해 설치하는 Active X가 있습니다. 이 Active X의 설치 없이는 해당 화면을 조회할 때 제약이 따르기도 하고, 화면마다 대부분 상이하기 때문에 여러 화면을 조회하다 보면 다수의 Active X를 설치하는 경우도 발생합니다. 이 때 Ajax를 사용하면 화면전체를 조회하지 않기 때문에 이러한 Active X를 설치하지 않고도 원하는 Data를 조회를 할 수 있습니다.

Ajax 사용방법

Ajax의 기본 Method를 이용해서 Server와 통신을 하면 상당히 복잡합니다. 이는 XMLHttpRequest를 직접 사용하기 때문인데, jQuery를 이용하면 100줄 정도의 Source를 몇 줄 만으로 간단하게 Server와 Data를 주고받을 수 있습니다. 사용방법은 JavaScript에서 jQuery 문법을 사용해서 다음과 같이 간단하게 구현할 수 있습니다.

// jQuery를 이용한 Ajax 기본 사용방법입니다.
$.ajax({
    // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
    url : '요청 URL 주소를 입력합니다.'
    // 다양한 속성들 중에서 필요한 Option을 선택해서 구현합니다.('[]'는 반복해서 사용할 수 있다는 의미입니다.)
    [, Options]
});

그렇다면 Server와 Ajax 통신시에 필요한 대표적인 Property에 대해 알아보도록 하겠습니다. Property들은 필요에 따라 다수를 선택할 수도 있습니다.

Ajax를 실제로 사용하며

다양한 화면을 구성하다 보면, 한 화면에 두 가지의 내용들이 독립적으로 표현하는 경우가 있었습니다. 그 중에서도 회원가입 화면에서 기본키로 사용하는 값(회원ID, E-mail, Phone Number 등등) 을 입력하는 경우 중복Check를 통해 사용자에게 사용가능 여부를 입력 시 실시간으로 표현합니다. 이 때, Ajax를 이용하지 않고 중복 Check시 화면전체를 불러오면 Page를 Reload해서 정보를 다시 작성해야 합니다. 따라서 Ajax를 이용해서 중복Check를 했습니다. Check 대상 값을 Ajax를 통해 Server로 넘기면 화면에 결과를 표시해주는 부분을 독립적으로 표현할 수 있게됩니다. 실제 프로젝트에서는 중복Check 결과를 Alert Message로 알리도록 jQuery를 이용해서 구현했고 주로 사용한 Property들은 Type, Url, Data, Success 정도 입니다. 이것은 초급 개발자의 입장에서도 무난하게 구현 할 수 있을 정도로 간단합니다.

//사용자가 입력한 값과 DB에 저장된 값을 비교해서 중복하는지 Check합니다.
function idDuplicationCheck (id) {
    // Ajax 통신으로 서버에 Data를 전송하고 Return 받습니다.
    $.ajax({
        // type을 설정합니다.
        type : 'GET',
        url : "서버로 보낼 주소를 입력"
        // 사용자가 입력하여 id로 넘어온 값을 서버로 보냅니다.
        data : {"id" : id},
        // 성공적으로 값을 서버로 보냈을 경우 처리하는 코드입니다.
        success : function (data) {
            // 서버에서 Return된 값으로 중복 여부를 사용자에게 알려줍니다.
            if (data) {
                alert("사용할 수 없는 아이디 입니다."); 
            } else {
                alert("사용 가능한 아이디 입니다.");
            }             
        }

        ...  

    });
}

DB에 사용자 Table의 목록 중에서 존재하는 ID를 사용하여 중복여부를 Ajax로 구동하는 모습을 살펴보겠습니다. 우선 Table에 존재하는 GUEST라는 ID를 확인합니다.

실제 사용자 등록 화면에서 DB에 존재하는 GUEST를 입력하고 중복Check를 하면, 화면의 이동 없이 처리결과를 확인할 수 있습니다.

또 다른 화면에서는 한 화면에 두 종류의 List를 보여주되, List끼리 서로 독립되어 한쪽 List에서 Check 하면 화면갱신 없이 그대로 DB에 저장되도록 구현하는 경우가 있었습니다. 이때에도 Check시 Ajax 통신을 이용하여 적용할 대상의 정보를 Server에 넘긴 후 DB에서 해당정보의 내용을 변경하는 방법을 사용했습니다. 사용자가 해당 목록을 Check하면, Check한 정보를 실제 DB에 적용시키기 위해 Ajax를 통해 해당 정보를 Server로 보내서 DB에 적용합니다. Check여부에 대한 정보를 다시 화면으로 넘겨서 조건문을 통해 화면에 출력할 Image를 선택합니다. 결국 사용자는 자신이 Check하거나 해제를 할 때마다 이미지가 즉시 변환하는 것처럼 보입니다.

// 사용자가 Check한 내용이 화면 Refresh 없이 DB에 적용하고 
// 화면에 갱신하는 Function
function userList (index) {
    $.ajax({
        url : "서버로 보낼 주소를 입력합니다."
        // 서버로 값을 성공적으로 넘기면 처리하는 코드부분 입니다.
        success : function (data) {
            // 변경된 태그 부분을 넘어온 index 값으로 찾은 뒤 on/off를 변경합니다.
            if ($("#notifyCheck_"+index).attr("name") == "true") {
                $(("#notifyCheck_"+index).attr("src","check_off.png");
            } else {
                 $(("#notifyCheck_"+index).attr("src","check_on.png");
            }
        }
    });
}

실제 통지여부를 Check하기 전의 화면입니다. 한 화면에 두 개의List를 담고 있으며, 좌측의 List의 제목을 Click시 해당 제목에 대한 사용자목록을 우측에서 Page Refresh없이 구현한 모습입니다. 또한 좌측 List의 통지여부를 Check하면 해당 목록의 통지 여부도 화면갱신 없이 DB에 즉시 반영되고 그 내용을 화면에도 반영합니다.

통지여부를 Check하기 전의 DB의 모습입니다. 화면에서 모든 목록의 통지여부가 선택을 하지 않았으므로, DB내의 모든 목록의 통지여부도 N으로 설정되어 있습니다.

사용자가 화면상에서 Check를 선택한 직후의 화면입니다. 화면으로만 봐서는 통지여부를 Check하면 HTML의 Check Box처럼 화면에서만 인위적으로 Check한 것처럼 보입니다.

하지만 DB의 모습을 보면 사용자가 Check설정을 변경하면 곧바로 적용이 된 모습을 확인할 수 있습니다. DB에서 값이 변화했으므로 사용자가 해당Page를 Refresh해도 해당 Update내용이 적용됩니다.

마찬가지로 Ajax를 이용해서 List의 순서를 실시간으로 변경하는 화면을 구성하게 되었습니다. 이 경우에는 위치를 변경할 Data의 ID와 바꾸려는 대상(상위목록/하위목록) 에 대한 정보의 유무를 Check하고 존재하면 Server로 보냅니다. Server에서 실제 DB정보를 변경합니다. 성공적으로 Data를 전송하고 반환하면 화면상에서도 사용자가 요청한 대로 위치를 변경합니다. 사용자의 시선에는 실시간으로 위치가 변경한 것처럼 보입니다.

// Ajax를 이용해서 실시간으로 목록의 순서를 바꾸는 Function 입니다.
// zoneId는 목록중에서 사용자가 위치를 변경하려는 값에 대한 ID 이며,
// isOver은 변경하려는 값을 상위의 값으로 바꾸는지에 대한 여부를
// True/False로 표현한 Boolean값 입니다.
function changeSequence (zoneId, isOver) {
    // 목록의 순서를 바꿀 때 바꾸려는 대상이 없을 경우를 제외합니다.
    if (checkSequence(zoneId, isOver)) {
        $.ajax({
            // 전송할 Data를 Post방식으로 전송합니다.
            type : "POST",
            // URL 주소를 설정합니다.
            url : "해당 요청 URL 주소",
            // 전송할 Data를 zoneId, isOver의 이름으로 넘겨줍니다.
            data : {
                        "zoneId" : zoneId, "isOver" : isOver
            },
            // Data를 성공적으로 전송할 경우에 대한 Code 입니다.
            success : function (data) { 
                if (isOver) {
                    // 상위 목록과 위치를 바꾸는 Logic 입니다.
                    ...
                } else {
                    // 하위 목록과 위치를 바꾸는 Logic 입니다.
                    ...
                }
            }
        });
    }
}

function checkSequence (zoneId, isOver){
    // 최상위 목록일 때 상위 목록과 위치를 바꾸려고 할 때
    // 최하위 목록일 때 하위 목록과 위치를 바꾸려고 할 때
    return false;
}

실제 화면의 구성이며, 화면상의 세가지 기능들은 각각 Ajax 통신으로 독립적으로 동작합니다. 좌측 상단의 도시들의 위치를 화살표를 통해 변경하면 즉시 화면에서 갱신없이 적용됩니다.

DB에서 해당 Table의 변경할 두 도시의 Sequence Index를 확인하면 각각 3과 4로 Setting되어 있습니다. Sequence Index의 번호는 실제 화면에서 출력되는 List의 순서를 의미하며, 오름차순으로 정렬합니다.

실제로 화살표를 이용해서 대전과 서울의 위치를 변경했습니다. 화면상에서 위치가 즉시 변경된 모습을 확인할 수 있습니다.

이 때 DB내의 해당 Table에서는 화면에서 적용한 순서가 즉시 반영되어 해당 도시의 Sequence Index가 변경된 모습을 확인할 수 있습니다.

글을 마치며

프로젝트를 통해 Ajax를 사용하면서 나름대로 여러 가지 깨달음을 얻었습니다. 물론 다른 기술들도 마찬가지지만 Ajax는 단독으로 사용하지 않고 JavaScript, CSS, DOM, XML등과 같은 다른 기술들과 복합적으로 상호작용을 하며 구현하는 기술입니다. 따라서 Ajax 기술만으로는 Web 개발에 많은 제약이 따르므로 연계되는 기술들에 대해서도 충분한 지식이 필요합니다.

참조 Site

Ajax - 위키백과 http://ko.wikipedia.org/wiki/Ajax
AJAX 개념 정의와 사용사례들 http://sm5six.tistory.com/21
jQuery의 Ajax 사용하기 http://blog.naver.com/PostView.nhn?blogId=shsoul12&logNo=10128478306
[jQuery-Ajax] 4. 기타 프로퍼티들 1/2 http://grimdream.tistory.com/entry/jQuery-Ajax-4기타-프로퍼티들-12
w3schools http://www.w3schools.com/ajax/
Ajax 란 http://sararing.tistory.com/121
Ajax의 흐름과 예제 http://marobiana.tistory.com/77