Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

prototype.js의 Ajax 사용에 대해서..

작년 10월에 Ajax.Request에 대해서 포스팅을 한번 한적 있는데 추가적으로 작성할 것도 있고 또 그때보다 더 알게 된 것도 있기 때문에 다시한번 포스팅한다.

기본적으로 Ajax1라 하는 것은 비동기통신을 뜻하고 웹페이지를 새로 갱신하지 않고 서버세 접속해서 특정 부분만을 갱신하는 기법이다. 이 기법을 통해서 웹이 크게 발전했고 XMLHttpRequest를 사용한 것으로 대표되기는 하지만 Ajax는 비동기로 통신하는 기법자체를 의미하지 반드시 XMLHttpRequest를 사용해야만 하는 것은 아니다.

어쨌든 Ajax라는 게 인기를 끄는데는 XMLHttpRequest가 그 중심에 있는데 솔직히 간단하지는 않다. 하지만 자바스크립트 프레임워크를 쓰면 꽤나 간단하게 사용할 수 있는데 XMLHttpRequest에 대한 처리부분을 프레임워크에서 대부분 처리해 주기 때문이고 여러가지 간면한 메서드를 제공하고 있다. 자바스크립트 프레임워크를 쓰는 이유에 있어서 Ajax만으로도 그 편리함은 충분하다고 생각한다.


// example of an AJAX/XMLHttpRequest JavaScript function from Wikipedia
function ajax(url, vars, callbackFunction)
{
    var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
    request.open("POST", url, true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            if (request.responseText)
            {
                callbackFunction(request.responseText);
            }
        }
    };
    request.send(vars);
}

나는 prototype.js 프레임웍을 사용하는데 이런 내부의 복잡한 로직을 Ajax.Requst의 호출만으로도 간단히 해결해 준다. Requset가 prototype.js의 기본적인 Ajax사용이라고 생각되는데 프로토타입 프레임워크의 사이트에서 제공하는 API를 보면

new Ajax.Request(url[, options])

위처럼 정의되어 있다. []로 묶인 것은 사용해도 되고 안해도 되는 것이다.


// Ajax.Request 사용하기
new Ajax.Request("ajax.jsp",
    {
        method:'get',
        parameters : { par:Code },
        onLoading  : function() {
        },
        onSuccess  : function(returnValue)
        {
            var returnValue = returnValue.responseText;
        },
        onFailure  : function() {
        },
        onComplete : function() {
        }
});

위처럼 간단하게 Ajax.Request를 사용할 수 있다. 옵션은 JSON 표기법을 사용해서 필요한대로 적어댈 수 있고 필요없는 것은 적지 않아도 상관없다. parameters에서 par라는 이름으로 Code라는 변수를 지정해서 넘겨준다. 물론 스트링을 직접 주려면 홑따옴표('')로 묶어주면 되고 Code라는 변수를 사용했으므로 당연히 상단에서 Code라는 변수를 정의해 놓았어야 한다. 이건 ajax.jap?par=code 처럼 넘겨준것과 같다. 물론 code는 변수의 값이 넘어가야하는거지만....

onLoading은 Ajax통신을 시작할 때 발생하고 onSuccess는 통신이 성공되었을 때 발생하고 onFailure는 통신이 실패했을 때 onComplete는 통신이 성공하든 실패하든 통신이 끝났을 경우에 발생한다. 각 부분에 원하는 기능을 코딩하면 된다. 이밖에도 더 제공하는 옵션이 있는데 사용해 보지 않아서 아직은잘 모르겠다.



여기에 프로토타입에서는 Ajax.Updater라는 것도 제공하고 있는데 API에는 다음과 같이 정의 되어 있다.

new Ajax.Updater(container, url[, options])

Updater는 말 그대로 Ajax통신이 끝난 뒤에 container에 해당 내용을 집어넣는 구조로 되어 있다. responseText를 받아서 innerHTML을 하는 대신에 Updater를 사용해서 간단하게 처리할 수 있고 container에는 해당엘리먼트의 id를 스트링 형태로 넘겨주면 된다.

