홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
prototype.js
작성자 : 13 김영철
등록날짜 : 2009.01.29 16:56
2,806

유틸리티 함수들(utility functions)

라이브러리는 미리 정의된 많은 수의 객체와 유틸리티 함수를 가진다. 이 알기쉬운 함수들의 목적은 반복적인 타이핑과 어구를 많이 줄이는데 있다.

$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키이다. DOM함수처럼, 이것은 인자로 던져진 id를 가진 요소를 하나 반환한다. 하지만 DOM함수와는 달리, 이것은 여러개의 id를 사용할수 있고 $()는 요청된 요소를 가진 배열객체를 반환할것이다. 예제는 아래와 같다.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>

<script>
  function test1()
  {
    var d = $('myDiv');
    alert(d.innerHTML);
  }

  function test2()
  {
    var divs = $('myDiv','myOtherDiv');
    for(i=0; i<divs.length; i++)
    {
      alert(divs[i].innerHTML);
    }
  }
</script>
</HEAD>

<BODY>
  <div id="myDiv">
    <p>This is a paragraph</p>
  </div>
  <div id="myOtherDiv">
    <p>This is another paragraph</p>
  </div>

  <input type="button" value=Test1 onclick="test1();"><br> 
  <input type="button" value=Test2 onclick="test2();"><br> 

</BODY>
</HTML>

이 함수의 다른 좋은 점은 이것은 인자형태를 가질수 있는 다른 함수를 생성할때 매우 유용하도록 만들어주는 id문자열이나 요소객체 자체를 던질수 있다는 것이다.

$F() 함수 사용하기

$F() 함수는 다른 단축키이다. 이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 이 함수는 요소 id나 요소객체 자체를 인자로 가질수 있다.

<script>
  function test3()
  {
    alert(  $F('userName')  );
  }
</script>

<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br> 

Try.these() 함수 사용하기

이것은 인자처럼 많은 수의 함수를 가지고 그것들을 순서대로 차례차례 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.

역자주 이 함수는 나열된 함수중 성공하는 함수가 성공적인 결과를 반환할때 종료된다. 이는 브라우저간 지원되는 함수가 상이한 상황에 브라우저를 체크하는 로직없이 함수를 사용할수 있다는 점에서 기존 개발방식에 많은 도움을 주리라 본다.)

예제는 아래와 같다. xmlNode.text는 몇몇 브라우저에서 작동하고 xmlNode.textContent는 다른 브라우저에서 작동한다. Try.these()함수를 사용하면 당신은 작동하는 것중 하나를 반환할수 있다.

<script>
function getXmlNodeValue(xmlNode){
  return Try.these(
    function() {return xmlNode.text;},
    function() {return xmlNode.textContent;)
    );
}
</script>

Ajax 객체

위에서 언급된 유틸리티 함수들은 좋다. 하지만 다시 보자. 그것들은 대부분 고급(advanced) 형태는 아니다. 당신은 스스로 이것들을 만들수 있고 당신 자신만의 스크립트에 유사한 함수를 이미 가지고 있을수도 있다. 하지만 이러한 함수들은 단지 일부분에 해당되는 팁일뿐이다.

나는 prototype.js에 대한 당신의 관심이 대부분의 AJAX기능을 다룰수 있다는 것이라고 확신한다. 그래서 당신이 AJAX로직을 수행할 필요가 있을때 좀더 쉽게 사용하도록 도와주는 라이브러리를 사용하는 방법을 살펴보자.

AJAX객체는 AJAX함수를 작성할 때 포함되는 트릭성격의 코드를 포장하고 단순화하기 위한 라이브러리에 의해 생성된 미리-정의된 객체이다. 이 객체는 캡슐화된 AJAX로직을 제공하는 많은 수의 클래스를 포함한다. 그 클래스중에 몇개를 살펴보자.

Ajax.Request 클래스 사용하기

만약 당신이 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면, 당신은 XMLHttpRequest객체를 생성하기 위한 많은 코드를 작성할 것이고 단계를 비동기적으로 수행할것이다. 그리고나서 응답을 뽑아내고 이것을 처리한다. 그리고나서는 한가지 이상의 브라우저를 지원하지 않는다면 스스로 행운이라고 생각할 것이다.

