프로토 타입 및 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

응답 상태에 따라 위의 두 호출 중 하나가 호출됩니다. 두 가지 모두에 전달되는 첫 번째 매개 변수는 각각 responseTextresponseXML 속성을 사용할 수 있는 네이티브 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 요청을 수행하고 응답 텍스트를 기반으로 컨테이너의 콘텐츠를 업데이트합니다.