Prototype.js 가이드 02 _ Ajax support

The Ajax 객체

앞서의 함수들은 분명 좋은 코드들이지만 그러한 함수들을 구현할 능력이 있거나 이미 유사한 자신만의 함수를 사용하고 있을지 모른다. 하지만 prototype.js를 사용하는 이유는 대부분 Ajax기능을 쉽게 사용하길 원하기 때문이기에 이제 prototype.js를 사용하여 AJAX로직을 좀더 쉽게 작성할 수있는 방법을 살펴보기로 하자.

먼저 ProtoType라이브러니는 Ajax 기능 구현을 위해 Ajax 객체라는 것을 제공하고 있다

AJAX객체는 AJAX관련 함수를 작성시 만들어지는 코드의 단순화와 캡슐화를 위해 ProtoType라이브러리에 미리 정의된 객체이며 AJAX객체는 AJAX로직이 캡슐화되어 제공되어지는 다수의 클래스를 포함하고 있다. .

Ajax.Request 클래스 사용하기

만약 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면 Ajax기능을 사용하기 위해 수많은 코드에서  XMLHttpRequest 객체를 생성해야 것이며 각 실행 단계마다 비동기적으로 체크를 해야 할것이며. 그리고나서 응답을 뽑아내는 것을 반복할 것이다.

protoType라이브러리에서는 이러한 기능을 지원하기 위해 Ajax.Request클래스를 정의하고 있다.

라이브러리를 통해 Ajax 어플리케이션을 만들기 위해서는 다음과 같은 방식으로 Ajax.Request 객체를 생성하여야 한다

 var myAjax = new Ajax.Request(

              url,

              {method: 'post', parameters: data, onComplete: ajax_response}

              );

 

위에서 사용된 Ajax.Request객체의 생성자의 두번째 파라미터의 의미는 Ajax호출을 위한 옵션을 정의하고 있다 즉 위의 예에서는 HTTP POST명령을 통해 첫번째 파라미터인 url을 호출할 것이며 변수 data에 포함된 조회문자열을 전달하고 응답을 받아들이는 작업을 마칠 때 ajax_response()함수를 호출하라는 프로퍼티를 가지는 Ajax.Request객체를 생성하라는 뜻이다

예를 들었던 프로퍼티 외에 AJAX를 비동기적으로 서버에 호출할지를 결정( true 또는 false) 할 수 있는 asynchronous 프로퍼티(디폴트 값은 true이다.) 등 Ajax.Request 객체 내에서 정의하고 활성화 시킬수 있는 몇개의 프로퍼티가 더 존재하고 있다

 

XMLHttpRequest는 HTTP호출을 하는 동안 진행과정(Loading, Loaded, Interactive,Complete)를 알릴수 있는데 각 단계마다 사용자정의함수를 통해 Ajax.Request객체를 호출할 수 있으며 일반적으로 Complete 상태에서 Ajax.Request객체를 호출하고 있다

그 방법은 위의 예제(onComplete)처럼 요청옵션내 onXXXXX에서 간단히 설정하기만 하면  그 설정된 이름을 가진 함수를 통하여 XMLHttpRequest객체 자체가 될 하나의 인자와 response HTTP header(X-JSON)라는 또 하나의 인자를 가지는 객체를 전달 받을 수 있을 것이다

당신은 반환 데이타를 얻기 위해 이 객체를 사용하거나 호출된 HTTP 결과 코드를 포함하는 Status프로퍼티 체크를 하기 위해 이 객체를 사용할 지도 모른다.

또 다른 두개의 옵션은 결과에 대한 처리수행을 위해 사용될수 있다.

onSuccess옵션을 통해 AJAX호출이 에러없이 수행될 때 호출할 함수를 명시할 수 있다.

onFailure옵션은 반대로 에러가 발생할때 호출될 함수를 명시할 수 있다.

이 두가지 옵션에서도 onXXXXX에서 선택한 함수와 마찬가지로  AJAX호출시 전달되는 XMLHttpRequest객체나  evaluated X-JSON header를 전달하도록 할수 있을 것이다.

앞서 이야기 한 내용들을 토대로 간단한 예제를 만들어 보기로 하자