AJAX기능을 지원하기 위해, 라이브러리는 Ajax.Request클래스를 정의한다.

당신이 다음처럼 XML응답을 반환하는 http://yoursever/app/get_sales?empID=1234&year=1998 url을 통해 서버와 통신할수 있는 애플리케이션을 가지고 있다고 해보자.

<?xml version="1.0" encoding="utf-8" ?> 
<ajax-response>
  <response type="object" id="productDetails">
    <monthly-sales>
      <employee-sales>
        <employee-id>1234</employee-id> 
        <year-month>1998-01</year-month> 
        <sales>$8,115.36</sales> 
      </employee-sales>
      <employee-sales>
        <employee-id>1234</employee-id> 
        <year-month>1998-02</year-month> 
        <sales>$11,147.51</sales> 
      </employee-sales>
    </monthly-sales>
  </response>
</ajax-response>      

XML을 가져오기 위해 서버와 통신하는 것은 Ajax.Request객체를 사용하면 매우 간단하다. 아래의 샘플은 이것을 수행하는 방법을 보여준다.

<script>
  function searchSales()
  {
    var empID = $F('lstEmployees');
    var y = $F('lstYears');
    var url = 'http://yoursever/app/get_sales';
    var pars = 'empID=' + empID + '&year=' + y;
    
    var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onComplete: showResponse} );

  }

  function showResponse(originalRequest)
  {
    //put returned XML in the textarea
    $('result').value = originalRequest.responseText;
  }
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
  <option value="5">Buchanan, Steven</option>
  <option value="8">Callahan, Laura</option>
  <option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
  <option selected="selected" value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

Ajax.Request객체의 생성자의 두번째 파라미터를 알아보겠는가.? {method: 'get', parameters: pars, onComplete: showResponse} 파라미터는 문자적 표기법으로 익명 객체를 나타낸다. 이것이 의미하는 것은 'get' 문자열을 포함하는 명명된 메소드의 프라퍼티, HTTP요청 문자열을 포함하는 명명된 파라미터의 프라퍼티, 그리고 함수 showResponse를 포함하는 onComplete 프라퍼티/메소드를 가지는 객체를 전달한다는 것이다.

당신이 AJAX를 비공기적으로 서버에 호출할지를 결정하고 true나 false값으로 셋팅할수 있는 asynchronous(디폴트 값은 true이다.)와 같은 이 객체내 정의하고 활성화시킬수 있는 다른 프라퍼티가 몇개 있다.

이 파라미터는 AJAX호출을 위한 옵션을 정의한다. 샘플에서, 우리는 HTTP GET명령을 통해 첫번째 인자에서 url을 호출한다. 변수 pars내 포함된 조회문자열(querystring)을 전달하고 Ajax.Request객체는 응답을 받아들이는 작업을 마칠때 showResponse함수를 호출할 것이다.

당신이 아는것처럼, XMLHttpRequest는 HTTP호출을 하는 동안 진행과정을 보고한다. 이 진행과정은 4가지이 단계(Loading, Loaded, Interactive, 또는 Complete)를 알릴수 있다. 당신은 이러한 단계중에서 Ajax.Request객체 호출을 사용자정의 함수로 만들수 있다. Complete는 가장 공통적인 단계이다. 함수를 객체에게 알리기 위해, 우리 예제의 onComplete처럼 요청옵션내 onXXXXX로 명명된 프라퍼티/메소드를 간단히 제공하라. 당신이 전달하는 이 함수는 반환 데이터를 얻기 위해 이 객체를 사용할수 있고 아마도 호출의 HTTP결과 코드를 포함할 상태(status) 프라퍼티를 체크할것이다.

두개의 다른 흥미로운 옵션은 결과를 처리하기 위해 사용될수 있다. 우리는 AJAX호출이 에러없이 수행될때 호출될 함수처럼 onSuccess옵션을 명시할수 있다. onFailure옵션은 서버에러가 발생할때 호출될 함수가 될수 있다. onXXXXX의 선택적인 함수처럼, 이 두가지는 AJAX호출이 옮기는 XMLHttpRequest객체를 전달하도록 호출될수 있을것이다.

