프로토 타입 및 AJAX 튜토리얼
AJAX 소개
AJAX는 A동기 JavaScript 및 XML. AJAX는 XML, HTML, CSS 및 Java Script를 사용하여 더 빠르고 더 빠르고 더 나은 대화 형 웹 애플리케이션을 만들기위한 새로운 기술입니다.
AJAX에 대한 완전한 이해는 간단한 AJAX Tutorial을 참조하십시오 .
AJAX에 대한 프로토 타입 지원
Prototype 프레임 워크를 사용하면 매우 쉽고 재미있는 방식으로 Ajax 호출을 처리 할 수 있으며 안전합니다 (브라우저 간). Prototype은 서버에서 반환 된 JavaScript 코드를 현명하게 처리하고 폴링을위한 도우미 클래스를 제공합니다.
Ajax 기능은 전역 Ajax 객체에 포함되어 있습니다. 이 객체는 AJAX 요청 및 응답을 쉽게 처리하는 데 필요한 모든 메서드를 제공합니다.
AJAX 요청
실제 요청은 Ajax.Request () 객체의 인스턴스를 생성하여 이루어집니다 .
new Ajax.Request('/some_url', { method:'get' });
첫 번째 매개 변수는 요청의 URL입니다. 두 번째는 옵션 해시입니다. method 옵션은 사용할 HTTP 메서드를 나타냅니다. 기본 방법은 POST입니다.
AJAX 응답 콜백
Ajax 요청은 기본적으로 비동기식이므로 응답의 데이터를 처리 할 콜백이 있어야합니다. 콜백 메서드는 요청을 할 때 옵션 해시로 전달됩니다-
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...') }
});
여기에서 두 개의 콜백이 해시로 전달됩니다.
- onSuccess
- onFailure
응답 상태에 따라 위의 두 호출 중 하나가 호출됩니다. 두 가지 모두에 전달되는 첫 번째 매개 변수는 각각 responseText 및 responseXML 속성을 사용할 수 있는 네이티브 xmlHttpRequest 개체 입니다.
두 콜백을 하나 또는 전혀 지정하지 않을 수 있습니다. 사용 가능한 다른 콜백은 다음과 같습니다.
- onUninitialized
- onLoading
- onLoaded
- onInteractive
- onComplete
- onException
다른 콜백을 디스패치하는 동안 예외가 발생했을 때 발생하는 onException을 제외하고 는 모두 xmlHttpRequest 전송 의 특정 상태와 일치합니다 .
NOTE− onUninitialized, onLoading, onLoaded 및 onInteractive 콜백은 모든 브라우저에서 일관되게 구현되지 않습니다. 일반적으로 사용하지 않는 것이 가장 좋습니다.
프로토 타입 AJAX 메서드
Ajax 객체 는 AJAX 요청 및 응답을 쉽게 처리하는 데 필요한 모든 메소드를 제공합니다. 다음은 AJAX와 관련된 모든 메소드의 전체 목록입니다.
NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.
S. 아니. | 방법 및 설명 |
---|---|
1. | Ajax 옵션 이것은 메소드가 아니라 모든 AJAX 요청자와 콜백이 공유하는 모든 핵심 옵션을 자세히 설명합니다. |
2. | Ajax.PeriodicalUpdater () AJAX 요청을 주기적으로 수행하고 응답 텍스트를 기반으로 컨테이너의 내용을 업데이트합니다. |
삼. | Ajax.Request () AJAX 요청을 시작하고 처리합니다. |
4. | Ajax.Responders () 프로토 타입 기반 AJAX 요청의 모든 단계에 대해 알림을받는 글로벌 리스너의 저장소입니다. |
5. | Ajax.Response () 모든 Ajax 요청 콜백의 첫 번째 인수로 전달 된 객체입니다. |
6. | Ajax.Updater () AJAX 요청을 수행하고 응답 텍스트를 기반으로 컨테이너의 콘텐츠를 업데이트합니다. |