먼저 Ajax.Request 객체를 생성하는 함수를 만든다

function ajax_request(url, data) {

     var myAjax = new Ajax.Request(

              url,

              {method: 'post', parameters: data, onComplete: ajax_response}

              );

    }

 

두번째로 request가 끝나게 되면 호출될 ajax_response()라는 함수로 만들어 보자

function ajax_response(originalRequest) {

      if(!bHasRedirect) {

         //process originalRequest.responseText;

      } else {

          bHasRedirect = false;

          ajax_request(originalRequest.responseText, "");

      }

   }

이제 Ajax Request를 만들고 나면 만약 전역변수로 bHashRedirec를가 true로 설정하게 하는 또다른 Ajax.Request가 만들어지기거나 함수내 originalRequest.responseText()를 통하여 수행할 더이상의 코드가 존재하지 않을 때까지   response는 항상 ajax_response()를 호출할 것이다

Ajax.Responders 객체 사용하기

1.4.0 버전에서, 이벤트 반환 핸들링에 대하여 새로이 소개되고 있는 것이 있는데 만약 AJAX호출이 발생하더라도 특정 이벤트를 위해 항상 수행되어야 하는 코드를 가지고 있다면 이 새로운 Ajax.Responders 객체를 사용할수 있다고 한다 .

<script>
     var myGlobalHandlers = {
         onCreate: function(){
             Element.show('systemWorking');
         },
         onComplete: function(){
             if(Ajax.activeRequestCount == 0){
                 Element.hide('systemWorking');
             }
         }
     };
 
     Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

위의 예에서와 같이 AJAX호출이 진행중이라는 시각적 표시를 보여주길 원한다고 했을 때. 당신은 두개의 전역 이벤트 핸들러를 사용할수 있다. 하나는 첫번째 호출이 시작되었을때 아이콘을 보여주는것이고 다른 하나는 적어도 하나가 끝났을때 아이콘을 숨기는 것이다.

더 자세한 사항은 Ajax.Request 참조문서나 options 참조문서를 참조하길 바란다

Ajax.Updater 클래스 사용하기

Ajax.Updater 클래스는 어떤 요소에서 Ajax 호출로부터 반환된 HTML을 채우게 되는지 알려주는 클래스입니다.말보다 한줄의 소스가 더 쉽게 이해가 될 것 같습니다

<script>

     function getHTML()

       {

           var url = 'http://yourserver/app/getSomeHTML';

           var pars = 'someParameter=ABC';

           var myAjax = new Ajax.Updater(

                               'placeholder',

                               url,

                               {method: 'get',parameters: pars });

       }

</script>

<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

 

Ajax.Updater 객체생성 코드는 Ajax.Request객체와 유사하지만.

인자가 하나 더 추가 되어 있습니다.

이것은 만약 html안에 이미 포맷팅한 정보를 가지고자 할때 Ajax.Updater 클래스를

사용하여 쉽게 채우고자 하는 위치point입니다

클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해보자.

<script>
    function getHTML()
    {
      var url = 'http://yourserver/app/getSomeHTML';
      var pars = 'someParameter=ABC';
      var myAjax = new Ajax.Updater(
          {success: 'placeholder'},
           url,{ method: 'get',parameters: pars,onFailure: reportError});
     }

    function reportError(request)
   {
      alert('Sorry. There was an error.');
   }
</script>

<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

위코드는에서는 앞서의 함수에서 보다 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시하였습니다.(이것은 onFailure옵션을 사용하여 수행한다).

또한 성공적으로 수행된 경우에만 활성화될 묶음자(placeholder)를 명시하였습니다.

첫번째 인자는 두가지 프로퍼티(success/failure)를 가지는데 위에서는 failure 프로퍼티를 사용하지 않고 onFailure옵션에서 reportError함수를 사용하여 에러상황을 표시하도록 하였습니다.

url로 호출된 서버 로직에서 HTML 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있습니다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해서는  객체 생성자의 마지막 인자에 evalScripts: true; 옵션을 추가하기만 하면 된다

.

좀더 상세한 설명을 원하신다면, Ajax.Request 참조문서와 Ajax.options 참조문서를 참조하세요. 

출처 Prototype.js 가이드 02 _ Ajax support|작성자 시반