우리의 샘플은 주로 사용되는 방법으로 XML응답을 처리하지 않았다. 우리의 방법은 textarea내 XML을 채운 것이다. 응답의 일반적인 사용법은 XML내 원하는 정보를 찾고 몇몇 페이지요소를 수정하거나 페이지내 생성된 HTML에 몇가지의 XSLT변형이 될것이다.

좀더 상세한 complete설명을 위해서는, [Ajax.Request 참조문서]와 [Ajax.options 참조문서]를 보라.

Ajax.Updater 클래스 사용하기

만약 당신이 HTML로 이미 포맷팅된 정보를 반환할수 있는 서버 종료점(endpoint)을 가진다면, 라이브러리는 당신이 Ajax.Updater클래스를 사용하는것을 좀더 쉽게 만들어준다. 이것으로 당신은 어느 요소가 AJAX호출로부터 반환된 HTML을 채우는지 알리게 된다. 예제는 내가 글로 표현하는 것보다 당신을 좀더 쉽게 이해하도록 도와줄것이다.

<script>
  function getHTML()
  {
    var url = 'http://yourserver/app/getSomeHTML';
    var pars = 'someParameter=ABC';

    var myAjax = new Ajax.Updater('placeholder', 
          url, 
          {method: 'get', parameters: pars});
  }
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

당신이 보는것처럼, 코드는 onComplete함수와 생성자에 전달된 요소 id를 제외하고 이전예제에 비해서 매우 간단하다. 클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해 보자.

우리는 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시한다. 이것은 onFailure옵션을 사용하여 수행한다. 우리는 성공적인 작동의 경우에만 활성화될 묶음자(placeholder)를 명시할것이다. 이것을 달성하기 위해, 우리는 간단한 요소 id에서 두개의 프라퍼티(success-모든것이 정상적일때 사용되는, failure-어떤것이 실패일때 사용되는)를 가지는 객체로 첫번째 파라미터를 변경할 것이다. 우리는 예제에서 failure 프라퍼티를 사용하지 않을것이고, onFailure옵션에서 reportError함수를 사용할것이다.

<script>
  function getHTML()
  {
    var url = 'http://yourserver/app/getSomeHTML';
    var pars = 'someParameter=ABC';

    var myAjax = new Ajax.Updater( {success: 'placeholder'}, 
          url, 
          {method: 'get', parameters: pars, onFailure: reportError});
  }

  function reportError(request)
  {
    alert('Sorry. There was an error.');
  }
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
만약 당신의 서버 로직이 HTML마크업 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해, 당신은 객체 생성자의 마지막 인자로 프라퍼티들의 목록을 위해 true인 evalScripts을 간단히 추가한다.

좀더 상세한 complete설명을 위해서는, [Ajax.Request 참조문서]와 [Ajax.options 참조문서]를 보라.

