ajax 를 편리하게 사용할수 있는 prototype framwork 간단한 예제

prototype 에 대한 첫 아티클이라 내용은 좀 빈약하다. 기본적인 사용법만 서술했다.
좀더 다양한 형태로 사용해 볼만한 가치가 있는 framwork 인것같다.
DOM 을 쉽게 다룰수 있어 그 또한 매력적이긴 한데 심도 있게 사용할만한
프로젝트를 만나지 못해 아쉽다.

HttpRequest 객체를 생성하기 위해서 많은 코드를 작성해야되지만 prototype 에서는 Ajax.Request

클래스를 이용하여 간단하게 생성하여 사용할수 있다.

함수의 파라미터를 넘기는 방식에 따라 여러기능을 지원할수 있는데 그 내용은 기본형태를 익힌후에

정리하도록 해야겠다. 가장 간단한 함수의 형태이다.

객체를 생성할 때 url 주소, 전송방식을 get, 넘기는 파라미터 문자열, 완료되었을때의 callback

함수명 등을 넘긴다. 쉽게 알수 있는내용이다.

var myAjax = new Ajax.Request(

   url,{

   method:'get',

   parameters:pars,

   onComplete:showResponse

});

 

위의 함수를 써서 객체를 생성하고 완료 callback 함수 명을 넘긴후 함수안에 완료되었을 때

실행되어야 하는 코드를 삽입하면 된다. 아래 예제는 그것을 구현한 전체 예제이다.

<script>

function searchSales()

{

   var empID = $F('lstEmployees');

   var y = $F('lstYears');

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

   var pars = 'empID=' + empID + '&year=' + y;

 

   var myAjax = new Ajax.Request(

       url,

       {

             method: 'get',

             parameters: pars,

             onComplete: showResponse

       });

      

}

function showResponse(originalRequest)

{

   //put returned XML in the textarea

   $('result').value = originalRequest.responseText;

}

</script>

 

<select id="lstEmployees" size="10" onchange="searchSales()">

       <option value="5">Buchanan, Steven</option>

       <option value="8">Callahan, Laura</option>

       <option value="1">Davolio, Nancy</option>

</select>

<select id="lstYears" size="3" onchange="searchSales()">

       <option selected="selected" value="1996">1996</option>

       <option value="1997">1997</option>

       <option value="1998">1998</option>

</select>

<br/><textarea id="result" cols=60 rows=10 ></textarea>

 

위의 내용을 좀더간단하게 표현할수 있는데 Ajax.Updater 를 사용하는것이다.

위에서는 성공을 하게되면 ajax 생성시 넘긴 성공했을 때 실행하는 callback 함수로 가게되고

그함수에서 태그에 값들을 넣어주는 형태인데 이 내용을 없앨수 있다. 태그요소 id 를 파라미터로

넘기게 되면 자동으로 값을 넣어주는 것이다. 이것은 두개의 프로퍼티 값이 있는데

성공했을 때 success:'id 명' , 실패했을때 failure:'id 명' 설정할수 있다.

나머지는 위의 내용과 동일하다

<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>