Ajax 객체
Prototype 기능중 AJAX 를 지원하며 AJAX 가 무엇이고 WEB 2.0 이 왜 중요한지 등에 대한 언급은 여기서 피하겠다.
이미 알고있다고 전제한다는 것이다.
글 범위를 벗어나서 다루지 않는 부분이라기 보다 그 부분을을 설명한 능력이 없다 이 다음 부분은 그것과 연관이있는부분이다.
만약 그부분에 대해 모른다면 이 부분은 도움이 안될것이며 AJAX 에 관심이 있다면 다른곳에서 그 부분에 대한 정보를 구하면 될것 같다.
Ajax 위키위키
어쩌면 나도 AJAX 때문에 Prototype 에 관심을 가졌을 것이다.
AJax 객체는 익스플로러, 파이어폭스, 사파리 등 여러 브라우저에서 다 사용할 수 있는 쉬운 방법을 제시한다.
떠 캡슐화된 많은 Ajax 처리에 적함한 로직을 담은 클레스들을 가지고 있다.
우리나라는 대부분 익스 를 사용하므로 필요성이 적을수 있다고 생각할수 있지만 전혀 그렇지 않다.
예를 들어 비주얼 베이직으로 작성된 웹 프라우징이 가능한 프로그램을 사용한다고 하면(게임시작 공지사항을 보여주는 화면들) 내장 브라우저는 시스템 디폴트 브라우저를 사용할 수 도있지만 자체적으로 브라우저를 내장할수도 있는것이다. 그러면 여러분은 호환되지 않는 버전의 브라우저를 사용하게 될수도 있는것이다.
* Ajax.Request 클래스
Ajax 에서 사용되어지는 XMLHttpRequest 객체는 불행히도 모든 브라우저에서 선언 할수있는방법이 동일하지 않다.
Ajax.Request 는 이 문제점을 간단히 해결해준다.
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});
와 같이 ajax 객체를 손쉽게 우리는 얻을수있다.
- url : 수행될 Ajax 서버측 주소 (서버측에서는 단순히 ajax 요청에 댛산 결과를 돌려주면 된다. )
- {method: 'get', parameters: pars, onComplete: showResponse} : 파라메터.
ㅇ method : 호출방식 (post 도 사용가능한걸까.. ??)
ㅇ parameters : get 파라메타 (emp_id=200392&user_id=000293 -- "?" 는 쓰지 않았다)
ㅇ onComplete : 성공했을때 수행할 콜빽함수
위에서 "-" 로 정의된 항목을 프로퍼티라고 한다.
Ajax.Request 클레스는 위에서 언급한 프로퍼티 외에 Ajax 를 동기호출 할것인지 비동기호출할것 인지 에 관한 프로퍼티 등이 그 예이다.
자세한 내용은 라이브러리 쪽에 명시 될것이다.
두번째 프로퍼티 파라메터는 AJAX 호출 할때 사용되어지는 옵션이다.
옵션은 여기에 사용된것 외에도 XMLHttpRequest 에서 돌려주는 진행과정(Loading, Loaded, Interactive, Complete) 단계도있다. 이것을 onComplete 처럼 정의해서 사용할 수 도 있다. onSuccess 와 onFailure 옵션으로 서버의 호출결과를 돌려받아 처리할 함수등을 지정할수도 있다.
또 Ajax.Responders를 통해서 특정 이벤트에 대해 처리되어야할 함수를 지정할 수 도 있다.
구글 맵에 사용되어지는 [Lodding...] 메세지를 보여주기 위해서 아래와 같은 코드를 사용할수도 있다.
<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>
이코드는 myGlobalHandlers 에 이밴트 핸들러를 등록해서 Ajax.Responders 객체에 등록하여서 사용하게 된다.
* Ajax.Updater 클래스
Ajax 서버로 부터 돌려받는 값을 단순히 특정 객체의 innerHTML 에 넣는것이라면(여기서 html 코드를 돌려줄수도 있다.) Ajax.Updater 클레스를 사용하라.
아래 코드의 예를 보면 이해가 빠를것이다.
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{
method: 'get',
parameters: pars,
onFailure: reportError
});
음... 콜백함수를 만들지 않아도 된다. .. 좋다.
결과가 성공이면 document.getElementById("placeholder").innerHTML 에 결과값을 돌려주는것 같다.
여기서 javascript 를 리턴받고 실행하려면 evalScripts: true 을 두번때 프로퍼티인 파라메타에 추가해주면 된다.
<script language="javascript" type="text/javascript">
sayHi = function(){
alert('Hi');
};
</script>
<input type=button value="Click Me" onclick="sayHi()">
위 의코드가 ajax 호출 결과로 돌려 진다고 가정하고 아래 코드롸 같이 ajax 호출을 한다고 하면
<script>
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
'http://www.ajaxserver.com',
{
method: 'get',
parameters: '',
evalScripts: true
});
</script>
<div id="placeholder"></div>
위으 코드는 불행히도 우리의 생각과 같이 자바 스크립트는 실행 되지 않는다.
이유는 음.. 평가되지 않는다고 하는데 무슨 의미인지 모르겠다.
하여간 동적으로 실행되는 코드로 함수를 정의할 수 는 없는것 같다.
그래서 함수를 동적으로 정의하는 방식으로 아래와 같이 변환하면 동작하기 시작한다.
sayHi = function(){
alert('Hi');
};
좀더 상세한 complete설명을 위해서는, 라이브러리 Ajax.Request 와 Ajax.options 를 보라.