prototype.js 참조[#1]

JavaScript 클래스에 대한 확장

prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 JavaScript클래스를 확장하는 것이다.

Object 클래스를 위한 확장

메소드 종류 인자들 설명
extend(destination, source) static destination: 객체,
source: 객체		 source에서 destination으로 모든 프라퍼티와 메소드를 복사하여 상속을 구현하기 위한 방법을 제공
extend(object) instance 객체 주어진 객체로부터 모든 프라퍼티와 메소드를 복사하여 상속을 구현하기 위한 방법을 제공

Number 클래스를 위한 확장

메소드 종류 인자들 설명
toColorPart() instance (none) 숫자의 16진법 표현을 반환. 색상의 RGB컴포넌트를 HTML표현으로 변환할때 유용

Function 를 위한 확장

메소드 종류 인자들 설명
bind(object) instance object: 메소드를 소유하는 객체 함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 원래의 것과 같은 인자를 가질것이다.
bindAsEventListener(object) instance object: 메소드를 소유하는 객체 함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 이것의 인자로 현재 이벤트 객체를 가질것이다.

실제로 이 확장중 하나를 보자.

<input type=checkbox id=myChk value=1> Test?
<script>
  //declaring the class
  var CheckboxWatcher = Class.create();

  //defining the rest of the class implmentation
  CheckboxWatcher.prototype = {

     initialize: function(chkBox, message) {
      this.chkBox = $(chkBox);
      this.message = message;
      //assigning our method to the event
      this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
     },

     showMessage: function(evt) {
      alert(this.message + ' (' + evt.type + ')');
     }
  };


  var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>

String 클래스를 위한 확장

메소드 종류 인자들 설명
stripTags() instance (none) HTML이나 XML태그가 삭제된 문자열을 반환
escapeHTML() instance (none) HTML마크업 문자들이 escaped된 문자열 반환
unescapeHTML() instance (none) escapeHTML()의 반대

문서 DOM 객체를 위한 확장

메소드 종류 인자들 설명
getElementsByClassName(className) instance className: 요소와 연관된 CSS클래스 이름 주어진 class명과 연관된 모든 요소를 반환

Event 객체를 위한 확장

프라퍼티 타입 설명
KEY_BACKSPACE 숫자 8: 되돌리기(<-) 키를 위한 상수 코드
KEY_TAB 숫자 9: 탭키를 위한 상수코드
KEY_RETURN 숫자 13: 리턴키를 위한 상수코드
KEY_ESC 숫자 27: Esc키를 위한 상수코드
KEY_LEFT 숫자 37: 왼쪽 화살표 키를 위한 상수코드
KEY_UP 숫자 38: 위쪽 화살표 키를 위한 상수코드
KEY_RIGHT 숫자 39: 오른쪽 화살표 키를 위한 상수코드
KEY_DOWN 숫자 40: 아래쪽 화살표 키를 위한 상수코드
KEY_DELETE 숫자 46: Delete키를 위한 상수코드
observers: 배열 캐시된 관찰자(observers)의 목록. 상세한 객체의 내부구현의 일부

메소드 종류 인자들 설명
element(event) static event: 이벤트 객체 이벤트를 일으키는 요소를 반환
isLeftClick(event) static event: 이벤트 객체 마우스 왼쪽 버튼을 클릭시 true값 반환
pointerX(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 x측 좌표값 반환
pointerY(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 y측 좌표값 반환
stop(event) static event: 이벤트 객체 이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
findElement(event, tagName) static event: 이벤트 객체, tagName: 원하는 태그명 DOM트리 위쪽으로 가로지른다. 주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.
observe(element, name, observer, useCapture) static element: 객체 또는 id, name: 이벤트 명 ('click', 'load', 등등과 같은), observer: 이벤트를 다루기 위한 함수, useCapture: 만약 true라면 입력 측면(capture phase)에서 이벤트를 다룬다. 만약 false라면 bubbling 측면(phase)에서 이벤트를 다룬다. 이벤트를 위한 이벤트 핸들러 함수를 추가
stopObserving(element, name, observer, useCapture) static element: 객체 또는 id, name: 이벤트 명 ('click' 처럼), observer: 이벤트를 다루는 함수, useCapture: 만약 true라면 입력 측면(capture phase)에서 이벤트를 다룬다. 만약 false라면 bubbling 측면(phase)에서 이벤트를 다룬다. 이벤트로 부터 이벤트 핸들러를 제거
_observeAndCache(element, name, observer, useCapture) static   Private 속성의 메소드, 이것에 대해서는 걱정하지 말라.
unloadCache() static (none) Private 속성의 메소드, 이것에 대해서는 걱정하지 말라. 메모리로부터 캐시된 모든 관찰자(observers)를 제거

window객체의 이벤트를 로드하기 위한 이벤트 핸들러를 추가하는 이 객체를 사용하는 방법을 보자.

<script>
  Event.observe(window, 'load', showMessage, false);

  function showMessage() {
    alert('Page loaded.');
  }
</script>      

prototype.js에 의해 정의된 새로운 객체와 클래스

라이브러리가 당신을 돕는 다른 방법은 대개 객체 지향 디자인과 공통적인 기능을 둘다 지원하는 많은 객체 구현물을 제공하여 이루어진다.

PeriodicalExecuter 객체

이 객체는 주어진 기간내 주어진 함수를 반복적으로 호출하기 위한 로직을 제공한다.

메소드 종류 인자들 설명
[ctor](callback, interval) constructor callback: 파라미터 성격이 아닌 함수, interval: 초단위 함수를 반복적으로 호출할 이 객체의 하나의 인스턴스를 생성

프라퍼티 타입 설명
callback Function() 호출되기 위한 함수. 이 함수로 전달될 파라미터는 없다.
frequency Number 이것은 수초내 간격으로 실질적으로 작용
currentlyExecuting Boolean 만약 함수 호출이 진행중이라면 표시

Prototype 객체

Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.

프라퍼티 타입 설명
Version String 라이브러리의 버전
emptyFunction Function() 비어있는(empty) 함수 객체

Class 객체

Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다. 클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.

아래의 샘플을 보라.

//declaring the class
var MySampleClass = Class.create();

//defining the rest of the class implmentation
MySampleClass.prototype = {

   initialize: function(message) {
    this.message = message;
   },

   showMessage: function(ajaxResponse) {
      alert(this.message);
   }
};  

//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert

메소드 종류 인자 설명
create(*) instance (any) 새로운 클래스를 위한 생성자를 정의

Ajax 객체

이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root처럼 제공한다.

메소드 종류 인자들 설명
getTransport() instance (none) 새로운 XMLHttpRequest 객체를 반환

Ajax.Base 클래스

이 클래스는 Ajax객체내 정의된 다른 클래스를 위한 기본(base)클래스처럼 사용된다.

메소드 종류 인자들 설명
setOptions(options) instance options: AJAX 옵션 AJAX작업을 위해 필요한 옵션 셋팅
responseIsSuccess() instance (none) 만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환
responseIsFailure() instance (none) responseIsSuccess()의 반대

Ajax.Request 클래스[#2]

Ajax.Base로 부터 상속

AJAX 작업을 캡슐화

프라퍼티 타입 종류 설명
Events Array static AJAX작업중 보고되는 가능한 이벤트/상태의 목록. 목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.
transport XMLHttpRequest instance AJAX작업을 가지는 XMLHttpRequest 객체

메소드 종류 인자들 설명
[ctor](url, options) constructor url: 꺼내기 위한 url, options: AJAX옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성. 중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다. 많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다. 당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.
request(url) instance url: AJAX호출을 위한 url 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 생성자를 호출하는 동안 벌써 호출되었다.
setRequestHeaders() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.
onStateChange() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.
respondToReadyState(readyState) instance readyState: 상태 숫자값 (1 에서 4) 이 메소드는 대개 외부에서 호출되지 않는다. 이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.

옵션 인자 객체[#3]

AJAX작업의 중요한 부분은 옵션 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.

프라퍼티 타입 디폴트 설명
method String 'post' HTTP요청의 메소드
parameters String 요청에 전달한 값들의 url형태의 목록
asynchronous Boolean true AJAX호출이 비동기적으로 만들어지는지 표시
postBody String undefined HTTP POST의 경우 요청의 몸체내 전달되는 내용
requestHeaders Array undefined 요청과 함께 전달되기 위한 HTTP헤더의 목록. 이 목록은 많은 수의 항목을 가져야 한다. 나머지 항목은 사용자 정의 헤더의 이름이다. 그리고 다음의 항목은 헤더의 문자열 값이다. 예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수. 예제 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onSuccess Function(XMLHttpRequest) undefined AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onFailure Function(XMLHttpRequest) undefined AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
insertion Function(Object, String) null 삽입하기 위해 호출되는 함수는 텍스트를 요소로 반환한다. 함수는 수정되기 위한 요소객체와 Ajax.Updater객체에만 적용되는 응답 텍스트의 두개의 인자를 가지고 호출된다.
evalScripts Boolean undefined, false 스크립트 블럭이 응답이 도착했을때 평가할지를 판단. Ajax.Updater객체에만 적용.
decay Number undefined, 1 Ajax.PeriodicalUpdater객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정. 예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다. 이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.

Ajax.Updater 클래스

Ajax.Request로 부터 상속

요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다. 당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다. 스크립트로 작업하기 위해 evalScripts 옵션을 사용하라.

프라퍼티 타입 종류 설명
ScriptFragment String static 스크립트를 확인하기 위해 정규표현식
containers Object instance 이 객체는 두개의 프라퍼티(containers.success 는 AJAX호출이 성공할때 사용될것이다. 그리고 AJAX호출이 실패한다면 containers.failure가 사용될것이다.)를 포함한다.

메소드 종류 인자 설명
[ctor](container, url, options) constructor container: 이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공했을때 사용될 object.success 요소(또는 id), 그리고 AJAX호출이 실패했을때 사용될 object.failure요소(또는 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 객체를 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
updateContent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 응답을 받았을때 객체 자체에 의해 호출된다. 이것은 HTML로 적절한 요소를 수정하거나 insertion옵션내 전달되는 함수를 호출할것이다. 이 함수는 두개의 인자(수정되기 위한 요소와 응답 텍스트)를 가지고 호출될것이다.

Ajax.PeriodicalUpdater 클래스

Ajax.Base로부터 상속

이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater를 체크하라.

프라퍼티 타입 종류 설명
container Object instance 이 값은 Ajax.Updater생성자에 일관적으로 전달될것이다.
url String instance 이 값은 Ajax.Updater의 생성자에 일관적으로 전달될것이다.
frequency Number instance 초단위의 refresh간격. 디폴트는 2초. 이 숫자는 Ajax.Updater 객체를 호출할때 현재 축소(decay)에 의해 곱해질것이다.
decay Number instance 작업을 재-수행할때 적용될 축소(decay)레벨을 유지
updater Ajax.Updater instance 가장 최신에 사용된 Ajax.Updater 객체
timer Object instance 다른 refresh를 위한 시각일때 객체를 알리기 위해 사용되는 자바스크립트 타이머

메소드 종류 인자들 설명
[ctor](container, url, options) constructor container:이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공할때 사용될 object.success 요소(나 id), AJAX호출이 실패할때 사용할 object.failure 요소(나 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성
start() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
stop() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
updateComplete() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 요청을 완성한 후에 사용되는 Ajax.Updater에 의해 호출된다. 이것은 다음 refresh스케줄링 하기 위해 사용된다.
onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
3165 vb 마우스휠 2 아론k 06.24 4009
3164 간단한 windows 스케줄 2 아론k 06.24 2996
3163 한글 영문변환 참고 문자표 2 아론k 06.24 4915
3162 자바 스윙 단축키 설정 2 나야나 05.26 3698
3161 자바 리플렉션 관련 2 나야나 05.26 2945
3160 간단한 sugest 기능 2 kkkkkkk 02.16 3562
3159 유니코드 사용하기 13 김영철 01.29 3213
3158 msxml 사용준비~!(checklist& 설정사항) 13 김영철 01.29 4177
3157 AJAX으로 놀자~ (채팅) 13 김영철 01.29 3316
3156 XML을 해야 하는 이유 13 김영철 01.29 6997
3155 AJAX 강의 2장 - XMLHttpRequest 오브젝트 사용하기 13 김영철 01.29 4839
3154 A Simpler Ajax Path 13 김영철 01.29 3203
3153 [AJAX] 한글지원문제 해결방법 13 김영철 01.29 3217
3152 [팁] XMLHttpRequest를 사용할 때 한글 파라미터의 인코딩 처리 방법 13 김영철 01.29 4409
3151 ServerXMLHTTP의 인코딩 문제 13 김영철 01.29 3722
열람중 prototype.js 13 김영철 01.29 2807
3149 AJAX 관련 새로운 url 정리 13 김영철 01.29 3905
3148 Ajax를 쓰는 이유라고 할까나? 13 김영철 01.29 3153
3147 Ajax [www.atmarkit.co.jp] 13 김영철 01.29 3309
3146 Daum의 Ajax 개발 사례 13 김영철 01.29 4177
3145 AJAX관련 IE 버그. -1072896658 13 김영철 01.29 3359
3144 PHP 설정과 MySQL에 따른 Ajax 사용하기 13 김영철 01.29 3209
3143 mouse wheel 13 김영철 01.29 3072
3142 Ajax 간단한 예제(우편번호검색) 13 김영철 01.29 4018
3141 Prototype활용 (prototype속성) 13 김영철 01.29 2793
3140 [문서] prototype.js v1.4.0 13 김영철 01.29 2926
3139 동적테이블 속성도 복사 13 김영철 01.29 2884
3138 Aqua data studio 한글 깨짐 설정 13 김영철 01.29 9020
3137 삭제페이지 소스 13 김영철 01.29 2840
3136 c강좌 (20) 자기참조 구조체 13 김영철 01.29 3540
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기