prototype사용자를 위한 dojo 입문 (3)

제 3 장 XMLHttpRequest

계속해서, XMLHttpRequest 관련 함수들을 살펴 보자.
 
BOM(Browser Object Model) 코드는... 열라 길다. -.-; 생략할려다가... prototype이나 dojo가 얼마나 많은 노가다를 줄여주는지 확인하는 차원에서 주욱 적어봤다. prototype과 dojo 코드는 얼추 비슷해 보이지만, 가만히 살펴보면 자질구레한 부분에서 조금씩 다르다:

* BOM

var xhr;
try {
  xhr = new XMLHttpRequest();
} catch (e) {
  try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      // ... Orz
    }
  }
}
xhr.onstatechange = function() {
  select (xhr.readyState) {
  case 4: // loaded
    select (xhr.statusCode) {
    case 200: // ok
      break;
    case ...
    }
  case ...
  }
}
xhr.open('GET','your/url', true);
xhr.send('paramName1=' + encodeURIComponent(paramValue1) + '&paramName2=' + encodeURIComponent(paramValue));
...

* prototype

new Ajax.Request('/your/url', {
  method: 'GET', /* POST, PUT, DELETE ... */
  asynchronous: true,
  parameters: {
    paramName1: paramValue1,
    paramName2: paramValue2,
    ...
  }
  onComplete: function(xhr) { },
  onFailure: function(xhr) { }
});

* dojo

dojo.xhrGet({ /* xhrPost, xhrPut, xhrRawPost, xhrRawPut ... */
  url: '/your/url',
  sync: false,
  handleAs: 'xml',  /* xml, json, text */
  content: {
    paramName1: paramValue1,
    paramName2: paramValue2,
    ...
  },
  load: function(response, xhr) { },
  error: function(response, xhr) { }
});

차이점을 요약하면:

• new 연산자를 쓰지 않는다(그냥 함수 호출이다).
• 요청 메소드를 파라메터로 처리하지 않고, 요청 메소드별로 함수가 따로 있다(코멘트 부분 참조).
• 요청 url을 별도의 파라메터가 아니라 다른 옵션들과 똑같이 취급한다.
• 동기/비동기 모드를 지정하는 파라메터가 거꾸로다(당연히 이름도 asynchronous가 아니고 sync다).
• 응답 형식을 지정할 수 있으며, 응답이 바로 콜백함수로 전달된다.(즉, json 응답의 처리 방법이 다르다.)
  

prototype처럼 성공/실패 여부에 따라 콜백 함수를 지정할 수도 있지만, 내 경우에는 dojo.Deferred(twisted의 deferred와 유사한데...)를 선호한다. 여기서는 많은 옵션들을 생략했는데, 자세한 것은 각각의 온라인 문서를 찾아보시라.

Ajax.Updater / Ajax.PeriodicalUpdater에 해당하는 녀석은 없다. 그냥 window.setInterval()과 domNode.innerHTML을 쓰면 되니까 그다지 아쉽지 않다. 그리고, dojo의 위젯(dijit) 중에 ContentPane이라는 녀석을 쓰면 이 모든걸 한 줄로 끝낼 수 있다.

dojo에는 XHMLHttpRequest 대신 <script>태그와 <iframe>태그를 사용하는 dojo.io.script와 dojo.io.iframe이라는 두개의 특별한 녀석들이 있다. AJAX의 Cross Domain 제한을 경험해본 개발자라면 귀가 솔깃할 만한 녀석들이다. 자세한 것은 역시 온라인 문서를 찾아보시라.

다음에는 이벤트 핸들링에 대해서 알아보기로 하고... 요기까지~