우선 모든 강좌는 간단하고 Core만 다루도록 하겠습니다.
Prototype 이라는 Open Framework 이기 때문에 찾아서 혹은 직접 해보면서 다양한 기능을 다룰 수 있을것 입니다.

또한 객체 지향적인 개발 방법으로만 다루겠습니다.
Framework을 이용하는 이유 역시 간단한 함수 호출을 위해서 만든 오픈 라이브러리가 아니기 때문입니다.

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(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