new Ajax.Updater('elementId', 'ajax.jsp')

위처럼 아주 간단하게 elementId안에 내용을 업데이트 할 수 있다. 물론 여기에 옵션이 필요하다면 Request에서와 동일하게 옵션을 넣어 줄수 있다.


// Ajax.Updater 사용하기
new Ajax.Updater({success:'elementId'}, 'ajax.jsp', {
    method:'get',
    parameters : {
            x:code1,
            y:code2
    },
    onLoading: function() {
    },
    onSuccess  : function(returnValue) {
    },
    onComplete : function() {
    }
});

위에서와 다르게 container부분에 JSON형태로 넘겨주면서 success라는 key값을 넣어주었는데 이는 통신이 성공했을 때만 'elementid'에 내용을 업데이트 하라는 것이다. {success:'elementId', failure:'messagebox'}처럼 넘겨주면 통신이 성공하면 elementId를 실패하면 messagebox를 업데이트 하게 된다.

여기서 주의점은 onSuccess와 onComplete의 업데이트 타이밍의 차이인데 실제로 통신해서 받아온 내용이 갱신되는 시점은 onComplete가 실행되는 시점이다. onSuccess에서는 통신이 완료되기는 하지만 실제 내용이 페이지에 갱신되지는 않는다. 그렇기 때문에 Ajax통신을 통해서 받아온 내용에 들어있는 엘리먼트를 사용하기 위해서는 onSuccess가 아니라 onComplete에서 코드를 넣어주어야 다룰 수 있다. onSuccess에서는 아직 해당 엘리먼트가 페이지에 삽입되지 않았기 때문에 엘리먼트를 찾지 못해서 에러가 나게 되고 Ajax의 특성상 오류메시지도 나오지 않기 때문에 해결하기도 골치 아프다.

  1. Asynchronous JavaScript and XML [Back]
2008/03/30 22:32 2008/03/30 22:32

위젯 코리아 컨퍼런스 2008

위젯코리아 컨퍼런스 2008 현수막
갑자기 가게 된 위젯컨퍼런스에 다녀왔다. 위젯컨퍼런스에 다녀왔다. 위젯이라는거 자체를 그렇게 주의깊게 보고 있지는 않았기 때문에 세션을 보았을때도 그닥 관심이 가지는 않았고 지금 해야할 일이 좀 있었기 때문에 이 바쁠때 여기를 꼭 가야하나 하는 생각도 약간 있었고 위젯을 가지고 하루종일 얘기할 만한게 머 있을까 하는 생각도 좀 있었다.

최근 위젯을 만들자는 얘기가 좀 나오고 있는데 개인적으로 별로 동감은 하고 있지 않다. 여러가지 이유가 있는데 머 가장큰건 "그걸 누가 만들어"라는 생각이 좀 베이스에 깔려 있고 위젯이란건 어떤 메인적인 것을 보완(사용편의또는 홍보, 배포)등의 역할을 하는 것이지 그것 자체가 메인은 아니기 때문에.... 그리고 우리회사가 할만한 사업은 아니라는 생각도 꽤 있는 편이다.(물론 여기엔 복합적인 것들이 더 있긴 하지만...)

어쨌든 내돈 드는 것도 아니고 강력히 갔다 오라고 하시니 갔다가 왔다. 하루 여유도 부릴수 있고 일찍 끝나다 보니....

결론부터 얘기하자면 이정도 근액의 컨퍼런스를 2번째 가보는 건데 이번에도 역시 실망이다. 유료라하면 유료인 만큼 그에 대한 퀄리티를 보장해 주어야 하는데 그러지 못한 느낌이 들었다. 아무래도 전체 세션을 관리하는 쪽에서 다 제어하는게 아니다 보니 중복되는 내용도 있었고 너무 개념적인 내용만을 많이 얘기하기도 했었다.



