행복만땅 개발자

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은 무엇인가.?

prototype.js는 Sam Stephenson에 의해 작성된 자바스크립트 라이브러리이며 웹2.0의 특성에 따라 작성된 코드들은 비동기적 웹페이지 구현시 많은 도움을 줄 수 있을 것입니다

ProtoType의 사용

prototype은 http://prototype.conio.net/에서 다운 받을 수 있으며 구현하고자 하는 페이지에서 다음과 같은 구문을 추가하면 prototype framework를 사용할 수 있다

<script src="/scripts/prototype.js" type="text/javascript"></script>

라이브러리를 사용하는 것은 반복적인 타이핑과 어구를 많이 줄일수 있게 됨으로서 작업 생산성 및 효율성을 높이는 데 있다

당연히 prototype.js에도 미리 정의된 많은 수의 객체와 유틸리티 함수를 가지게 되는데 어떤 것들이 있는지 살펴보도록 한다

유틸리티 함수들(utility functions)

$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키라고 할 수 있다. 예를 들면 DOM함수를 통해 특정id를 가진 요소 하나를 가져온다고 하자

위의 식은 $()를 사용하여 다음과 같이 바꿀수 있다 

하지만 $()함수는 DOM함수와는 달리 여러개의 id를 사용할수 있다는 장점이 있다 이 때 반환하는 값은 Array객체를 반환한다

이 함수의 또 다른 장점은 이 함수를 통하여 id문자열이나 요소객체 자체를 전달할 수 있기

때문에 인자타입을 가지는 다른 함수를 생성할때 매우 유용하다

$F() 함수 사용하기

$F() 함수는  DOM의 document.getElementById()함수에 대한 또 다른 단축키라 할 수 있다.

이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 

마찬가지로 요소 id나 요소객체 자체를 인자로 가질수 있다.

예를 들면 다음과 같은 Form필드가 존재한다고 하자

각각의 필드값은 다음과 같이 가져올 수 있다

$F()을 통해 쉽게 입력컨트롤의 값을 쉽게 가져올 수 있지만

라디오그룹에서는 사용하기 힘들다는 점과 $()와 같이 다수의 인자를 가질수 없다

$A() 함수 사용하기

$A() 함수는 인자들을 하나의 인자로 받아들여 Array객체로 변환한다

Array Class상속을 겸한 이 함수는 어떠한 enumerable list 형태도 Array객체로 변환 또는 복사 할 수 있다는 장점이 있다

예를 들면 다음과 같이 DOM의 NodeLists를 regular Arrays로 변환하기에 유용하다 

$A() 의 또 하나의 장점은 함수생성시 인자의 수를 유연하게 받아들이게 한다는 점이다

$H() 함수 사용하기

$H() 함수는 결합된 배열처럼 보이는 Hash객체로 변환한다.

$R() 함수 사용하기

$R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds) 형태의 다른 표현이다. 이 클래스에 대하여는 ObjectRange 클래스 문서를 통해 확인해보시길 바라며. 다음은 each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제입니다.

더 많은 메소드는 Enumerable 클래스 문서에서 보실 수 있습니다.

Try.these() 함수 사용하기

Try.these()함수는 개발자가 across Browser구현시 서로 다른 javascript등을 작성할 필요가 있는 코드생성시 도움을 주는 중요한 함수입니다

이 함수는 인자처럼 많은 수의 함수를 가지고 그것들을 순차적으로 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.