Introduction to Ajax
Last updated on February 24th, 2007
Prototype 프레임워크는 Ajax를 매우 쉽게 처리할 수 있는 기능을 제공한다. 그리고 매우 간단하게 크로스 브라우저를 지원한다. 더우기 간단한 요구사항으로 이러한 모듈을 매우 스마트한 방법으로 자바스크립트 코드를 이용하여 서버로부터 결과를 받고, 폴링을 위한 헬퍼 클래스를 제공한다.
Ajax 기능은 글로벌 Ajax 객체에 포함된 기능이다. Ajax 요청을 위한 전송은 xmlHttpRequest를 서로다른 브라우저에 안전하게 추상화 되어 있다. 실제적인 요청은 Ajax.Request 객체의 인스턴스에 의해 만들어진다.
new Ajax.Request('/some_url', { method:'get' });첫번째 파라미터는 URL이며 요청하고자 하는 주소이다. 두번째는 해시 옵션이다. 메소드 옵션은 HTTP메소드에서 이용된다. 기본적인 값은 POST이다.
기억해야할 것은 보안적인 이유로 인해서 (크로스 사이트 스크립팅 공격을 막기 위해서) Ajax 요청은 오직 URL과 같은 프로토콜로만 만들 수 있다, ajax요청에 포함된 페이지 호스트와 포트가 입력되어 진다. 몇몇 브라우저는 URL의 변경이 허용된다.
Ajax response callbacks
Ajax 요청은 기본적으로 비동기이다. 이것은 콜백을 가져야하며 이것은 응답으로부터 데이터를 핸들링 할 수 있도록 하는 부분이다. 콜백 메소드는 request 요청이 만들어진 때에 옵션으로 전달된다.
new Ajax.Request('/some_url',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});
여기에 2개의 콜백 메소드가 해시에 의해서 전송되었다. 이것은 성공 혹은 실패를 알려준다. onSuccess와 onFailure는 응답의 상태에 의해서 호출된다. 첫번째 파라미터는 xmlHttpRequest 객체의 기본적인 값인 responseTest와 responseXML 속성을 이용할 수 있도록 되어 있다.
두개의 콜백을 지정할 수 있으며, 이것은 프로그램하기에 달려 있다. 다른 가능한 콜백은 다음과 같다.
onUninitialized,onLoading,onLoaded,onInteractive,onCompleteandonException.
이것들은 모두 xmlHttpRequest전송의 특정 상태값에 의해 수행된다. 만약 다른 콜백이 디스패치 되다가 문제가 발생한경우에는 onException이 수행된다.
또한 onXXX 콜백역시 가능하다. XXX가 HTTP 응답 상태가 200이나 404와 같은 상황일 경우 이용된다. 확인해야 할 것은 이러한 것을 이용할때 onSuccess와 onFailure는 수행되지 않는다. 왜냐하면 onXXX가 앞서 처리되기 때문이다. 그러므로 이러한것을 이용할때는 어떤일을 수행할지에 대해서 알고 있어야 한다.
onUninitialized, onLoading, onLoaded, 그리고 onInteractive 콜백은 모든 브라우저에 일관적으로 구현되어 있지 않다. 일반적으로 이것은 피해야할 대표적인 것이다.
Parameters and the HTTP method
옵션에 전송될 파라미터를 요청 객체에 실어 보낼 수 있다.
new Ajax.Request('/some_url', {
method: 'get',
parameters: {company: 'example', limit: 12}
});
파라미터들은 해시처럼 전송되거나 key-value 쌍의 분할되며, &표시에 의해서 구분된 문자열로 전송된다.
(like company=example&limit=12).
파라미터는 GET과 POST 요청 둘다 이용할 수 있다. 기억해야할 것은 GET요청은 애플리케이션의 변화된 결과를 보내지 않는다는 것이다. 또한 브라우저 캐시를 하지 않기 위해서 post를 써야하며, GET보다 더욱더 유용하다.
주요 애플리케이션의 하나에서 파라미터 프로퍼티는 FORM의 내용 AJAX에 전송한다. 그리고 Prototype는 이러한 치리를 위해서 헬퍼 메소드를 제공하며 이것을 Form.serialize:라 부르고 있다.
new Ajax.Request('/some_url', {
parameters: $('id_of_form_element').serialize(true)
});
만약 일반적인 HTTP 요청 헤더를 전송하기 원한다면 requestHeader 옵션을 사용할 수 있다. 단지 name-value쌍만을 전송하거나, 단일 배열 ['X-Custom-1', 'value', 'X-Custom-2', 'other value']을 보낼 수 있다.
If, for some reason, you have to POST a request with a custom post body
(not parameters from the parameters option), there is a postBody option
exactly for that. Be aware that when using postBody, parameters passed
will never be posted because postBody takes precedence as a body - using the
option means you know what you're doing.
Evaluating a JavaScript response
가끔 애플리케이션은 response와 같은 자바스크립트를 전송할 수 있도록 디자인 되었다. 만약 response의 컨텐츠 타입이 JavaScript의 MIME 타입과 매칭되어 있다면 true가 반환되고, Prototype는 자동적으로 eval() 된 코드를 반환한다. 만약 이러한 값이 필요없다몀 응답 핸들역시 필요치 않다.
반대로 만약 X-JSON 헤더를 소유한 response가 있다면 이것은 파싱되고, 객체로 저장되며 두번째 아규먼트처럼 콜백에 전달된다.
new Ajax.Request('/some_url', { method:'get',
onSuccess: function(transport, json){
alert(json ? Object.inspect(json) : "no JSON object");
}
});
Ajax를 이용하여 하찮은 데이터가 아닌것을 패치하고자 할경우 이러한 기능을 이용할 수 있다. 그리고 XML 응답에 대해서 파싱의 오버해드를 피하고자 하는경우 유용하다. JSON은 XML보다 매우 빠르고 가볍다.
Global responders
각 Ajax 요청에 대해서 매우 알려진 객체가 있다. Ajax.Responder이며 이것은 Ajax.Request의 상태에 따라 처리해야할 callback를 등록할 수 있도록 한다.
Ajax.Responders.register({
onCreate: function(){
alert('a request has been initialized!');
},
onComplete: function(){
alert('a request completed');
}
});
각 콜백은 xmlHttpRequest 전송 상태에 매칭된 것이며 onCreate가 추가되어 있다. Globally tracking request는 많은 방법의 요청을 이용할 수 있다. 또한 선택에 따라 자바스크립트 로거를 이용할 수 있고, 가능한 연결 문제에 대한 많은 정보를 이용할 수 있는 글로벌 익셉션도 만들 수 있다.
Updating your page dynamically with Ajax.Updater
개발자는 종종 문서의 부분적으로 수신된 HTML 부분을 업데이트를 위해서 Ajax를 만들기를 원한다. Ajax.Request에서 onComplete 콜백으로 이것을 매우 쉽게 할 수 있다. 그러나 Ajax.Updater 역시 더 쉬운 방법을 제공한다.
HTML document에 이러한 코드를 추가할 수 있다.
<h2>Our fantastic products</h2>
<div id="products">(fetching product list ...)</div>
'products' 컨테이느는 비어있다. 그리고 Ajax응답으로 부터 받은 HTML을 채워넣길 원할 것이다. 문제 없다.
new Ajax.Updater('products', '/some_url', { method: 'get' });이게 다다, 더이상 작업은 없다. 아규먼트는 Ajax.Request와 같다. 첫번째 공간은 수신된 엘리먼트가 될 것이다. Prototype는 자동적으로 Element.update()메소드를 이용하여 응답을 업데이트 하게 된다.
만약 HTML이 인사인 스크립트라면 기본적으로 스크립트 된다. 만약 evalScript 옵션처럼 true를 전송하길 원한다면 수행된 스크립트를 보게 될 것이다.
그러나 에러가 발생하면, 서버는 HTML 대신 에러 메시지를 리턴한다. 종종 사용자가 원했던 컨텐츠에 에러가 들어 있는것을 원하지 않을경우가 있다. 운좋게도 Prototype는 편리한 솔루션을 제공한다. {success:'products', failure:'errors'}와 같은 형태의 서로다른 컨테이너에 해시를 첫번째 아규먼트로 전송할 수 있다. 컨텐츠는 성공적인 경우 product를 실패한 경우에는 error을 출력하게 된다. 이러한 그능은 사용자 인터페이스를 더욱더 user-friendly하게 만들어 준다.
현재 컨테이너의 컨텐츠를 덮어쓰지 않도록 선택할 수 있을 것이다. 그러나 새로운 HTML을 상단이나 하단에 추가하고 싶은경우 Insertion.Top나 Insertion.Bottom을 이용하여 추가할 수 있는 기능도 제공한다. 단지 insertion 객체를 Ajax에 insertion 파라미터를 추가하는 것으로 이러한 일이 가능하다.
new Ajax.Updater('products', '/some_url', {
method: 'get',
insertion: Insertion.Top
});
Ajax.Updater은 container('products') 엘리먼트내에 반환된 HTML의 insertion을 이용할 수 있다.
Automate requests with the Ajax.PeriodicalUpdater
Ajax.Updater이 cool하단걸 알았을 것이다. 그러나 서버로 부터 정기 간행물과 같이 반복적으로 패치되는 것을 원할 때가 있따. Prototype 프레임워크는 이러한 기능역시 제공한다. 이것을 Ajax.PeriodicalUpdater이라고 하며 기본적으로 Ajax.Updator의 일반적인 주기로 실행하도록 한다.
new Ajax.PeriodicalUpdater('products', '/some_url',
{
method: 'get',
insertion: Insertion.Top,
frequency: 1,
decay: 2
});
2개의 새로운 옵션은 frequency와 decay이다. Frequency는 요청을 만들어내는 시간 간격이다. 여기 1초는 Ajax요청을 매초마다 수행한다는 것이다. 기본적인 frequency는 2초이다. 사용자는 매우 좋을 것이다. 외냐하면 애플리케이션의 응답성 때문이다. 그러나 서버는 로드가 걸리게 된다. 아마도 이러한 것때문에 사람들이 브라우저를 떠나갈 수 있다. 우리는 decay옵션을 왜 가지고 있을까? 이것은 frequency에 의한 팩터이며 이것은 매번 배수로 증가하며, 현재 응답 바디가 전 내용과 동일한경우 증가된다. 첫번째 Ajax 요청이 1이라고 지정되었다면 다음에는 2초, 그다음에는 4초가 되며 다음에는 8이된다. 물론 서버가 항상 서로다른 컨텐츠를 반송하는 경우 decay는 절대 효과를 내지 않는다. 이 팩터는 오직 컨텐츠가 변화하지 않을경우 의미가 있게 된다.
Having frequency falloff can take the load off the servers considerably because the overall number of requests is reduced. You can experiment with this factor while monitoring server load, or you can turn it off completely by passing 1 (which is default) or simply omitting it.
Move along
Learn more about Ajax.Request, Ajax.Updater and Ajax options.