Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

AJAX 사용하기 기본 예제

뭐 요즘은 웹에서는 기본이나 다름없이 되어버린 AJAX... 여러 사이트에서 난무하고 있는 관계로 이런 인터페이스에 대한 눈은 높아졌지만 난 아직 잘 다룰 줄을 모른다 이거지...
 
어쨌든 요즘은 자바스크립트랑 자바스크립트 라이브러리에 꽤나 흥미가 가고 있고 그중에서 AJAX는 거진 필수적이란 말이지... 빨리 공부해야 겠다... 이걸 왠만큼 다루기 시작하면 꽤나 재미날것 같다.


// AJAX Request Side
function requestTagList(tagName) {
    var url = '/ajaxfile.asp';

    var myAjax = new Ajax.Request(url,
        {
            method: 'post',
            parameters: {v:tagName},
            onSuccess: responseTagList,
            onFailure: function() { alert('HTML을 받아오지 못했습니다.');}
        }
    );
}

function responseTagList(reqResult) {
    var dataobj = decodeURIComponent(reqResult.responseText);
    $('div1').innerHTML = dataobj;
}

물론 이건 prototype.js를 사용한 AJAX이다. 여태까지 올리던건 그래두 내가 어느정도는 이해하고 있었는데 AJAX는 현재 거의 이해를 못하고 있기 때문에... 사용은 해야겠고 해서 prototype.js를 사용했다. 프로토타입을 사용하지 않으면 이 코드가 거진 3-4배의 불량으로 늘어난다. 프로토타입의 위대함을 새삼 느끼고 있다.

당연히 이걸 사용하기 위해서는
<script type="text/javascript" src="prototype.js"></script>
프로토타입을 불러들여야 하고 위의 코드는 당연히 javascript니까 스크립트 태그로 묶여야지....

먼가 엄청난듯 하지만 막상 보고 있으면 구조는 그리 복잡하지 않다.(prototype.js덕분에...)

Ajax.Request만들어 주고 Response할 URL적어주고 그 다음에 method는 AJAX에서의 post와 get의 차이는 아직 잘 모르겠다. 파라미터 필요하면 넘겨주고 필요없으면 ''하면 되고 그 다음은 이벤트 인데 onSuccess는 AJAX통신이 성공했을때 발생하고 onFailure는 실패했을때 발생한다. 그리고 여기선 안썼지만 onComplete는 AJAX통신이 성공하든지 말든지 일단 끝나면 발생한다.

이벤트에 해당하는 Function은 onFailure같은 방식으로 직접 써주어도 되고 onSuccess처럼 따로 Function을 정의하고 호출만 해도 된다.


// AJAX Response Side
<%
    tagSearch = request("v")

    sql = " SELECT bbs_num, bbs_title, bbs_writer "
    sql = sql & " FROM table "

    rs.open sql,con,3,1

    tagList = "<table border='1'><thead><tr>"
    tagList = tagList & "<th scope='col'>제목</th><th scope='col'>작성자</th><th scope='col'>작성일</th></tr></thead>"

    Do while rs.EOF=false
        bbsNum    = rs("bbs_num")
        cgName    = rs("cg_name")
        bbsTitle  = rs("bbs_title")
        bbsWriter = rs("bbs_writer")
        bbsDate   = left(rs("bbs_date"), 10)

        tagList = tagList & "<tbody><tr><td class='listSubject'>" & bbsTitle & "</td>"
        tagList = tagList & "<td nowrap='nowrap' class='listWriter'>" & bbsWriter & "</td></tr>"

        rs.MoveNext
    loop

    tagList = tagList & "</tbody></table>"

    rs.Close : con.close : Set con=nothing

    response.Write jEncode(tagList)
%>

<script language="javascript" runat="server">
    function jEncode(s)
    {
        return encodeURIComponent(s);
    }
</script>

Response쪽은 오히려 간단하다. 여기선 ASP로 구현이 되어 있는데 머 이쪽은 평소짜던 코드랑 그다지 다른게 없으므로 그냥 봐도 다른쪽 언어로 구현하는데도 큰 문제가 없을 것같다.

Response.Write로 페이지에 찍어내면 그냥 그걸 Request쪽에서 받을 수 있다. 필요한걸 만들고 찍어내면 된다. 머 XML이나 JSON을 이용할 수도 있지만 어쨌든 그냥 여기선 간단히 보았을 때....

넘기는 쪽에서 parameters: {v:tagName} 로 넘겼으므로 받는 쪽에서도 v라는 이름으로 파라미터를 받는다. 그걸 받아서 필요한 처리를 하고 코드를 만들던지 값만 넘겨서 받은 쪽에서 처리하던지 해서 필요한걸 마지막에 response.Write해주면 된다.


어쨌든 이렇게 하면 AJAX로 비동기 통신을 할 수 있다.

여기서 설명을 안한것 이 있는데 기본적으로 AJAX는 UTF-8이라고 한다. 그렇기 때문에 그냥 하면 영문은 상관없지만 한글의 경우는 다 깨져버리고 만다 그래서 그걸 해결하기 위해서 인코딩/디코딩과정을 거쳐야 한다.

Response쪽에서는 자바스크립트 메서드를 사용하기 위해서 자바스크립트에 runat="server"해서 자바스크립트를 서버사이드로 돌려서 encodeURIComponent()메서드를 사용해서 반환할 스트링을 인코딩해주고 Request쪽에서는 decodeURIComponent()메서드를 이용해서 디코딩해서 받으면 한글 문제를 해결할 수 있다.

그리고 한글 문제를 해결하기 위해서 중요한 또 한가지.... Response쪽 asp파일은 반드시 UTF-8로 저장이 외어야 한다. 페이지에 UTF-8로 캐릭터셋을 정의하라는 것이 아니라 파일을 UTF-8로 저장을 해주어야 한다. 에디터에 따라 안그런것들도 있지만 대개의 에디터들은 파일을 저장하는 인코딩타입을 정해주는 옵션이 있다. 그에 따라 UTF-8로 저장을 해주어야 한다.
2007/10/22 01:05 2007/10/22 01:05