***** XMLHttpRequest의 메서드

Ajax
	var Ajax = {
	  getTransport: function() {
	    return Try.these(
	      function() {return new XMLHttpRequest()},
	      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
	      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
	    ) || false;
	  },
	
	  activeRequestCount: 0
	}
	
	● Ajax.Base
		Ajax.Base = function() {};
		Ajax.Base.prototype = {
		  setOptions: function(options) {
		    this.options = {
		      method:       'post',
		      asynchronous: true,
		      contentType:  'application/x-www-form-urlencoded',
		      encoding:     'UTF-8',
		      parameters:   ''
		    }
		    Object.extend(this.options, options || {});
		
		    this.options.method = this.options.method.toLowerCase();
		    if (typeof this.options.parameters == 'string')
		      this.options.parameters = this.options.parameters.toQueryParams();
		  }
		}
		
	● Ajax.Options
	   이 클래스는 모든 AJAX 요청에 의해 공개된 모든 중요 옵션과 콜백을 세부적으로 갖는다.
		
	● Ajax.PeriodicalUpdater : new Ajax.PeriodicalUpdater(container, url[, options])
	   주기적으로 AJAX 요청과 response text 바탕으로된 컨텐츠 갱신을 수행한다. 
		
	● Ajax.Request : new Ajax.Request(url[, options])
	   AJAX 요청 시작과 수행
		
	● Ajax.Responders : 
            Ajax.Responders.register(responder), Ajax.Responders.unregister(responder)
	   전역 리스너의 저장소는 Prototype-based AJAX요청의 모든 단계에 대해 통보(변화)한다.
		
	● Ajax.Updater
		

	
var UI = Class.create();
UI.prototype = {
  AX : null,
  initialize : null,
  getHTML : function() {
  },
  recv : function() {
  },
}

var oUI = new UI();

간단한 UI 객체의 구조입니다. 

UI class를 만들었습니다. 그러면 getHTML(ajax를 통해 HTML 소스 즉 서버측에 요구하는 값을 
받아오는 Method)와 recv (ajax를 통해 결과를 받아 파싱하는 Method)를 보겠습니다.

getHTML : function() {
  var url = '/ajax.php';

  this.AX = new Ajax.Request(url, {
    method : 'get',  // basic set is POST
	parameters : { 'file' : 'index.htm' },
    onSuccess : function(result) {
       this.recv(result);
    }.bind(this),
    onFailure : function() {
       alert('HTML을 받아오지 못했습니다.');
    }
  })
}

위의 getHTML Method를 보면 new Ajax가 생성되고 url과 JSON이 파라메터로 넘어갑니다.
url, { method : 'get' , parameters : { 'file' : 'index.htm' }, onSuccess : '' , onFailure : '' } 
이렇게 두가지의 파라미터가 넘어갑니다.

ajax는 이 JSON을 받아서 내부적으로 처리합니다. 그 결과에 따라 성공하면 onSuccess에 
처리문을 수행합니다.

여기엔 다양한 Method가 있습니다. 기본적으로 onComplete, onSuccess, onFailure 등이 있습니다.

위에서 
onSuccess : function(result) {
  this.recv(result);
}.bind(this),

이 부분은 성공시에 처리되는 것이며 function() {}.bind(this) 에서 bind(this)는 
anonymous function 을 호출시에 발생하는 this 객체 즉 anonymous function를 호출한 객체를 
익명함수 내부에서도 사용할 수 있도록 bind(Oject instance name) 를 사용함으로 
Object instance name 을 익명함 수 내에서도 사용할 수 있게 됩니다.

onSuccess는 Ajax객체의 내무 Method이므로 Ajax 객체 내에서 사용하는 this.recv(result)는 
.bind() 가 없을 경우 this.recv(result)의 this는 Ajax를 가리키게 되지만 .bind함수는 
이를 해결하기 위한 Prototype의 기능입니다.


만약 Ajax객체가 성공적으로 수행하여 결과가 정상적으로 리턴되었다면 this.recv(result)는 
실행될 것이며 UI 객체에 있는 recv Method가 수행될것입니다.

  recv : function(XHR) {
     alert(XHR.responseText);
  },

는 실제 XMLHTTPRequest에 의해 return된 오브젝트이며 프로퍼티중 responseText 에 결과가 
담겨져 있습니다.
XHR.responseText를 alert으로 출력해보면 결과에 맞는 내용이 string으로 뿌려지게 됩니다.

아주 간단한 prototype을 이용한 ajax통신을 보았구요. 예제를 통한 설명이 이쯤에서 끝냅니다.

Prototype내의 Ajax Object를 살펴 보시면 다양한 Method와 하위 Object들 볼 수 있습니다.
Ajax부분에 고급화된 Object와 Method를 제공하고 있고 위에서 보여드린 부분은 아주 간단한 
Ajax를 이용한 호출과 결과값을 보여주는 부분입니다.

강좌는 계속 이어지구요. 질문 사항은 이곳 게시판이나 메일로 보내주시면..
서로 공부해서 ^^
설명중 Class, 오브젝트, 객체는 모두 같은 의미를 갖으며 설명중 중복이 싫어서 자꾸 바뀌는 
경향이 있으니 이점 생각하시고 보세요. 
		
신고
Posted by Rhio.kim