컨퍼런스 들으면서 생각난 여러가지 것들....

위젯이 앞으로 좀 뜰지도 모르겠다.
조금 연구해 보면 해볼만한게 있을지도 모르겠다.
SNS는 확실히 여러가지로 해볼만 하는게 많다는 생각(위젯은 아니지만 오히려 오픈소셜에 대한 IDtail
세션이 나로선 제일 재밌었다.
싸이에서 블로그가 나오는구나...(생각보다는 개방적인 마인드...)
MS popfly 를 좀 만져봐야겠다.(첫 오픈때와는 많이 달라졌더라는...)
이곳에서 말하는 것 보다는 좀 제한적일지도 모른다는 생각..


괜찮은 세션도 분명히 있긴 했지만 전체적으로 갸우뚱 하게 되는 부분도 있었다. 나만 그런 편견이 있는지 모르겠지만 위젯(혹은 가젯) 하면 떠오르는 건 데스크탑이든 웹페이지이든 개병이나 사이드바 같은 곳에서 사용할 수 있는 콤팩트한 특정기능의 어플이라고 생각한다.(말로 풀어쓰니 좀 어렵긴 하지만...)  근데 위젯의 범주가 좀 작기 때문인지 이곳에선 위젯의 범위를 너무 넓게 잡고 있는 듯한 느낌을 꽤 받았다. 그냥 메쉬업을 한 Apps까지도(다른 웹페이지에 삽입하기 어려운..) 모두 위젯과 한 범주에 넣어버렸다. 매쉬업은 매쉬업이고 위젯은 위젯이지... 매쉬업된걸로 위젯을 제공할 수는 있지만....

제일 관심이 간건 IDtail의 송교석 팀장의 "Google OpenSocial 플랫폼과 소셜위젯 기반 SNS"에 대한 부분이었다. 개발자와 개인적인 관심이 크긴 했지만 IDtail이 Opensocial의 지원을 하고 있다는 것(API사이트 에서 오픈소셜에 대한 부분도 제공하고 있다.)은 국내최초라는 점과 오픈소셜에서 앞으로 기대되는 점으로 볼때 상당히 고무적인 기반이고 소셜 위젯을 위한 "마이템"이라 서비스를 클로즈 베타로 제공하고 있다는 점에서 상당히 관심이 갔고 IDtail에서 마이템 제작을 할 수 있도록 지원한다고 한다.

그리고 위젯을 마케팅이란 측면에서 바라본 위자드웍스의 "해외 위젯 마케팅 사례와 핵심 성공 전략" 세션도 관심이 갔다. 유니클락의 사례로 보았을 때 어찌 보면 당연한 이야기 인데 개발자라서 그런지 마케팅쪽으로는 집중해서 생각해 본적이 없는데 마케팅요소로서 위젯의 특성에 대해서 생각해 볼 수 있는 시간이 되었다. 하지만 웹위젯으로 지금은 꽤나 기대가 되지만 웹페이지에 위젯을 붙힐 수 있는 공간이 제한적이라는 점을 생각해 볼 때 위젯이 말그대로 대박나서 수많은 위젯들이 나왔을 때가 좀 걱정되기도 했다.)

그래도 크게(어쩌면 전혀...) 관심을 가지고 있지 않았던 위젯에 대해서 다시한번 정리해서 생각해 볼 수 있게 되었고 앞으로 위젯을 좀 관심있게 보게 된 시간이 되었다.

위젯 코리아 컨퍼런스 2008에서 받은 기념품

그래도 이번에 득템한 것들... 기본으로 주는건데도 꽤나 푸짐한...  ㅎㅎㅎㅎ 맘에든느 위자드웍스의 머그컵과 위자드웍스의 센스가 돋보이는 Status Card... ㅎㅎㅎ 회사에서 써야지... 그리고 노트는 종류가 많아서 당장 쓰진 않을 것 같지만 심플함이 맘에 드는 IDtail의 다이어리...
2008/03/29 23:53 2008/03/29 23:53