dojo Framework part 2.유틸리티 함수

WEB2.0/ajax | 2008. 3. 13. 13:53
Posted by 시반

제 2 장 유틸리티 함수


앞서 말한바 있지만 ajax를 구현하기 위해 prototype을 주로 사용해왔던 터라

주로 $()를 애용해왔는데 dojo에서는 그대로 문자로 표현되는것이 아닌가.

이에 이번장에서는 dojo의 유틸리티 함수들을 살펴보기로 한다

dojo에서는 $()대신 dojo.byId()를 사용한다.

 

언듯 $()에 비하여 불편해보이기도 하는 dojo.byId()는 dojo 개발팀에서도 꽤 오랜 고민과 토론 끝에 내린 결론이라고 하니

어쩌겠는가. 기냥 써야지. 사실 document.getElementById()보다는 짧다. ㅋㅋ

 

* 지정한 id를 가진 DOM node를 검색

* dom
var node = document.getElementById('abc');

* prototype
var node = $('abc');

* dojo
var node = dojo.byId('abc');


 

* 지정한 노드 이름(태그 이름) / CSS 셀렉터를 가진 DOM node들(배열)을 검색

* dom

var nodes = document.getElementsByTagName('div');

* prototype
var nodes = $$('div');
var nodes = $$('.item');
var nodes = $$('#title);
var nodes = $$('div.item');
...

* dojo

var nodes = dojo.query('div');
var nodes = dojo.query('.item');
var nodes = dojo.query('#title');
var nodes = dojo.query('div.item');
...

 

dojo.query()도 prototype이나 jquery와 비슷한 CSS 2.1 셀렉터를 지원한다.

 

prototype에서 $$와 each()의 결합을 많이 쓰는 것처럼, dojo.query()도forEach()와 함께 쓰면 편리하다.

 

'WEB2.0 > ajax' 카테고리의 다른 글

dojo Framework part1.  (0) 2008.03.06
Ajax와 Java EE의 통합  (0) 2006.09.02
Ajax 한글 파라미터 보내기  (0) 2006.07.13
Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
 

dojo Framework part1.

WEB2.0/ajax | 2008. 3. 6. 09:30
Posted by 시반
제 1 장  dojo 를 시작하며

 

몇년전에 ajax란 것을 듣고 사용하기 위해서 좀더 쉽게 쓸수 없을까 하는 생각에 혹 framework는 없을까

당시엔 국내에 관련서적도 없었던 터라 인터넷 검색으로 framework 라고 해서 찾은 것이 prototype 과 dojo 였다.

그때에도 ui적인 측면이 강한 dojo에 흥미를 가졌었지만 느린 속도 때문에  직관적이면서 심플한 prototype 을 애용하게 되었다.

하지만 이클립스 wtp 에서도 dojo 를 지원하더니 이번에 스트럿츠2로 한번 개발해볼까 했더니

지원하는 테마인 ajax가 바로 dojo 가 아닌가

기존에 prototype 으로 만들어논 프레임웍을 스트럿츠2의 테마로 등록하는 방법은 없을까 찾아는 보지만 어째 좀..

이번기회에 다시금 dojo에 익숙해져 보자는 생각에 끄적여본다.

 

dojo이 드뎌 1.0대로 진입을.. 0_0

예전엔 객체 생성하는 방법도 버젼마다 조금씩 달랐었는데 이번버젼엔 어떻게 바뀌었을까나

 

dojo는 홈페이지에서 받던지 다음링크 http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2.zip 에서 파일을 다운 받아서 웹 디렉토리에 적당히 풀고, (그 디렉토리를 js라고 하면) 다음과 같이 쓰고 사용하면 된다.

<script type="text/javascript" src="js/dojo/dojo.js></script>

주의: 할 점은 dojo가 두 번 들어간다는 것이다. dojo폴더 이하에 생긴다는 뜻...

확실히 가볍던 prototype에 비해 왠지 묵진한 느낌의 dojo.  zip파일 로도 약 3.9M 정도니..묵진한건 기분만은 아닌듯

하지만 다른 건 필요없다.

기본기능에 충실한 dojo만을 사용하길 원한다면   AOL developer network 에서 지원하는 dojo framework를 사용해도 된다.

 

아니면 다음링크에서 기냥 받아두 된다.

http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js.uncompressed.js (압축안된 버전)
http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js(압축된 버전)

와우. dojo 가 이리 가볍다니...ㅋ

 

아니면 다음과 같이 사용해도 된다.

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js"></script>

'WEB2.0 > ajax' 카테고리의 다른 글

dojo Framework part 2.유틸리티 함수  (0) 2008.03.13
Ajax와 Java EE의 통합  (0) 2006.09.02
Ajax 한글 파라미터 보내기  (0) 2006.07.13
Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
 

JSON...javascript에 대한 짧은 이야기...

WEB2.0 | 2007. 11. 28. 13:15
Posted by 시반

Hey, I didn't know you could do that

여러분이 개발자이고 나와 같은 길을 걸어 왔다면, 웹페이지에서 꽤 많은 Javascript 조각들을 사용해 왔을 것이다. 마치 UI의 딱풀 마냥..

최근까지 나는 Javascript가 내가 취업 했을 때보다 더 객체지향(OO_ 능력을 가졌다고는 하지만 난 별로 그것을 사용해야하는 느낌은 받지 못했다. 브라우져들이 Javascript와 DOM의 좀더 표준화된 형상을 지원하기 시작함에 따라, client 상에서 구동하기 위한 더 복잡하고 기능적인 코드를 작성하 것이 가능해졌다. 그것은 AJAX 사상(事象)을 탄생하도록 도왔다.

우리 모두가 AJAX 애플리케이션을 만들기위해 코드를 작성하는 것을 것을 배울 즈음해서, 우리가 알고있었던 Javascript는 정말 빙산의 일각에 불과했다. 자, 이제 우리는 입력값 검사와 하찮은 업무들과 같은 간단한 UI 허드렛일들을 넘어서 사용되고 있는 Javascript을 살펴 볼 것이다. 요즘, client 상의 코드는 점점 더 진보적이고 계층화되며, 더 많이 실제 데스크탑 애플리케이션 또는 c/s환경의 무거운 client 처럼 되어 가고 있다. 우리는 class library, object model, hierarchy, pattern 들 그리고 단지 우리의 server 쪽 코드에서 눈에 익었던 다른 많은 것들을 알아 볼 것이다.

여러가지면에서 우리는 갑작스레 화면의 bar를 전보다 훨씬 높게 놓는것에 대해 얘기 할수 있다. 새로운 WEB을 위해 애플리케이션들을 작성하기 위해서는 훨씬 강도높은 기술의 숙달을 필요로 한다. 그리고 우리는 이 목적을 이루기 위해서 우리 자신의 Javascript 기술들을 향상시켜야만 한다. 만일 외부에 존재하는 많은 javascript library를 사용하기를 시도한다면, Prototype.js, Scriptaculous, moo.fx, Behaviour, YUI, 등등 처럼, 여러분은 결국 그 JS code를 여러분 스스로 판독해서 알아야 할것이다. 아마 여러분은 라이브러리들이 그것을 구현하는 방법을 배우기 원하거나 알기 원하거나 해서, 또는 라이브러리가 사용법을 이해하기 위한 유일한 방법이거나 해서, 문서가 대부분의 라이브러리들과 관련되어 있어 보이지 않거나 해서..( Maybe because you want to learn how they do it, or because you're curious, or more often because that's the only way to figure out how to use it, since documentation does not seem to be highly regarded with most of these libraries. 아마도 이유인즉 그것들이 어떻게 동작하지 배우고 싶기 때문이거나, 호기심 때문이거나, 종종 이 라이브러리들의 대부분이 문서화가 덜 되어있기 때문에, 사용법을 알기 위한 유일한 방법이 그것밖에 없기 때문일 것이다. ) 그 밖에 무엇이든지 그 경우에 있어서, 전에 그것과 같은 어떠한 것들을 본적이 없다면 여러분은 낯설고 두려운 상황에 직면하게 될 것이다.

이 글의 목적은 아직 익숙하지 않은 생성자들의 타입들을 꼼꼼히 설명함에 있다.

Related article

Prototype.js documentation

JSON

JavaScript Object Notation (JSON,)은 AJAX 테마와 관련하여 갑자기 뜬 새로운 기술 용어 중 하나이다. JSON은 javascript에서 선언적 object의 하나의 방식이다. 이제 바로 예제를 보고 어떻게 처리하는지 보도록 하자. 

var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){ 
for(i=0;i<repeatCount;i++) alert('Woof!');} };

자, 소스 포맷을 약간 추가 해서 알아 보기 쉽게 보도록 하자: 

var myPet = {
	color: 'black', 
	legCount: 4, 
	communicate: function(repeatCount){
		for(i=0;i<repeatCount;i++)
			alert('Woof!');
	} 
};

여기서 우리는 두개의 속성들(color 과 legCount)과 메서드(communicate)를 이용하여 object 참조를 만들었다. 콤마로 구분된 리스트로서 object의 속성들과 메소드들을 정의되어있는것을 이해하는것은 어렵지 않은 일이다. 각 구성들을 name으로 정의되어 보여지며 colon(:) 따라오서 그 다음으로 정의부 이다. 속성의 경우에서는 단지 값으로 정의부를 채운다. 익명 함수(anonymous function)을 할당으로 메소드들을 만든다. 이는 다음 아래 줄에서 더 자세히 설명할 것이다. object를 만든 후에 myPet 변수에 할당하며, 우리는 다음과 같이 이 변수를 사용 할수 있다: 

alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);

여러분은 요즘 JS에서 도처에 사용되어진 JSON을 볼 것이다. 함수들에 인수, 리턴 값들, 서버의 응답들(string들 에서) etc.

What do you mean? A function is an object too?

이는 위 질문에 대해 생각해 본적 없는 개발자들에게는 좀 생소 할 것이지만 JS에서 함수(function) 또한 object이다. 예를 들어, string을 처리하는 다른 함수에 인자로서 함수를 처리 할 수 있다. 이는 광범위하게 사용되어지고 매우 유용하다.

이 예제를 보도록 하자. 우리는 다른 함수(annoyThePet)에 함수들(myDog.bark, myCat.meow)을 인자로 주어 줄 것이다. annoyThePet function에서 인자로 주어진 function을 사용 할 것이다. 

var myDog = {
	bark: function(){
		alert('Woof!');
	}
};

var myCat = {
	meow: function(){
		alert('I am a lazy cat. I will not meow for you.');
	}
};
 
function annoyThePet(petFunction){
	//let's see what the pet can do
	petFunction();
}

//annoy the dog:
annoyThePet(myDog.bark);
//annoy the cat:
annoyThePet(myCat.meow);

우리가 myDog.bark 과 myCat.meow에 추가도니 괄호 "()" 없이 인자로 사용한 것에 대하여 주목 해야 한다. 만일 우리가 인수로 넘긴 function이 존재 하지 않거나 method를 호출하고 return value를 인수로 넘긴다면, 두 경우에 대해 undefined를 보일 것이다.

여러분이 나의 게으른 고양이가 개 처럼 짖게 만들기 원한다면, 여러분은 이처럼 쉽게 할 수 있다: 

myCat.meow = myDog.bark;
myCat.meow(); //alerts 'Woof!'

Arrays, items, and object members

다음 JS안에 두 줄은 같은 일을 한다. 

var a = new Array();
var b = [];

나는 여러분이 이미 알고 있는 대로, 여러분은 사각 괄호를 사용하여 array안의 각각의 아이템들을 접근 할 수 있다: 

var a = ['first', 'second', 'third'];
var v1 = a[0];
var v2 = a[1];
var v3 = a[2];

하지만 여러분들을 숫자 색인으로만 접근 제한하지 않는다. 여러분은 string으로 멤버의 이름을 사용하여 JS object 각 멤버들을 접근 할 수 있다. 다음 예제는 빈 object를 만들고 name으로서 어떤 멤버들을 추가한다. 

var obj = {}; //new, empty object
obj['member_1'] = 'this is the member value';
obj['flag_2'] = false;
obj['some_function'] = function(){ /* do something */};

위의 코드는 아래와 같이 동일한 효과를 가진다: 

var obj = {
	member_1:'this is the member value',
	flag_2: false,
	some_function: function(){ /* do something */}
};

다양한 방법으로, JS에서 object들의 사상과 연관 arraray(hashes)들은 구별 하지 않는다. 다음 두 줄 역시 같은 일을 한다. 

obj.some_function();
obj['some_function']();

Enough about objects, may I have a class now?

OOP 프로그래밍 언어들의 강력한 힘은 class들의 사용에서 나온다. JS에서 나는 어떻게 class들을 정의하는지 나의 이전 경험으로 비춰볼때 짐작초차 하기 어렵다. 직접 판단하시오. 

//defining a new class called Pet
var Pet = function(petName, age){
	this.name = petName;
	this.age = age;
};

//let's create an object of the Pet class
var famousDog = new Pet('Santa\'s Little Helper', 15);
alert('This pet is called ' + famousDog.name);

우리의 Pet class에 method를 추가 하는 방법을 보도록 하자. 우리는 모든 class들이 가지고 있는 prototype property를 사용하게 될 것이다. prototype property는 class의 어떠한 object가 가지고 있을 모든 멤버들을 포함하는 object이다. String, Number, and Date 같은 default JS class들 조차도 prototype object을 가지고 있다. 우리는 method들과 property들을 prototype object에 추가 할 수 있다. 그 class의 어떠한 object가 이 새로운 멤버를 자동으로 얻는다. 

Pet.prototype.communicate = function(){ 
	alert('I do not know what I should say, but my name is ' + this.name);
};

prototype.js과 같은 라이브러리는 여러모로 편리할 때가 있다. 만일 우리가 prototype.js를 사용한다면, 우리의 코드를 깔끔하게 할 수 있다.(적어도 내 견해로는..) 

var Pet = Class.create();
Pet.prototype = {
	//our 'constructor'
	initialize: function(petName, age){
		this.name = petName;
		this.age = age;
	},
	
	communicate: function(){
		alert('I do not know what I should say, but my name is ' + this.name);
	}
};

Functions as arguments, an interesting pattern

만일 여러분이 클로져(절차를 오브젝트로서 취급하는 기능. 이 오브젝트화 된 절차를 클로져라함)를 지원하는 언어들 - Ruby 또는 C#2.0- 을 이용하여 작업한 적이 없다면 여러분은 다음 이디엄이 매우 생소하다는것을 느낄 것이다. 

var myArray = ['first', 'second', 'third'];
myArray.each( function(item, index){
	alert('The item in the position #' + index + ' is:' + item);
});

워~! 내가 너무 앞어서 여러분이 이것보다 더 좋은 기사를 찾아 보기 전에 여기 무슨 일이 생겼는지 설명한다.

무엇보다 먼저, 위 예제에서 우리는 prototype.js library를 사용하고 있다. 이것은 Array class에 each function을 추가한다. each function은 function object을 하나의 인자를 받는다. 차례로, array에서 각 item에 대해 이 function을 한번씩 호출 할 것이며, 호출될때 두개의 인자를 전달한다. 현재 item에 대한 그 item과 index 이다. 자 우리의 iterator function을 호출 해보자. 또한 우리는 이것과 같은 작성된 코드를 작성할 수 있다. 

function myIterator(item, index){
	alert('The item in the position #' + index + ' is:' + item);
}

var myArray = ['first', 'second', 'third'];
myArray.each( myIterator );

비록, 이 마지막 포맷이 이해하기에 더 편하지만 myIterator function을 찾는 코드에서 주변으로 튀어 버리는 현상을 야기한다. myIterator를 호출하는 같은 장소에서 iterator function의 로직을 가지는것이 좋다. 또한, 이경우에, 우리의 코드에서 어디 다른 곳에 iterator function를 필요로 하지 않을 것이며, 그래서 우리는 문제없이 myIterator function을 anonymous function로 할 수 있다.

원래의 예제를 더 분명하게 하기 위해서 어떤 하이라이팅 효과를 이용해서 다시 보자. 

				
var myArray = ['first', 'second', 'third'];
myArray.each( function(item, index){
	alert('The item in the position #' + index + ' is:' + item);
} );

This is this but sometimes this is also that

우리가 가지고 있는 가장 일반적인 문제들 가운데 하나는 JS를 이용함에 있어서 this 키워드의 사용을 우리의 코드에 작성하기 시작할 때 이다. 그것은 실제 올가미가 될수 있다.

우리가 전에 언급한 것 처럼, 함수 또한 JS에서 object이고 때때로 우리는 function를 전달한 것을 알아 채지 못한다.

예제로 이 코드 조각으로 다뤄 보자. 

function buttonClicked(){
	alert('button ' + this.id + ' was clicked');
}

var myButton = document.getElementById('someButtonID');
var myButton2 = document.getElementById('someOtherButtonID');
myButton.onclick = buttonClicked;
myButton2.onclick = buttonClicked;

buttonClicked function를 어떠한 object 외부에서 정의 하였기 때문에 우리는 this 키워드가 window 또는 document object 참조를 포함 할 것이라고 생각하는 경향이 있을 것이다.(이코드 브라우저에서 보여지는 HTML 페이지의 중앙에 있다고 가정 하자.)

그러나 우리가 이 코드를 실행시켜 보면 그것이 클릭된 버튼의 id를 가리키거나 보여지는 것으로 작동되어 보여진다. 각 버튼의 onclick method은 buttonClicked object 참조를 포함하게 되며, 이전의 거기에 무엇이 있던간에 교체되어 진다. 버튼을 클릭할때 마다, 브라우저는 다음 줄과 같은 어떤 일을 수행할 것이다. 

myButton.onclick();

결국 그렇게 혼란스러운것은 아니다. 그렇죠? 그러나 여러분이 다뤄야할 다른 object를 갖기 시작했고 버튼의 click과 같은 이벤트에서 이러한 object를 반응시키기 원한다. 

var myHelper = {
	
	formFields: [ ],
	
	emptyAllFields: function(){
		for(i=0; i<this.formFields.length; i++){
			var elementID = this.formFields[i];
			var field = document.getElementById(elementID);
			field.value = '';
		}
	}
};

//tell which form fields we want to work with
myHelper.formFields.push('txtName');
myHelper.formFields.push('txtEmail');
myHelper.formFields.push('txtAddress');

//clearing the text boxes:
myHelper.emptyAllFields();

var clearButton = document.getElementById('btnClear');
clearButton.onclick = myHelper.emptyAllFields;

나의 페이지에서 Clear button을 클릭 할수 있고 이 3개의 text 박스들을 모두 비울 것이다. 그 다음에 여러분은 runtime error를 얻기 위해 단지 버튼 클릭만 시도하면 된다. 이 에러는 this 키워드와 관련 있을 것이다(추측 컨데..). 이 문제는 this가 버튼에 참조를 포함한다면 this.formFields가 정의 되지 않는다 것이다. 이것은 정확하게 무슨 일이 발생 하겠는가 이다. 한가지 빠른 해결책은 우리의 코드 마지막 줄을 재 작성하는 것이 될 것이다. 

clearButton.onclick = function(){ myHelper.emptyAllFields(); };

그것은 우리가 helper object의 컨텍스트 안에 우리의 helper method를 호출하는 특정의 타입의 새로운 function을 만드는 방법이다.

'WEB2.0' 카테고리의 다른 글

고급 자바스크립트 활용 II  (0) 2008.04.02
고급 자바스크립트 활용Ⅰ-Ⅰ  (0) 2008.04.02
[액티브X 대체기술 5부] - MS가 내놓은 액티브X 컨트롤의 대안 실버라이트 활용법  (0) 2007.09.27
[액티브X 대체기술 4부] - 액티브X를 뛰어넘는 기능과 호환성 XPCOM 개발 테크닉  (0) 2007.09.27
[액티브X 대체기술 3부] - Ajax를 이용한 UI개발  (0) 2007.09.27
 

웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

WEB2.0 | 2007. 1. 18. 10:57
Posted by 시반

웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

 

사용자 경험을 중요시하는 서비스 플랫폼 '웹 2.0'이 새로운 기술 트렌드로 주목되면서 동적인 유저 인터페이스가 보다 중요해지고 있습니다. 이 중심에 가장 대표적인 웹 애플리케이션 기술인 Flex와 Ajax가 있습니다. 언뜻 보면 경쟁관계에 있는 듯한 이 두 기술은 최근 구글 등을 통해 성공적으로 결합된 서비스가 소개되면서 특히 주목받고 있습니다. Flex와 Ajax가 갖는 기술 특징과 두 기술의 결합이 갖는 의미 등을 짚어봤습니다.

월드와이드웹은 하이퍼 링크 구조를 기반으로 하는 문서 형태의 정보 표현을 위해 출발하였습니다. 초창기 웹은 매우 정적이었고 사용자와의 상호작용(interaction)은 특정 주소의 문서를 읽고 쓰는 정도에 머물고 있었습니다. 정적 웹 구조에서 양식(Form)을 통해 사용자의 정보를 읽고 쓰는 CGI 기술의 탄생과 브라우저 전쟁 기간 중에 일어난 기술 혁신은 웹을 소프트웨어로 인식할 수 있는 발상의 전환을 가져왔습니다.

1995년 넷스케이프가 웹 브라우저와 외부 프로그램과의 통신에 보다 동적인 인터넷 경험을 제공하기 위해 플러그인(Plugin) 기술을 선보였습니다. 임베딩을 기본으로 하는 웹 S/W 플랫폼을 장악한 것은 ActiveX나 NSPlugin이 아닌 이들 위에서 브라우저 독립성과 개발 편의성을 동시에 보장해 준 플래시(Flash)였습니다. 플래시는 풍부한 유저 인터페이스를 선보였고 웹의 정적인 면을 보강해 주는 최적의 솔루션으로 인정받았다. 하지만 웹의 근본 속성을 제대로 반영해 주지는 못했습니다. DHTML이라는 기술이 반짝 인기를 끌었지만 2000년대 중반까지 이렇다 할 웹 기술의 혁신은 이뤄지지 않았습니다.

닷컴 거품 이후에 성공한 비즈니스 모델인 아마존, 구글, 이베이 등을 중심으로 사용자가 만든 정보라는 매개체를 활용해 이를 자유롭게 이용할 수 있는 서비스 플랫폼이 각광받기 시작했으며 이러한 특징을 웹2.0이라고 명명하면서 기술적 붐업이 시작되었습니다. 특히 플랫폼으로서 웹은 웹 자체를 서비스 혹은 S/W로 인식하게 함으로써 점점 데스크톱과 인터넷의 경계가 사라지게 하고 있습니다. 따라서 웹의 어플리케이션을 사용하는 사람들을 위해 동적인 유저 인터페이스가 점점 더 중요해지면서 여기에 따르는 다양한 기술 역시 수면 위에 떠 오르고 있습니다.  이것이 바로 웹 애플리케이션 기술입니다.

웹2.0의 첨병, Flex와 Ajax

웹 애플리케이션의 최전선에 있는 기술이 바로 Ajax입니다. Ajax(Asynchronous JavaScript and XML)는 대화식 웹 어플리케이션의 제작을 위해 다양한 기술 조합을 이용하는 웹 개발 기법이자 트렌드입니다. 이 기술은 Google이 Gmail과 Google Maps를 만들면서 널리 알려졌습니다. 사실 이 기술은 과거 DHTML이나 Remote Scripting이라고 불리는 동적 웹 개발 방식과 크게 다르지 않습니다. 그러나 여기에 좀 더 다른 몇 가지 특징이 있습니다.

데이터 표현 정보를 위한 HTML(또는 XHTML)과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바 스크립트 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest 등을 사용합니다. 이 기술은 거의 웹 표준에 준하는 기술 방식만을 사용해 만들어졌습니다. 따라서 브라우저나 운영 체제에 관계없이 동작합니다.

여기 또 하나의 대안인 Flex가 있습니다. Flex는 기존의 Flash라는 플러그인 플랫폼을 무기로 Adobe에서 야심차게 개발한 서버와 클라이언트의 중간 개념인 미들티어(middle-Tier) 플랫폼입니다. Flex는 리치 인터넷 어플리케이션(RIA)나 온라인 프리젠테이션을 쉽고 간단하게 만들고자 하는 서버 쪽 개발자를 위한 맞춤복 같은 솔루션입니다.

Flex는 웹 표준에 기반한 ActionScript와 MXML(XML) 및 DOM3를 사용하므로 기존 자바스크립트 개발자나 ASP/JSP 등의 서버 개발자가 Flash를 사용하지 않고도 화면 구성을 제어할 수 있습니다. Flash는 그 스스로 웹 표준은 아니지만 웹 브라우저와 운영 체제에 종속적이지 않는 개발 플랫폼을 제공하고 있다는 점에서 중요한 기술 중 하나입니다.

특히 Flex는 Ajax가 가지고 있는 비동기 XML 통신 및 스크립트 핸들링의 기능을 그대로 보유하면서도 다양한 기능을 가진 Flash의 미려한 유저 인터페이스를 그대로 사용할 수 있다는 점에서 매우 뛰어난 플랫폼이라 할 수 있습니다. Ajax가 기술 트렌드이기 때문에 가지는 한계점, 즉 통합 개발 도구(IDE)의 남발 혹은 낮은 완성도에 비하면 Flex는 개발 비용 절감 및 편리성 강화에서 좋은 점수를 얻고 있습니다.

Flex와 Ajax, 공존 가능한가?

Flex와 Ajax는 사용되는 기술 스펙이나 구조 및 개발 방법론 등 많은 부분에서 닮아 있습니다. Flex의 장점이라고 할 수 있는 풍부한 UI는 결국 Flash의 장점인데 이것은 또한 바이너리 형식이라는 점에서 Ajax에 비해 상호 운용성 측면의 제약을 갖는다는 단점이 있습니다. Flash는 멀티미디어 데이터를 압축 저장하는 목표로 만들어진 것이기 때문에 웹 상의 정보 표현이라는 기본 목표에 충실하기는 어렵습니다. 이에 반해 Ajax는 웹 상에서 사용자 경험을 한층 높여 주면서도 웹 표준에 입각한 데이터 교환 및 문서 내 데이터를 쉽게 사용할 수 있는 장점을 가지고 있습니다. 물론 Flex 만큼의 강력한 인터페이스를 제공하기는 어렵습니다.

이러한 서로의 장단점을 보완해 주는 서비스들이 계속 나오고 있습니다. 이러한 방법론의 물꼬를 튼 것이 바로 MeasureMap입니다. Measuremap.com은 유명한 웹 디자이너인 제프리 빈이 만든 블로그 통계 서비스입니다.

이 서비스를 보면 특정 블로그를 방문한 통계 수치들을 웹에서 보여주는데 이 때 미려한 UI를 가진 Flash에서 선택한 조건에 따라 웹 페이지를 로딩해 눕니다. 즉 차트나 다이어그램 같은 것은 Flash를 쓰고 기타 통계 수치는 웹 페이지로 제공해 주는 것입니다. Measuremap은 아이디어의 우수성 때문에 Google에 인수되었습니다.

그림 1. Ajax와 Flash가 적절히 조화된 최초의 웹 서비스 MeasureMap. 차트와 웹 페이지 데이터가 상호 연동됩니다.

Google은 Flex와 Ajax를 조합한 새로운 서비스를 내 놓았는데 바로 Google Finance입니다. 이 서비스에서는 구글 뉴스, 구글 그룹스, 블로그 검색, 웹 검색을 비롯해서 AMEX와 NYSE 주가 데이터, 로이터의 상장사 데이터 등을 종합적이고 유기적으로 보여주는 간결하면서도 직관적인 인터페이스를 구현했습니다. 특히 Flash로 제공되는 차트에서 드래그앤드랍과 시간별 스크롤링 기능이 제공되고 이에 맞는 필터링 된 뉴스 기사를 오른쪽에 보여주는 방법을 사용합니다. 뿐만 아니라 관련 기사나 인물 정보를 표현할 때도 상세 정보를 Ajax와 DOM Scripting을 적절히 이용해서 보여 주고 있습니다.

그림 2. Google Finance 화면. Flash 차트를 선택하면 Ajax로 데이터를 가져온다. 웹 데이터를 선택해도 Flash 차트에 표시됩니다.

실제 이러한 사례들이 Flex만 혹은 Ajax만 쓰는 서비스에 비해 훨씬 고객 만족도가 높습니다. 이러한 흐름 때문인지 Flex 2에서는 Ajax의 연동을 공식 지원하고 있으며, 이를 장점으로 내세우고 있습니다. 특히 얼마 전 Adobe Labs에서 공개한 FABridge(Flex AJAX Bridge)와 ACFDS(AJAX Client for Flex Data Services) 등의 오픈 기술은 주목할 만합니다. FABridge는 Flex와 Ajax를 연동할 수 있는 오픈소스 프레임워크로, 간단한 자바스크립트로 액션스크립트 객체 조정이 가능하며 오픈API 방식으로 FABridge 사이트에 공개돼 있습니다.

ACFDS는 Ajax에서 새로 나올 Flex 2.0이 제공하는 데이터 서비스를 조정할 수 있도록 하는 기술로서 Ajax에서는 다소 어려운 메시징 서비스나 실시간 데이터 스트리밍 등의 서비스를 Ajax에서 쉽게 불러서 쓸 수 있습니다.

기술 선택의 요건 1순위 '미래 지향성'

현재 다양한 웹 애플리케이션 기술이 나와 있습니다. 기술을 선택할 때 가장 중요시 해야 되는 것은 바로 사용자 접근성입니다. 웹 브라우저 지원 범위와 운영 체제, 기타 디바이스 지원에 대한 것을 따지는 것이 중요합니다. 그 다음으로 드래그앤드롭, 자동 저장 등 풍부한 UI 경험 제공 여부도 빼 놓을 수 없습니다.

특히 웹 브라우저 기능과 연관성(Back/Forward, History 동작 여부), 유지 보수 용이성, 프로그램 수행에 대한 지표들 즉, 다운로드 크기 및 수행 속도, 통신 방법, 서버 데이터에 대한 UI 변경 방법 등도 고려할 요소입니다. 개발에 있어서 손쉬운 플랫폼을 사용하는지, 통합 개발 도구(IDE)가 있는지도 고려 해야 합니다.

무엇보다 가장 중요한 것은 미래 지향성입니다. 독특한 기능적 특징뿐만 아니라 향후 표준으로서 가능성이 있는가 하는 점입니다. 이런 점에서 Ajax와 Flex는 웹 서비스 회사 및 SOA를 제공하는 기업에서 가장 각광 받는 대안입니다. 특히 이들 둘은 서로의 장단점을 보완해 줄 수 있고 결합해서 사용되었을 때 강력한 시너지를 냅니다.

웹 2.0의 경험적 요소 중에는 웹을 더욱 동적으로 만들고 풍부한 UI를 선보이고 있다는 특징이 있습니다. 이것은 자사의 웹 서비스와 데스크톱 애플리케이션과의 경계를 모호하게 해서 웹 S/W나 애플리케이션으로 진화하도록 해 플랫폼 효과를 누리고자 하기 때문입니다. 웹의 근본 속성을 지키면서 이러한 목적을 달성할 수 있는 현재 최적의 조합은 Flex와 Ajax라고 볼 수 있습니다. 이들은 현재 웹의 문서 구조와 쉽게 연결될 뿐만 아니라 실제 많이 닮아 있기 때문입니다.

 

------------------------------------------------------------------------------------

출처 : 웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

저자소개

윤석찬은 (주)다음커뮤니케이션 R&D센터에 근무중이며 한국 모질라 커뮤니티(www.mozilla.or.kr) 리더로 파이어폭스 개발에 관여해 왔다. 오픈 소스, 웹 표준 관련 활동을 지속적으로 해 왔기 때문에 최근 부각되는 웹2.0과 웹 어플리케이션 기술에 대한 관심 또한 높다. ZDNet 컬럼니스트로 활동하고 있으며 개인 블로그(http://channy.creation.net/blog)를 운영하고 있다.

'WEB2.0' 카테고리의 다른 글

[액티브X 대체기술 1부] - 백조에서 미운오리로 전략한 액티브X의 문제와 해결방안  (0) 2007.09.27
웹표준코딩의 장점 Table for layout과 CSS layout의 비교실험  (0) 2007.05.09
개발자의 새로운 키, 웹2.0  (0) 2006.08.25
HTML의 미래, Part 1: WHATWG  (0) 2006.06.02
[웹 2.0은 없다] 오래된 미래 이야기  (0) 2006.05.08
 

Ajax와 Java EE의 통합

WEB2.0/ajax | 2006. 9. 2. 23:09
Posted by 시반

비동기식 통신 모델과 동기식 통신 모델을 효과적으로 혼합하기

 

난이도 : 초급

Patrick Gan, Senior IT Specialist, Application Innovation Services Center of Excellence, IBM

2006 년 8 월 18 일

IT 전문가 Patrick Gan이 Ajax 기술을 Java™ EE 웹 애플리케이션에 적용할 때 전체적인 개발 과정 속에서 발생할 수 있는 문제들을 점검합니다. 패턴에 기반하고 있는 Ajax의 비동기식 통신을 채택할 때의 문제들을 파악하는 것이 효과적인 Ajax 통합의 지름길입니다.

Asynchronous JavaScript + XML (Ajax)은 매우 새로운 기술이다. Java EE 커뮤니티를 비롯한 많은 웹 개발 커뮤니티에서 이에 대한 많은 소문들이 만들어지고 있다. Ajax 기술은 과도한 웹 페이지 리프레쉬를 줄임으로서 애플리케이션 가용성을 향상시키고 있다. 그리고 Ajax의 best-of-both-worlds 접근 방식은 클라이언트 측 코드와 서버 측 코드를 활용하여 웹 사용자에게 거의 완벽한 UI를 제공하고자 한다. Ajax는 웹의 부활(Web 2.0)에 있어 핵심 인에이블러로서 간주되고 있다.

부지런한 Java EE 개발자라면 아마도 Ajax에 대한 많은 하우투 문서를 섭렵하고 이것이 여러분의 애플리케이션에 가져올 향상에 대해서도 기대했을지 모른다. 하지만 어떻게 Ajax의 비동기식 통신 기반 패턴이 Java EE 애플리케이션에 맞을까? 이 글에서는 Java EE 애플리케이션의 디자인, 개발, 퍼포먼스, 테스팅에 Ajax를 채택했을 때 미치는 영향을 검토하여 해결책을 모색하고자 한다. 이렇게 하는 이유는 Ajax 사용을 금하려는 것이 아니라, 오히려 Ajax를 효과적으로 사용할 수 있도록 문제들을 해결하려는 것이다.

디자인 문제점

자바 커뮤니티는 좋은 디자인 패턴들을 웹 관련 애플리케이션 개발에 적용하려고 부단히도 애썼다. 가장 광범위하게 사용되는 패턴들 중 하나가 Model-View-Controller (MVC)이다. Apache Struts 같은 여러 오픈 소스 프레임웍들은 이러한 디자인 패턴/아키텍처에 기반하고 있다. (참고자료) MVC의 많은 장점들 중에는 관심의 분리(separation of concerns)와 과잉 코드의 감소를 들 수 있다.

관심의 분리를 통해, 애플리케이션 아키텍처에서 사전에 협상된 인터페이스를 사용하면서 각 개발자는 애플리케이션 개발 프로젝트에서 지정된 역할에만 집중할 수 있다. 예를 들어, 모델-레이어 개발자들은 JDBC, Enterprise JavaBeans (EJB), 데이터 영속성 기술과 관련 있는 자바 클래스 같은 기술에 초점을 맞춘다. 뷰-레이어 개발자들은 JavaServer Pages (JSP), 태그 라이브러리, 기타 표현 관련 기술에 초점을 맞춘다. 컨트롤러 레이어는 모델과 뷰 사이를 구분 및 중재하고 인커밍 요청들을 백엔드 호출로 라우팅 하면서 관심들을 깨끗하게 분리한다. 그림 1은 MVC 아키텍처 모습이다.


그림 1. MVC 아키텍처


Ajax를 Java EE 웹 애플리케이션에 도입하는 것에는 관심의 분리라는 의미가 내포되어 있다. (따라서 개발자 역할도 분리된다.) 어떤 경우, Ajax는 많은 양의 JavaScript 코드를 뷰-레이어(JSP) 페이지에 도입한다. 표 1은 Ajax가 적용되지 않은 MVC 뷰 레이어와 필요한 코드를 설명한다. 컨트롤러 레이어는 서블릿으로 구현되고 뷰 레이어는 JSP로 구현된 것으로 간주된다. (다음 개발 딜레마 처리하기 섹션에서는 동기식 요청과 비동기식 요청간 차이점을 설명하겠다.)


표 1. Ajax가 적용되지 않은 MVC: 전형적인 뷰-레이어 시퀀스와 관련된 코드 분량

 시퀀스  설명  필요한코드
 동기식 요청을 실행하기 전  폼(form) 제출을 준비할 때 스크립틀릿 코드가 필요하다  없음.
 동기식 요청 실행  폼 제출은 버튼이나 링크를 통해 실행된다. DOM 엘리먼트 값은 ( GET 또는 POST를 통해) HttpRequest로 자동 설정된다  없음: 필요한 것은 페이지를 제출하는 방식이다.
 동기식 요청에 대한 응답 처리하기  서버 측 코드가 실행을 완료하면 객체는 (HttpRequest를 통해서나 HttpSession에 저장되어) JSP로 보내진다. 이 시점에서 객체들은 HttpRequest 또는 HttpSession을 통해 JSP에 액세스 되고(스크립틀릿이나 태그 라이브러리 사용), 객체 콘텐츠를 디스플레이 하는데 최소한의 스크립팅이 요구된다.  있음: 최소한의 스크립틀릿

Ajax를 이용한 MVC 뷰 레이어를 나타내는 표 2와 표 1을 비교해보자. 여기에서도 마찬가지로 컨트롤러 레이어는 서블릿에 의해 구현되고 뷰 레이어는 JSP로 구현된다.


표 2. Ajax를 이용한 MVC: 전형적인 뷰-레이어 시퀀스와 관련된 코드

 시퀀스  설명  필요 코드
 비동기식  요청실행전  Ajax 호출에 필요한 DOM 엘리먼트의 값을 가져오는데 JavaScript 코드가 필요하다.  있음
 비동기식 요청 실행  XMLHTTPReqest를 만들고 (이전에 모은) DOM 엘리먼트의 값을 연결시키고 보내는데 (XMLHTTPRequest.send()) JavaScript 코드가 필요하다.  있음
 비동기식 요청 응답처리  서버 측 코드가 실행을 끝낸 후에 JavaScript 코드는 (XML 응답 스트림에서) 결과를 가져와서 해당 DOM 엘리먼트에 따라서 값을 전파한다  있음

Ajax를 사용하면서 뷰 레이어에서의 스크립팅 코드의 양이 증가하는 것을 볼 수 있다. 세 가지 큰 단점이 있다.

  • JSP는 많은 JavaScript 코드를 필요로 한다.
  • 디자인은 역할 영역의 분리를 무시한다.
  • 디자인이 통합된 monolithic JSP (Model 1 접근 방식: 많은 HTML, CSS 코드, 이미지, 스크립팅 코드)를 사용한다. 이는 읽고 관리하기가 매우 까다로운 반패턴이다. (참고자료)

이러한 디자인 상의 단점을 피하거나 최소한 완화시킬 수 있는 여러 옵션들이 있다:

  • 재사용을 고려한 디자인: Ajax의 스크립팅 코드는 피하기 힘들다. 스크립팅 코드를 기획 및 설계하여 최대한 재사용할 수 있도록 한다.

  • 클라이언트 측에 MVC 방식 채택: 클라이언트 측에 MVC 방식 (Ajax in Action - 참고자료)을 사용할 수 있다. 이 방식은 관심의 분리 측면에서는 효과를 거둘 수 있지만 복잡해 질 수 있기 때문에 충분히 고려해야 한다.

  • Ajax 프레임웍 사용: Direct Web Remoting (DWR)(참고자료) 같은 여러 오픈 소스 Ajax 프레임웍들은 최소한의 코딩으로도 Ajax 패턴을 Java EE 애플리케이션으로 잘 통합한다.

  • 디자인의 유효성에 대한 재평가: Ajax는 웹 애플리케이션에 데스크탑 애플리케이션 애트리뷰트를 제공한다. 주어진 웹 애플리케이션에서 클라이언트 측 인터랙션 대부분이 Ajax를 활용한다. 애플리케이션은 데스크탑 애플리케이션으로서 보다 더 잘 설계될 것이다.




개발 딜레마 처리하기

 

자바 웹 개발에 Ajax를 사용할 때 동기식(synchronous) 통신 모델과 비동기식(asynchronous) 통신 모델의 차이를 완전히 이해하는 것이 중요하다. (참고자료) 비동기식 통신 모델의 지원 부족은 클라이언트 측 개발, 웹 프레임웍과의 통합, 태그 라이브러리의 사용, IDE 사용, 쓰레딩 작동에 영향을 미칠 수 있다.

동기식 요청/응답 통신 모델에서 브라우저(웹 서버, 애플리케이션 서버, 웹 애플리케이션에 반(反)하는 개념)는 언제나 요청을 초기화 한다. 한편, 웹 서버, 애플리케이션 서버, 웹 애플리케이션은 인커밍 요청에 대응한다. 동기식 요청/응답 쌍이 처리되는 동안 사용자는 브라우저를 사용할 수 없다.

그림 2는 전통적인 웹 애플리케이션의 동기식 통신 모델을 나타내는 시퀀스 다이어그램이다. 서버의 생명 주기에서 클리어언트의 데이터 제출과 서버 측 프로세싱은 강결합 된다.


그림 2. 동기식 통신 시퀀스


비동기식 요청/응답 통신 모델에서, 웹 서버, 애플리케이션 서버, 웹 애플리케이션에 대한 브라우저 간 통신은 결합력이 약하다(decouple). 비동기식 요청/응답이 처리되는 동안 웹 사용자는 브라우저를 계속 사용할 수 있고 동시에 비동기식 요청이 처리된다. 비동기식 요청 프로세싱이 완료되면 비동기식 응답이 (웹 서버, 애플리케이션 서버, 웹 애플리케이션 에서) 클라이언트 페이지로 간다. 일반적으로 이 프로세스 동안에 실행은 웹 사용자들에게는 어떤 영향력도 없다. 응답을 기다릴 필요가 없다.

그림 3의 시퀀스 다이어그램은 비동기식 통신 모델을 묘사한 것이다. 첫 번째 dataSubmission(서버 측 프로세싱)과 리턴된 dataSubmission 모두 빨간색 원이 그려져 있다. 이 시퀀스들은 분리되어 있다. 이 그림에서는 중요한 요소들을 강조하고 있다. (쓰레딩 문제 참조) 다시 말해서 이 모드에서 다중 제출(쓰레드)가 빈번히 일어날 것 같다.


그림 3. 비동기식 통신 시퀀스


클라이언트 측에 미치는 영향

Ajax를 웹 애플리케이션에 도입할 때 개발 팀은 여러 가지 함정을 조심해야 한다. 대개는 생성된 HTML 페이지와 이것이 브라우저와 인터랙팅 하는 방식과 관련되어 있다. 이러한 문제들은 Chris Laffra의 Considering Ajax 시리즈에 잘 설명되어 있다. (참고자료)

  • 스크립팅이 실행되지 않을 수 있다: 여러 가지 다양한 이유로 인해, JavaScript는 많은 사용자 브라우저에서는 실행되지 않는다.

  • 크로스 브라우저 지원 때문에 많은 코드가 필요하다: 여러 브라우저들과 브라우저 버전들을 지원하는 애플리케이션은 스크립팅 코드가 많아져야 한다. 브라우저가 DOM 엘리먼트(그리고 그러한 엘리먼트를 연산하는 자바 스크립트 코드)를 인터프리팅 하는 방식에 미묘한 변수들이 존재하기 때문이다.

  • JavaScript는 안전하지 않다: 대부분의 브라우저에서, HTML 페이지와 제휴된 JavaScript 소스 코드는 뷰 소스 옵션을 선택하면 볼 수 있다. Ajax 패턴을 사용할 때 스크립팅 코드의 로직이 민감하지 않은지를 확인해야 한다.

웹 프레임웍과의 통합

Ajax 개발을 자신의 Java EE 웹 프레임웍과 통합하려는 시도는 자연스러운 현상이다. 하지만 몇몇 Java EE 웹 프레임웍은 비동기식 통신 모델을 지원하지 않는다. 서블릿이 동기식 통신과 비동기식 통신을 처리하는 방법을 이해해야 한다. 그림 4는 전통적인 서블릿이 동기식 요청을 처리하는 모습이다.


그림 4. 동기식 요청을 처리하는 서블릿 시퀀스


그림 4는 Java EE 웹 개발자에게는 익숙할 것이다. 브라우저에서 온 요청이 처음에는 컨트롤러 서블릿의 service()에 의해 처리된다. 서블릿은 필요한 값을 HttpRequest (매개변수 또는 애트리뷰트로서)를 가져올 수 있다. 컨트롤러 프로세싱이 처리되면 결과는 HttpRequest (또는 HttpSession)로 보내지고 RequestDispatcher는 컨트롤을 페이지로 전달한다.

그림 5는 비동기식 요청을 처리하는 서블릿 시퀀스이다:


그림 5. 비동기식 요청을 처리하는 서블릿 시퀀스



그림 5의 시퀀스는 동기식 시퀀스와는 약간 다르다. 브라우저에서 온 요청은 처음에는 컨트롤러 서블릿의 service()에 의해 처리된다. 이 서블릿은 필요한 모든 값을 HttpRequest (매개변수 또는 애트리뷰트로서)에서 가져올 수 있다. 일단 컨트롤러 프로세싱이 끝나면 HttpServletResponse의 콘텐트 유형이 XML로 설정되어야 한다. 또한 컨트롤러 로직의 결과는 PrintWriter로 작성된다. 이 시점에서 RequestDispatcher의 사용이 바이패스(bypass)된다.

이것은 대부분의 Java EE 웹 프레임웍이 지원하지 않는 정확한 (비동기식) 시퀀스이다. 이것 때문에 Ajax와의 통합이 어렵게 된다. 비동기식 통신 모델을 지원하지 않는 포틀릿과 JavaServer Faces (JSF) 프레임웍도 같은 상황에 처해있다.

이러한 문제를 해결할 수 있는 몇 가지 옵션이 있다:

  • 웹 프레임웍과의 공존: 빌트인 Ajax 지원을 기다리거나 자신의 프레임웍에 Ajax를 강제적으로 지원하는 대신 개별 서블릿으로 모든 비동기식 요청들을 처리할 수 있다. DWR이 이 방법을 사용한다. 이 방식의 단점은 Ajax 요청이 프레임웍의 기능들을 쉽게 활용할 수 없다는 점이다.

  • 웹 프레임웍과 통합하기: 확장을 사용하거나 커스텀 확장을 작성하여 웹 프레임웍과 통합할 수 있다.

  • Ajax를 지원하는 프레임웍으로 마이그레이션: 새로운 프레임웍이 비동기식 통신 모델을 지원하기 시작했다. 이중 하나가 Apache Shale 이다. (참고자료)

태그 라이브러리

자바 웹 애플리케이션 개발 시 일반적으로 태그 라이브러리(taglibs)를 많이 사용한다. 많은 Java EE 웹 프레임웍과 마찬가지로 taglibs는 비동기식 통신 모델을 지원하지 않는다. XMLHttpRequest를 통해서 제출된 데이터를 HttpServletRequest로 트랜슬레이트 할 방법이 없다. 본질적으로 비동기식 통신을 지원하지 않는 taglibs는 Ajax XMLHttpRequest 호출이 실행되는 동안 기능을 하지 않는다. 여러분에게 주어진 옵션은 다음과 같다.

  • 비동기식 모델을 지원하지 않는 taglibs를 사용하지 않는다: taglibs로 만든 코드를 HTML/JavaScript 코드로 마이그레이션 한다. (웹 애플리케이션이 taglibs에 많이 의존하는 경우 이 방법을 사용하면 뷰-레이어의 페이지 크기만 늘어난다.)

  • 문제를 해결한다: 이 문제에 대한 해결책을 갖고 있는 Ajax 프레임웍을 사용한다. 그 한 가지 예가 DWR이다. (ExecutionContext.forwardToString() 참조) 이 경우 여러분이 사용했던 taglibs를 계속 사용할 수 있다.

  • Ajax 지원 taglibs를 사용한다: Ajax JSP Tag Library (AjaxTags) 같은 비동기식 모델을 지원하는 taglibs를 사용한다. (참고자료)

IDE를 이용한 개발과 디버깅

많은 JavaScript 디버깅 툴은 JavaScript 솔루션을 개발할 때 도움이 된다. 하지만 전통적인 자바 개발 환경에서는 XMLHTTPRequest의 가치와 Ajax와 관련된 특징을 확인할 수 없다.

한 가지 방법은 AJAX Toolkit Framework (ATF) (참고자료)을 사용하는 것이다. ATF는 강화된 JavaScript 에디팅 기능을 갖춘 Eclipse 플러그인이다. 편집 시 신택스 검사를 할 수 있고, Mozilla 웹 브라우저, DOM 브라우저, JavaScript 디버거 등이 내장되어 있다. ATF에는 Personality Builder가 있는데 이것은 임의의 Ajax 런타임 프레임웍용 IDE 기능의 구현에 도움이 되고 ATF에 있는 런타임 환경에 추가된다.

쓰레딩 문제

전형적인 동기식 웹 애플리케이션에서 버튼이나 링크 클릭에 다소 긴 처리 시간이 필요하다. 인내심이 없거나 경험이 없는 웹 사용자들은 버튼과 링크를 한 번 이상 클릭하여 여러 개의 폼 제출을 실행하곤 한다. 이것이 프로세싱 속도를 높일 것이라고 생각하면서 말이다. 사용자들은 (데스크탑 애플리케이션 처럼) 더블 클릭이 필요하다고 생각한다. 웹 애플리케이션에서의 여러 폼 제출은 어떤 경우에는 무해하다. 하지만 어떤 경우에는 심각한 쓰레딩 문제나 경쟁 조건(여러 쓰레드가 코드 블록의 실행을 위해 경쟁하는 것)을 야기할 수 있다. 예를 들어, 뱅킹 애플리케이션에서 Transfer Funds 버튼을 여러 번 클릭하면 원치 않는 다중 이체 결과를 초래할 수 있다.

동기식 통신 모델과 비동기식 통신 모델 모두를 지원하는 웹 애플리케이션은, 기능이 올바르게 분석 및 기획되지 않으면, 비슷한 문제에 봉착한다. 두 개의 통신 모델을 지원하는 애플리케이션은 해당 페이지에서 서버 측 호출을 혼합한다. (완전한 동기식, 완전한 비동기식, 동기식과 비동기식의 혼합). 여러 번 클릭되는 상황에서 비동기식 호출은 보다 느리게 처리된다. 애플리케이션이 이를 방지하지 않는다면 사용자는 비동기식 쓰레드가 처리되고 있는 동안 동기식 호출을 처리한다. 이 페이지는 리프레시 되지 않아 페이지가 더 이상 작동하지 않기 때문이다. 웹 페이지상의 같은 버튼이나 링크에서 나오지 않았더라도 같은 상황이 서버 측 코드에 쓰레딩 문제를 야기할 수 있다. (다중 클릭 문제와 비슷함)

뱅킹 애플리케이션의 자금 이체 페이지 예를 들어보자. (그림 6)


그림 6. 자금 이체 예제


빨간색 Transfer Funds 버튼은 Ajax 호출을 실행한다.

Logout 링크(노란색)는 동기식 호출을 실행한다. 성급하거나 경험이 없는 사용자는 빨간색 버튼과 노란색 링크를 연속적으로 클릭하면 (그리고 두 링크 모두 공통 경로를 갖고 있다고 생각한다면) 경쟁 조건이 발생한다.

 

일반적으로 이러한 상황을 방지할 수 있는 두 가지 방법이 있다.

 

첫 번째는 클라이언트 측 솔루션이다. 링크나 버튼이 실행되면 JavaScript를 사용하여 추가의 페이지 제출이 현재 쓰레드가 실행을 종료할 때까지 금지되었는지를 확인한다.

 

두 번째 솔루션은 서버 측 코드의 동기화에 의존하여 경쟁 조건을 지키면서 멀티 쓰레드 제출을 허용하는 것이다.

 

이 문제를 해결할 때 동기화를 적용한다면 Java EE 웹 컴포넌트(서블릿, 포틀릿, JSF)가 멀티 쓰레딩 된다. 코드의 큰 섹션을 동기화 할 때 주의하라. (특히 요청/응답 프로세싱과 관련된 코드) 실제로, 동기화를 잘못 사용하면 애플리케이션이 싱글-쓰레드 애플리케이션으로 변하고 쓰루풋도 줄어든다.




퍼포먼스 함정 피하기

 

Ajax를 사용하면 Java EE 웹 기반 애플리케이션의 퍼포먼스에도 영향을 미친다. 요청 당 추가 쓰레드를 허용하게 되면 두 가지 리소스가 영향을 받는다.

 

우선, 서블릿 컨테이너에 있는 쓰레드 풀(thread pool))이 영향을 받는다.

쓰레드 풀은 웹 컨테이너에서 동시에 실행할 수 있는 최대 쓰레드의 수를 지정한다. 클라이언트 요청에 쓰레드가 필요하다. 하지만 클라이언트 요청이 사용자 요청과 언제나 같은 것은 아니다. 브라우저는 사용자 요청 당 여러 클라이언트 요청을 필요로 할 수 있다. 예를 들어, 사용자가 제출한 폼에 여러 클라이언트 요청이 필요하다. (폼 값 제출, GIF 파일 가져오기, JavaScript 파일 가져오기, CSS 파일 가져오기) 동기식/비동기식 요청이 동시에 제출될 수 있다면 사용자 요청당 (Ajax 요청에 대해) 적어도 한 개 이상의 쓰레드 소비를 지원할 수 있다는 의미이다. 사용자 요청당 한 개 이상의 쓰레드를 추가하는 것이 가능하지만 애플리케이션이 로딩중이면 결과는 자명하다. (사용자 요청 당 추가 쓰레드가 평균 사용자 카운트 만큼 배가될 것이다.) 분명 서블릿 컨테이너의 퍼포먼스에 영향을 미칠 것이다.

 

또 한가지 리소스는 데이터베이스 커넥션 풀(database connection pool)이다. 전형적인 Java EE 웹 애플리케이션은 사용자 요청에 대해 두 가지 유형의 시퀀스를 실행한다. 가벼운(shallow) 요청과 무거운(deep) 요청이다. 가벼운 요청은 서버 측 코드를 실행하는 웹 페이지에서 기원한 요청이지만 요청을 완료하기 위해 (데이터베이스 같은) 영속 스토어에 액세스 하지 않는다. 무거운 요청은 서버 측 코드를 실행하는 웹 페이지에서 기원한 요청이고 요청을 완료할 때 영속 스토어에 액세스 한다.

 

무거운 요청 시퀀스(데이터베이스 연결이 필요함)에서, 더 많은 쓰레드를 허용하면 데이터베이스 커넥션 풀링에는 다음과 같은 요소들이 영향을 받는다.

  • 커넥션을 기다리는 쓰레드의 평균 수
  • 커넥션을 기다리는 평균 시간 (밀리초 단위)
  • 커넥션을 사용하는 평균 시간

결국, 커넥션 풀의 크기나 커넥션 수를 늘려야 한다.




테스팅

 

자바 개발자들은 Java SE와 Java EE 코드에 단위 테스트를 수행하는 것을 중요하게 생각하고 있다.

Ajax 때문에 브라우저에 내장된 JavaScript의 양이 많아지면서 견고한 단위 테스팅 프레임웍이 절실히 요구된다. JsUnit, Selenium, HttpUnit 등을 사용할 수 있다. (참고자료)

이러한 프레임웍들은 웹 페이지 상에서 DOM 엘리먼트를 조작하는 JavaScript 함수에 대한 단위 테스트를 개발하는 장치를 제공한다. 또한 단위 테스트를 테스트 슈트로 그룹핑 할 수 있다. Selenium의 브라우저 호환성 테스팅 기능으로 다양한 브라우저와 운영 체계에서 JavaScript 함수를 테스트 할 수 있다. 이것은 JavaScript와 Iframes를 사용하여 테스트 자동화 엔진을 브라우저에 삽입한다. 이 기술은 JavaScript가 작동되는 브라우저에 적용해야 하고 다중 브라우저와 브라우저 버전들을 지원하는 애플리케이션에 특히 유용하다. Selenium과 JsUnit 모두 연속 통합(continuous integration)을 지원한다. JavaScript 단위 테스트와 테스트 슈트를 자동화 구현 프로세스에 통합할 수 있다.




결론

 

다른 기술이나 패턴과 마찬가지로 Ajax를 Java EE 애플리케이션에 적용할 때 장단점이 있다. 이 글에서는 Ajax를 Java EE 웹 애플리케이션으로 통합하는 것에 대한 큰 그림을 보여주었다. Ajax의 비동기식 통신 모델은 전통적인 Java EE 웹 애플리케이션의 동기식 모델과는 매우 다르다. 따라서 Ajax를 채택하기 전에 문제가 되는 부분에 대한 충분한 고려가 있어야 한다.

Java EE 프레임웍과 유틸리티 지원은 계속 발전한다. Ajax가 지원되는 프레임웍을 활용하여 통합 시 생기는 복잡함을 줄여야 할 것이다. JSF 기반 Apache Shale과 서블릿 기반 DWR을 계속 주목하기 바란다.

 

기사의 원문보기




참고자료

교육


제품 및 기술 얻기


토론




필자소개

Patrick Gan은 IBM Global Services의 정보 기술 전문가이다. Java EE, 객체 지향 애플리케이션 개발, 오픈 소스 프레임웍 전문가이다. 그는 주로 Java EE 애플리케이션 개발의 디자인과 개발 단계에서 고객들을 지원하고 있다

 

 

출처 : IBM DeveloperWorks

'WEB2.0 > ajax' 카테고리의 다른 글

dojo Framework part 2.유틸리티 함수  (0) 2008.03.13
dojo Framework part1.  (0) 2008.03.06
Ajax 한글 파라미터 보내기  (0) 2006.07.13
Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
 

Ajax 한글 파라미터 보내기

WEB2.0/ajax | 2006. 7. 13. 19:08
Posted by 시반

XMLHttpRequest 는 전송시

 

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

 

위에 처럼 euc-kr이 지정되어 있더라도 설정된 인코딩을 사용하지 않는다

따라서 한글일 경우 자바스크립트에서 직접 인코딩을 해주어야 한다

 

자바스크립트에서는 excape()와 encodeURIComponent() 를 지원해주고 있는데

escape는 유니코드로 encodeURIComponent는 UTF-8로 인코딩할 수 있다

 

[보내는 쪽의 코드 예제]

var param = "args="+encodeURIComponent($('args').value);

 

[받는 쪽의 코드 예제]

request.setCharactorEncoding("utf-8");

request.getParameter("args");

 

이렇게 보내는쪽과 받는 쪽 모두 인코딩을 동일하게 UTF-8로 전송하는 경우

한글이 깨지지 않으며 Get,Post 방식 모두 동일하게 처리한다. 

'WEB2.0 > ajax' 카테고리의 다른 글

dojo Framework part1.  (0) 2008.03.06
Ajax와 Java EE의 통합  (0) 2006.09.02
Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
Prototype.js 가이드 02 _ Ajax support  (0) 2006.05.10
 

Ajax 마스터, Part 1: Ajax 소개

WEB2.0/ajax | 2006. 6. 2. 09:05
Posted by 시반

웹 사이트를 구현하는 생선적인 방식인 Ajax 이해하기

 

Brett McLaughlin, Author and Editor, O'Reilly Media Inc.

2006 년 5 월 29 일

HTML, JavaScript™, DHTML, DOM으로 구성된 Ajax는 볼품없는 웹 인터페이스를 인터랙티브 Ajax 애플리케이션으로 변형하는 획기적인 방식이다. Ajax 전문가인 필자는 이러한 기술들이 어떻게 작용하는지 전체적인 개요를 비롯하여 세부사항 까지 설명한다. 또한 XMLHttpRequest 객체 같은 Ajax의 중심적인 개념들을 소개한다.

5년 전, XML에 대해 무지했다면 아무도 얘기할 상대가 없는 미운 오리 새끼 신세가 되었을지도 모르겠다. Ruby 프로그램이 주목을 받았던 8개월 전, Ruby 프로그램 언어 기능에 대해 알지 못했던 프로그래머들은 냉수기 관련 산업세계에서 환영 받지 못했다. 그런 것처럼, 최신 기술단계로 입문하고자 한다면 Ajax에 대해 알아야 한다.

하지만 Ajax는 일시적으로 유행하는 툴이 아니다. 웹 사이트를 구축하는 강력한 방식이며 완전히 새로운 언어를 배우는 것보다는 그다지 어렵지 않다.

Ajax에 관해 자세히 들어가기 전에 잠시 Ajax의 기능에 대해 알아보자. 오늘날 애플리케이션을 작성할 시 두 가지 애플리케이션이 있다.

  • 데스크톱 애플리케이션
  • 웹 애플리케이션

두 애플리케이션은 다 친숙한 것들이다. 일반적으로 데스크톱 애플리케이션은 CD상에 배치된 다음 (또는 웹 사이트에서 다운로드) 컴퓨터에 완전 설치된다. 이 애플리케이션은 인터넷을 이용해 업데이트를 다운로드하기도 하지만 애플리케이션 실행 코드는 데스크톱 상에 상주해 있다. 전혀 새로운 것이 아닌 웹 애플리케이션은 웹 서버 상에서 실행되며 웹 브라우저 상에서 접속된다.

하지만 두 애플리케이션에 대한 코드 실행 위치보다 애플리케이션 작동방식 및 애플리케이션과 사용자와의 상호작용방식이 중요하다. 일반적으로 데스크톱 애플리케이션은 상당히 빠르고 (컴퓨터 상에서 실행되고 인터넷 상에서 대기 중인 상태가 안 나온다.), 대형 사용자 인터페이스(일반적으로 운영체제와 상호작용)를 갖추며 상당히 동적이다. 거의 대기시간 없이 메뉴 및 하위 메뉴를 클릭, 지시, 입력하고 풀업한다.

반면 웹 애플리케이션은 가장 최신 것이며 데스크톱에서는 전혀 얻을 수 없는 서비스를 제공한다.(Amazon.com 및 eBay를 생각해 볼 것.) 하지만 웹 애플리케이션 기능으로 인해 서버 응답 대기, 스크린 재생 대기, Request 컴백 및 새 페이지 생성에 관한 대기 기능 등이 부수된다.

분명 지나친 단순화 과정임에는 틀림없지만 기본 개념은 얻게 된다. 이미 눈치를 챘겠지만 Ajax는 데스크톱 애플리케이션 및 항상 업데이트 되는 웹 애플리케이션의 기능 및 상호작용 간의 차이를 줄여주는 역할을 한다. 여러분은 마치 데스크톱 애플리케이션에서 찾은 것처럼 동적 사용자 인터페이스 및 가상 제어기능을 사용한다. 하지만 웹 애플리케이션 상에서 데스크톱 애플리케이션을 이용할 수 있다. 그러면 대기 중인 것이 무엇인가? Ajax 및 볼품없는 웹 인터페이스가 응답 Ajax 애플리케이션으로 변환되는 과정에 대해 살펴보기로 하자.

그러면 대기 중인 것이 무엇인가? Ajax 및 볼품없는 웹 인터페이스가 응답 Ajax 애플리케이션으로 변환되는 과정에 대해 살펴보기로 하자.

오래된 기술, 새로운 기법

Ajax에 관해 살펴보면 Ajax는 실지로 많은 기술들이 응집되어 있다. Ajax의 기본을 마치고 넘어가려면 몇 가지 다른 기술들(필자는 첫 번째 이 시리즈에서 각각의 기술에 관해 설명할 것이다.)을 면밀히 살펴보아야 한다. 하지만 이들 기술 가운데 어느 정도 알고 있는 것이 많은 건 다행이다. 더군다나 각각의 기술 대부분은 Java/Ruby같은 프로그래밍 언어만큼 어려운 게 아니라서 배우기 쉽다.

Ajax 정의

Ajax는 비동기 JavaScript 및 XML의 약어이다.(DHTML도 마찬가지다.) Adaptive Path사의 Jesse James Garrett이 이 약어를 만들어냈으며(참고자료), Jesse에 따르면 이 약어는 두문자어는 아니라고 한다.

Ajax 애플리케이션에 포함된 기본기술은 다음과 같다.

  • 웹 양식을 구축하고 애플리케이션 완료 때까지 사용되는 필드를 식별하는 데 HTML을 사용한다.
  • 자바 스크립트 코드는 Ajax 애플리케이션을 실행하는 중심 코드며 서버 애플리케이션과의 커뮤니케이션을 용이하게 한다.
  • DHTML(동적 HTML)은 웹 양식을 동적으로 업데이트 한다. div, span및 기타 동적 HTML 요소를 사용해 HTML을 마크업 한다.
  • 서버에서 복귀된 HTML 및 (때로) XML 구조를 다루는 데 있어 DOM, 즉 문서 객체 모델(Document Object Model)을 사용한다.

이 기술들에 대해 간략히 요약하고 각 기술의 기능에 대해 좀 더 알아보기로 하는데 각 기술에 관한 자세한 사항은 차후 글에서 다룰 것이다. 우선은 Ajax의 구성요소 및 기술에 대해 친숙해 지는 데 초점을 맞추기로 한다. 자바 스크립트에 익숙할수록 Ajax에 담긴 기술에 관한 일반적인 지식 단계에서 각 기술에 관한 자세한 지식으로 넘어가는 게 더 쉬워진다.(또한 이로 인해 웹 애플리케이션 개발에 관한 문이 열리게 된다.)

XMLHttpRequest 객체

알고자 하는 객체 중 첫 번째는 아마도 가장 생소한 것이 아닌가 싶다. 그 객체는 일명 XMLHttpRequest인데 자바 스크립트 객체의 일종이며 Listing 1에 나와 있는 것처럼 단순하게 생성된다.



Listing 1. 새로운 XMLHttpRequest 객체 생성

<script language="javascript" type="text/javascript">

 var xmlHttp = new XMLHttpRequest();

</script>


필자는 다음 글에서 이 객체에 대해 더 논의할 것이다. 하지만 지금 상태에서는 모든 서버 커뮤니케이션을 다루는 객체라는 사실만 알아둔다. 다음 사항으로 가기 전에 잠깐 생각해 보면 자바 스크립트 객체는 XMLHttpRequest를 통해 서버에 전달하는 자바 스크립트 기술의 일종이다. 이 객체는 애플리케이션 흐름이 정상적이지 않으며 Ajax 기술의 많은 부분을 차지하고 있다.

정상적인 웹 애플리케이션에서 사용자는 양식 필드를 기입하며 제출 버튼을 클릭한다. 그러면 전 양식을 서버에 보내며 서버는 처리과정을 통해 양식을 스크립트(일반적으로 PHP, 자바 또는 CGI 과정/이와 유사한 과정)에 전송한다. 스크립트를 실행할 때 스트립트를 통해 완전히 새로운 페이지가 전송된다. 그 페이지는 데이터가 작성된 새로운 양식의 HTML/확인 페이지 또는 원 양식에 기입된 데이터에 근거해 선택된 옵션이 포함된 페이지일 수 있다. 물론, 서버 상의 스크립트/프로그램이 처리되면서 새로운 양식을 다시 보내는 동안 사용자는 대기해야 한다. 서버로부터 데이터를 다시 받을 때까지는 스크린 상에 아무 것도 없게 되며 결국 대화성은 낮게 된다. 사용자는 즉각적으로 응답을 받지 못하며 데스크톱 애플리케이션 상에서 작업하는 기분이 들지 않게 된다.

Ajax는 근본적으로 자바 스크립트 기술 및 웹 양식 및 서버 간의 XMLHttpRequest 객체를 결합한다. 사용자가 웹 양식을 기입할 때 데이터는 직접 서버 스크립트에 전송되지 않고 자바 스크립트 코드에 전달된다. 대신 자바 스크립트 코드는 양식 데이터를 포착해 Request를 서버에 전송한다. 이 과정이 일어나는 동안, 사용자 스크린 상의 양식은 순식간에 나타나거나 깜빡이거나 사라지거나 정지하지 않는다. 즉 자바 스크립트 코드는 몰래 Request를 전송하며 사용자는 Request가 만들어졌는지도 알지 못한다. 게다가 Request를 비동기적으로 전송하기 때문에 더 좋은 상황이 된다. 이는 자바 스크립트에서 서버 응답을 그냥 대기하지 않는다는 것을 의미한다. 따라서, 사용자는 데이터를 계속 기입하고 화면이동하고 애플리케이션을 사용한다.

그런 다음 서버는 자바 스크립트 코드(웹 양식에 대해 아직도 대기 중임)에 데이터를 다시 전송한다. 자바 스크립트 코드에서는 데이터와의 상호기능을 결정하며 연속적으로 양식 필드를 업데이트 하면서 애플리케이션에 즉각적인 응답을 준다. 결국 사용자는 양식을 제출/재생하는 작업 없이 새로운 데이터를 얻게 된다. 자바 스크립트 코드는 데이터를 얻고 계산도 수행하며 또 다른 Request를 전송하며 이런 모든 과정은 사용자 개입 없이도 된다! 이것이 바로 XMLHttpRequest 객체의 장점이다. XMLHttpRequest 객체는 서버와 같이 커뮤니케이션을 주고받고 사용자는 그 과정에서 벌어지는 과정을 알지 못한다. 이로 인해 데스크톱 애플리케이션과 마찬가지로 동적, 상호 반응적인 고도의 양방향 경험을 얻게 되지만 그 속에 인터넷의 모든 장점이 담겨 있다.

자바 스크립트에 대한 부가사항

일단 XMLHttpRequest에 대해 다루게 되면 나머지 자바 스크립트 코드는 상당히 평범한 것들이다. 사실 다음과 같은 기본적인 작업에 자바 스크립트 코드를 이용한다.

  • 양식 데이터 얻기: 자바 스크립트 코드로 HTML 양식에서 데이터를 꺼내 이를 서버에 전송하는 작업이 간단해진다.
  • 양식 상의 값 변환: 필드 값 설정에서 연속적인 이미지 교체작업에 이르는 양식 업데이트 작업 또한 간단하다.
  • HTML 및 XML 구문분석: 자바 스크립트 코드를 이용해 DOM(다음 섹션 참조)을 처리하고 서버에서 다시 전송하는 HTML 양식 및 임의의 XML 데이터에 관한 구조를 다루게 된다.

첫 번째 두 항목에 대해서 여러분은 Listing 2에 나온 대로 getElementById()에 익숙해지려 할 것이다.



Listing 2. 자바 스크립트 코드에서의 필드 값 포착 및 설정

/*

  Get the value of the "phone" field 

  and stuff it in a variable called phone

*/

var phone = document.getElementById("phone").value;

 

// Set some values on a form using an array called response

document.getElementById("order").value = response[0];

document.getElementById("address").value = response[1];


Ajax 애플리케이션에서 특별히 획기적인 사항은 없고 상기 사항 정도면 충분하다. 이에 대해 상당히 복잡한 건 없다는 사실을 깨달아야 한다. 일단 XMLHttpRequest만 정복하면 Ajax 애플리케이션에서 나머지는 대부분 Listing 2에 나온 바와 같이 상당히 독창적인 HTML과 결합된 단순 자바 스크립트 코드다. 그런 다음 가끔 약간의 DOM 작업이 발생하게 된다. 이에 관해 살펴 보자.

DOM으로 종료하기

DOM, 즉 문서 객체 모델이라는 것이 있는데 이는 아주 중요하다. DOM에 대해 듣는 것은 그다지 어렵지 않다고 하는 사람들이 있다. HTML 디자이너에 의해서는 종종 사용되지 않으며 하이-엔드 프로그래밍 작업으로 들어가지 않는 한은 JavaScript 코더에서 흔치 않은 것이 바로 DOM이다. 종종 과중-업무 Java 및 C/C++ 프로그램 상에서 DOM을 종종 많이 활용하게 된다. 사실은 DOM이 배우기 어려운 특성 때문에 명성이 자자해 그 프로그램 상에서 종종 사용하는 것이 아닌가 싶다.

다행히도 JavaScript 기술에 있어 DOM을 활용하는 일은 쉽고 대부분 직관적이다. 이 시점에서 필자는 DOM 사용법에 관해 보여 주고 적어도 이에 대한 몇 가지 코드 예를 제시하려 하지만 이 글의 의도와는 벗어나는 것 같다. DOM에 관해 대략적으로 다루는 것 없이도 Ajax에 대해 깊이 다룰 수 있다. 필자는 차후의 글에서 다시 DOM에 관해 다루려 한다. 하지만 지금 상황에서는 언급하지 않으려 한다. JavaScript 코드와 서버 사이에 XML을 이리저리 전송하고 HTML 양식을 변화시킬 때 DOM에 대해 자세히 다루게 될 것이다. 지금은 DOM없이 효과적인 Ajax 애플리케이션을 작동하는 게 쉬우므로DOM은 논외로 한다.




Request 객체 얻기

Ajax 애플리케이션에 관한 기본적 개념에 대해 배웠으면 몇 가지 특수사항에 대해 살펴 보자. XMLHttpRequest 객체는 Ajax 애플리케이션에서 중요하므로, 아마도 많은 이들에게는 생소한 것일 수도 있다. 거기서 필자는 논의를 시작한다. Listing 1에서 보다시피, XMLHttpRequest 객체를 생성, 사용하는 것은 상당히 쉬워야 한다. 잠깐만 기다려 보시라.

수년 동안 브라우저에 관한 논란은 끊이지 않았고 동일한 브라우저로는 아무 것도 얻을 수 없다는 사실을 기억하는가? 믿건 말건, 소규모 브라우저에서도 이와 같은 논쟁은 끊이지 않고 있다. 더군다나 놀라운 사실은 XMLHttpRequest가 이 논란의 희생양 중 하나라는 것이다. 따라서 XMLHttpRequest 객체를 작동시키기 위해선 몇 가지 다른 작업을 해야 한다. 단계별로 설명하겠다.

Microsoft 브라우저 다루기

Microsoft 브라우저, Internet Explorer는 XML을 다룰 시 MSXML 구문분석계를 사용한다.(참고자료) Internet Explorer 상에서 다뤄야 할 Ajax 애플리케이션을 작성할 시 독특한 방식으로 XMLHttpRequest 객체를 작성해야 한다.

하지만 그렇게 간단한 작업은 아니다. Internet Explorer에 설치된 JavaScript 기술 버전에 따라 MSXML 버전도 변하게 되며 실지로 2개의 버전이 있다. 따라서 두 경우를 다루는 코드를 작성해야 한다. Microsoft 브라우저 상에서 XMLHttpRequest 객체를 생성하는 데 필요한 코드에 관해선 Listing 3을 보라.



Listing 3. Microsoft 브라우저 상에서 XMLHttpRequest 객체 생성

var xmlHttp = false;

try {

   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

   try {

      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

   } catch (e2) {

      xmlHttp = false;

   }

}


모든 작업이 정확히 맞아떨어지는 것은 아니다. 하지만 그래도 상관없다. 이 시리즈가 끝나기 전에 JavaScript 프로그래밍, 에러 취급 및 조건부 번역 및 기타 사항에 관해 자세히 다루게 될 것이다. 지금 현 상태에서는 두 가지 중심 라인만 다루고자 한다.

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

and

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

간단히 말해서, 이 코드로 MSXML의 한 버전을 이용해 XMLHttpRequest 객체 생성을 기한다. 하지만 객체가 생성되지 않는 경우 다른 버전을 사용해 XMLHttpRequest 객체를 생성한다. 두 코드 다 작동되지 않는 경우 xmlHttp 변수는 거짓으로 설정되고 작동되지 않는 것이 있다는 것을 코드에 알려 준다. 그럴 경우, 비-Microsoft 브라우저가 있을 가능성이 있다. 따라서 객체 생성을 위해선 다른 코드를 사용해야 한다.

Mozilla 및 Microsoft 브라우저 다루기

인터넷 브라우저를 선택하지 않거나 비-Microsoft 브라우저를 작성할 경우 다른 코드가 필요하다. 사실, 이 라인은 Listing 1에서 봤던 단순 코드라인이다.

var xmlHttp = new XMLHttpRequest object;.

이 단순한 라인으로 Mozilla, Firefox, Safari, Opera 및 임의의 양식/형태에서 Ajax애플리케이션을 지원하는 기타 비-Microsoft 브라우저에서 XMLHttpRequest 객체를 생성한다.

지원기능 통합

여기서 모든 브라우저를 지원하는 것이 중요하다. Internet Explorer/비-Microsoft 브라우저에서만 작동되는 애플리케이션을 작성하는 사람이 어디 있겠는가? 또한 더 심한 경우, 애플리케이션을 두 번 작성하고자 하는가? 물론 아니라고 믿는다. 따라서 코드에선 Internet Explorer 및 비-Microsoft 브라우저를 지원하는 기능이 포함되어야 한다. Listing 4에서는 다중-브라우저 방식으로 작동하는 코드에 대해 나와 있다.



Listing 4. 다중 브라우저 방식으로 XMLHttpRequest 객체 생성하기

/* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp = false;

 

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {

   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

   try {

      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

   } catch (e2) {

      xmlHttp = false;

   }

}

@end @*/

 

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

   xmlHttp = new XMLHttpRequest();

}


지금 현재로선, 주석 및 @cc_on와 같은 어려운 태그를 무시한다. 이들은 다음 글에서 깊이 다룰 JavaScript 컴파일러 명령으로 오로지 XMLHttpRequest 객체 상에만 초점이 맞추어져 있다. 이 코드에 관한 핵심은 세 가지 과정으로 요약된다.

  1. 변수 xmlHttp를 생성해 앞으로 생성할 XMLHttpRequest 객체를 참조한다.
  2. Microsoft 브라우저에서의 객체를 시도, 생성한다.
    • Msxml2.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
    • 과정이 실패할 경우, Microsoft.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
  3. xmlHttp가 아직도 설정되지 않은 경우 비-Microsoft 방식으로 XMLHttpRequest 객체를 생성한다.

위 과정 끝 단계 시 사용자가 실행하는 브라우저 종류에 관계없이 xmlHttp의 경우 유효한 XMLHttpRequest 객체를 인용한다.

보안

보안이란 무엇인가? 오늘날 브라우저는 사용자들에게 보안 레벨을 올리고 JavaScript 기술을 생성하며 브라우저 옵션을 해제하는 기능을 제공한다. 이 경우 코드가 작동되지 않는 경우도 있을 수 있다. 그 때 발생하는 문제를 적절하게 다뤄야 한다. 이에 관한 내용은 적어도 기사 한 분량을 차지할 정도라 나중에 다루기로 하겠다.(긴 시리즈가 될 것 같다, 그렇지 않은가? 하지만 걱정 마시라. 과정을 다 배우고 나면 이와 관련된 모든 사항을 숙달할 테니까.) 현재로선 강력하지만 완전하지 않은 코드를 작성하는 중이다. 이 코드는 Ajax 애플리케이션을 관리하는 데 좋다.




Ajax 세계에서의 Request/Response

인제 Ajax 애플리케이션에 대해 이해하고 XMLHttpRequest 객체 및 객체 생성에 관한 기본적인 개념을 얻는다. 자세히 읽다 보면 Ajax 애플리케이션은 웹 애플리케이션에 제출되는 HTML 양식보단 서버 상의 임의의 웹 애플리케이션에 대화하는 JavaScript 기술이라는 사실을 알게 된다.

그러면 빠진 부분은 어떤 것인가? 실질적인 XMLHttpRequest 객체 사용법이다. 이 객체는 작성하는 각각의 Ajax 애플리케이션에서 일정 형태로 사용하는 중요 코드라 Ajax 애플리케이션이 포함된 기본 Request/응답 모델 모양을 통해 객체 사용법을 빨리 익힌다.

Request 만들기

새로운 XMLHttpRequest 객체가 있는 경우 이를 시험해 보자. 먼저 웹 페이지에서 호출하는 JavaScript 방법이 필요하다.(사용자가 텍스트에서 입력하거나 메뉴에서 옵션을 선택할 시와 같음.) 그 다음, 거의 모든 Ajax 애플리케이션에서의 동일한 기본 아웃라인을 따른다.

  1. 웹 양식으로부터 필요한 모든 데이터 얻기
  2. 연결할 URL 구축
  3. 서버 연결
  4. 서버 실행 종료 시 서버 실행 기능 설정
  5. Request 전송

Listing 5는 위의 순서대로 5단계를 진행하는 Ajax 방법의 예에 관해 나와 있다.



Listing 5. Ajax가 포함된 Request 만들기

function callServer() {

 

   // Get the city and state from the web form

   var city = document.getElementById("city").value;

   var state = document.getElementById("state").value;

  

   // Only go on if there are values for both fields

   if ((city == null) || (city == ""))

      return;

   if ((state == null) || (state == ""))

      return;

 

   // Build the URL to connect to var

   url = "/scripts/getZipCode.php?city="

         + escape(city) + "&state=" + escape(state);

 

   // Open a connection to the server

   xmlHttp.open("GET", url, true);

 

   // Setup a function for the server to run when it's done

   xmlHttp.onreadystatechange = updatePage;

 

   // Send the request

   xmlHttp.send(null);

}


Ajax 코드에 관한 많은 것이 명백하다. Ajax 코드의 첫번째 비트는 몇 가지 양식 필드 값을 포착하는 기본 JavaScript 코드를 사용한다. 그런 다음 이 코드에서는 연결 최종 목적지로 PHP 스크립트를 설정한다.

PHP 스크립트의 URL을 지정한 다음(양식에서 나온) 단순한 GET 매개변수를 이용해 이 URL에 도시 및 국가를 추가한다. 그 다음 연결하면 먼저 XMLHttpRequest 객체가 작동되는 것을 보게 된다. 연결방법은 연결 URL 뿐만 아니라, GET 매개변수에도 나와 있다. 최종 매개변수를 true로 설정한 경우, 이 매개변수에선 비동기식 연결(Ajax를 만든다.)을 요구한다. false로 설정한 경우엔 Request를 만들 시 서버 상에서 Ajax에서의 JavaScript 코드가 대기하고 응답을 받을 때 코드가 지속된다. 사용자는 최종 매개변수를 true로 설정하면서 서버에서 배경에 있는 Request를 처리하는 동안 사용자는 웹 양식(심지어는 기타 JavaScript 방식)을 여전히 사용한다.

한편 xmlHttp(이것은 XMLHttpRequest 객체의 인스턴스라는 사실을 기억하라.)의 onreadystatechange 속성으로 서버 실행이 종료될 시(5분/5시간 내에 종료될 수 있음) 서버 기능을 명령한다. 이 코드는 서버 상에서 대기하지 않기 때문에 서버가 기능을 인식해 서버에 응답할 수 있도록 하는 게 필요하다. 이 경우 서버에서 Request를 처리하면서 종료 시 이른바 updatePage()라 불리는 특수 방법을 트리거한다.

최종적으로 send() 코드를 0(null) 값으로 호출한다. 데이터를 추가해 이를 서버에 전송하므로 Request에는 추가해서 보낼 게 없다. 이렇게 되면 Request를 발송하고 서버는 서버에 요구된 기능을 실행한다.

이 코드에서 나오는 것이 없는 경우, 코드가 상당히 간단하다는 것을 명심하라. 이 코드는 Ajax 애플리케이션의 비동기적 특성을 제외하고는 상당히 단순하다. 이 코드를 통해 복잡한 HTTP Request/응답 코드보다는 근사한 애플리케이션 및 인터페이스에 완전 초점을 맞추도록 한다는 사실을 여러분은 높게 평가할 것이다.

Listing 5의 코드는 코드를 얻는 방법만큼이나 쉽다. 데이터는 단순 텍스트이고 Request URL의 일부로 포함된다. GET 매개변수는 더 복잡한 POST대신 Request를 전송한다. 여기에 덧붙일 XML/컨텐츠 헤더가 없고 Request 본체에 전송할 데이터도 없다. 이게 바로 Ajax 유토피아다.

그렇다고 미리 겁먹지 마라. 시리즈가 계속될수록 문제는 더 복잡해진다. 그 때는 POST Request를 전송하는 방법, Request 헤더 및 컨텐츠 형식을 설정하는 방법, 메시지에 XML을 설정하는 방법 및 Request에 보안기능을 추가하는 방법을 배우게 되는데 배우는 목록만 해도 상당히 길다! 지금은 이런 어려운 주제에 대해 신경 쓰지 말자! 그냥 기본만 충실하게 익히면 Ajax 전체 툴을 구축하게 된다.

응답 취급과정

이제 서버 응답을 실지로 취급해야 한다. 이 시점에서는 정말로 두 가지 사항만 알면 된다.

  • xmlHttp.readyState 속성이 4와 같을 때까지는 어떤 작업도 해선 안 된다.
  • 서버는 xmlHttp.responseText 속성에 응답한다.

2가지 항목 중 첫번째 항목인 준비 상태에 관해선 다음 글에서 대부분 다룰 것이다. 그 때는 HTTP Request 단계에 대해 알고 싶은 것 이상으로 배우게 된다. 지금 현재로선, xmlHttp.responseText 속성 값 4를 단순 점검하는 경우, 작업이 계속 진행된다.(다음 글에서 기대할 만한 사항이 나오게 된다.) 서버 응답을 얻기 위해 xmlHttp.readyState 속성을 사용하는 과정인 두 번째 항목은 쉽다. Listing 6은 Listing 5에서 전송된 값에 근거해 서버에서 호출하는 방법에 관한 예를 보여준다.



Listing 6. 서버 응답 취급하기

function updatePage() {

   if (xmlHttp.readyState == 4) {

      var response = xmlHttp.responseText;

      document.getElementById("zipCode").value = response;

   }

}


다시 보면, xmlHttp.readyState 코드는 그리 어렵거나 복잡하지 않다. 이 코드는 서버에서 해당 준비 상태로의 호출을 대기하고 서버에서 다시 복귀되는 값(이 경우, 사용자 기입 도시 및 국가에 대한 ZIP 코드)을 사용해 또 다른 형태의 양식 필드를 설정한다. 그 결과, zipCode 필드는 ZIP 코드와 함께 갑자기 나타난다. 하지만 사용자는 버튼을 클릭해서는 안 된다! 그게 바로 이전에 말했던 데스크톱 애플리케이션이다. Ajax 코드에는 응답성, 동적 상태 외의 더 많은 것이 있다. 독자들은 zipCode가 정상 텍스트 필드라는 것을 눈치챘을지도 모른다.

일단 서버에서 zipCode를 복귀시키고 updatePage() 방식으로 도시/국가 ZIP 코드와 함께 zipCode 필드 값을 설정하는 경우 사용자는 값을 무효로 한다. 값을 무효로 하는 데는 두 가지 이유가 있다. 예에서 나오는 상황을 단순화시키고, 때로는 사용자가 서버에서 명령하는 것을 무효로 하기 위해서다. 이 두 가지를 명심하라. 좋은 사용자-인터페이스 설계를 위해 중요하다.




웹 양식 다루기

그러면 이 글에서 다룰 게 남아 있는가? 그다지 많지 않다. 양식에 기입할 정보를 포착해 이를 서버에 전송하고 응답에 관해 취급할 또 다른 JavaScript 방법을 제공하면서 심지어는 다시 응답될 때 필드 값을 설정하기까지 하는 JavaScript 방법을 다룬다. 여기서는 첫번째 JavaScript 방법을 호출해 전 과정을 시작하기만 하면 된다. 분명 HTTL 양식에 버튼을 추가하지만 2001년 버전과 거의 동일하다고 생각되지 않는가? Listing 7과 같이 JavaScript 기술을 활용한다.



Listing 7. Ajax 프로세스 시작

<form>

  <p>City:

    <input type="text" name="city" id="city" size="25"

     onChange="callServer();" />

  </p>

  <p>State:

     <input type="text" name="state" id="state" size="25"

     onChange="callServer();" />

  </p>

  <p>Zip Code:

     <input type="text" name="zipCode" id="zipCode" size="5" />

  </p>

</form>


이런 단면이 루틴 코드의 한 단면 이상을 보여준다고 생각된다면 맞는 말이다. – 그렇다! 사용자가 도시/국가 필드에 관한 새로운 값을 입력할 경우 callServer() 방식을 전송한 다음 Ajax 애플리케이션이 시작된다. 이제 여러 상황을 다룰 만하다고 느껴지기 시작하는가? 좋다! 바로 그거다!




맺음말

이 시점에서 적어도 리소스 란에서 Ajax 애플리케이션에 관해 깊숙이 알려고 하는 경우, 첫번째 Ajax 애플리케이션을 작성할 준비가 되어 있지 않을 게다. 하지만 이런 애플리케이션이 작동하는 기본 개념 및 XMLHttpRequest 객체의 기본 개념을 이해하기 시작한 경우 이 객체, JavaScript-서버 간 대화 취급방식, HTML 양식 취급 및 심지어 DOM 관리 방식까지 모든 것을 배워야 한다.

지금 현재로선, Ajax 애플리케이션이 얼마나 강력한 툴인지 생각하는 데 시간을 보낸다. 버튼만 클릭할 뿐만 아니라 필드에 입력하고 콤보 상자에서 옵션을 선택하고 심지어는 마우스를 스크린 주위에 끄는 경우 응답하는 웹 형식을 상상해 본다. 비동기식의 정확한 의미 및 Request 상에서 응답하기 위해 서버 상에서 실행하지만 대기하지 않는 JavaScript 코드에 관해 생각해 본다. 여러분이 부딪치는 문제의 종류는 어떤 것인가? 어떤 영역의 문제에 주의를 기울일 것인가? 프로그래밍에 이 새로운 접근방식을 설명하기 위해 양식 설계를 변환하는 방법은 어떤 것인가?

이런 문제에 관해 실지로 생각할 시간을 보낸다면 잘라 붙이는 코드를 가지고 이를 잘 이해하지 못하는 애플리케이션에 포함시키는 것보다는 훨씬 더 낫다. 다음 글에서는 이와 같은 개념을 실제 작업에 응용해 본 작업에서처럼 애플리케이션을 만들어야 하는 코드에 관한 자세한 정보를 제공하기로 한다. 그 때까지 Ajax 애플리케이션의 가능성을 마음껏 즐겨라.

기사의 원문보기




참고자료

교육

토론



필자소개

Brett McLaughlin, Author and Editor, O'Reilly Media Inc.



 

 

출처 :

한국 developerWorks  >  웹 아키텍처 | XML | 자바 | SOA와 웹서비스  >

'WEB2.0 > ajax' 카테고리의 다른 글

Ajax와 Java EE의 통합  (0) 2006.09.02
Ajax 한글 파라미터 보내기  (0) 2006.07.13
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
Prototype.js 가이드 02 _ Ajax support  (0) 2006.05.10
Prototype.js 가이드 01  (0) 2006.05.10
 

Prototype.js 가이드 03 참조문서

WEB2.0/ajax | 2006. 5. 11. 09:35
Posted by 시반

JavaScript 클래스에 대한 확장

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

Object 클래스를 위한 확장

메소드 종류 인자 상세설명

extend
(destination, source)

 static

destination: 객체,
source: 객체

source에서 destination으로 모든 프라퍼티와 메소드를 복사하여 상속을 구현하기 위한 방법을 제공

inspect(targetObj) static targetObj: 객체

targetObj의 사람이 읽을수 있는 문자열 표현으로 반환. 주어진 객체가 inspect 인스턴스 메소드를 정의하지 않는다면, toString 의 값을 반환

 

Number 클래스를 위한 확장

메소드 종류 인자 상세설명
toColorPart() instance (none)

숫자의 16진법 표현을 반환. 색상의 RGB컴포넌트를 HTML표현으로 변환할때 유용

succ() instance (none)

다음 숫자를 반환. 이 함수는 반복을 포함하는 시나리오에서 사용된다.

times(iterator) instance

iterator: Function(value, index)를 충족하는 함수 객체

인자 value와 index를 반복적으로 전달하는 iterator 함수를 호출하는 것은 iteration과 현재 index내 현재 값을 각각 포함한다.

다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.

<script>
  function demoTimes(){
       var n = 10;
       n.times(
          function(value, index){
              alert(index);
         });
      /***************************
       * you could have also used:
       * (10).times( .... );
       ***************************/
}
</script>
 <input type=button value="Test Number.times()" onclick="demoTimes()">


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태그가 삭제된 문자열을 반환
stripScripts() instance (none) 삭제된 <script /> 블럭을 가진 문자열을 반환
escapeHTML() instance (none) HTML마크업 문자들이 escaped된 문자열 반환
unescapeHTML() instance (none) escapeHTML()의 반대
extractScripts() instance (none) 문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환
evalScripts() instance (none) 문자열내에서 발견되는 각각의 <script />블럭을 평가하기
toQueryParams() instance (none)

쿼리문자열(querystring)을 파라미터 이름에 의해 인덱스화되는 결합된 Array로 쪼개기

parseQuery() instance (none) toQueryParams()와 같음.
toArray() instance (none) 문자열을 이것의 문자들의 Array로 쪼개기
camelize() instance (none)

-(하이픈)으로 분리된 문자열을 camelCaseString으로 변환하기. 이 함수는 예를 들면, 프라퍼티 스타일을 다루는 코드를 작성할때 유용하다.

Array 클래스를 위한 확장

시작하기 위해, Array는 Enumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.

메소드 종류 인자 상세설명
clear() instance (none) 배열을 비우고 자체를 반환한다.
first() instance (none) 배열의 첫번째 요소를 반환한다.
last() instance (none) 배열의 마지막 요소를 반환한다.
compact() instance (none) null 이거나 undefined인 요소를 제외하고 배열을 반환한다. 이 메소드는 배열자체를 변경하지 않는다.
flatten() instance (none) 기복이 없고, 1차원의 배열을 반환한다. 이 함수는 배열이고 반환된 배열내 요소를 포함하는 배열의 각 요소를 찾음으로써 수행된다.

without(value1 [, value2 [, .. valueN]])

 instance

value1 ... valueN:
 배열내 존재한다면 제외될 값

 인자로 주어진 요소를 제외한 배열을 반환
indexOf(value) instance

value:

 당신이 찾는 것

 배열에서 찾아진다면 주어진 value의 0부터 시작하는 인덱스의 위치를 반환. value이 없다면 -1을 반환
reverse([applyToSelf]) instance

applyToSelf: 배열 자체가 반전되는지 표시

 역순서로 배열을 반환. 인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다. 그렇지 않으면 변경되지 않고 남는다.
shift() instance (none) 첫번째 요소를 반환하고 배열로부터 이것을 제거한다. 배열의 길이는 1 감소한다.
inspect() instance (none) 요소를 가진 배열의 잘 포맷팅된 문자열 표시를 반환하기 위해 변경

document DOM 객체를 위한 확장

메소드 종류 인자 상세설명

getElementsByClassName(className [, parentElement])

 instance

className: 요소와 연관된 CSS클래스 이름,
parentElement: 객체 또는 가져올 요소를 포함하는 요소의 id.

 주어진 CSS클래스명과 연관된 모든 요소를 반환. parentElement id가 주어졌다면, 전체 문서가 검색될것이다.

Event 객체를 위한 확장

프라퍼티 타입 상세설명
KEY_BACKSPACE Number 8: 되돌리기(<-) 키를 위한 상수 코드.
KEY_TAB Number 9: 탭키를 위한 상수코드
KEY_RETURN Number 13: 리턴키를 위한 상수코드
KEY_ESC Number 27: Esc키를 위한 상수코드
KEY_LEFT Number 37: 왼쪽 화살표 키를 위한 상수코드
KEY_UP Number 38: 위쪽 화살표 키를 위한 상수코드
KEY_RIGHT Number 39: 오른쪽 화살표 키를 위한 상수코드
KEY_DOWN Number 40: 아래쪽 화살표 키를 위한 상수코드
KEY_DELETE Number 46: Delete키를 위한 상수코드
observers: Array 캐시된 관찰자(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: 객체 또는 아이디,
name: 이벤트 명 (like 'click', 'load', etc), observer: function to handle the event,
useCapture: if true, handles the event in the capture phase and if false in the bubbling phase.

 이벤트를 위한 이벤트 핸들러 함수를 추가
stopObserving(element, name, observer, useCapture) static element: 객체 또는 아이디,
name: 이벤트 명 ('click' 처럼), observer: 이벤트를 다루는 함수, useCapture: true라면 capture내 이벤트를 다루고, false라면 bubbling내에서 다룬다.		 이벤트로부터 이벤트 핸들러를 제거
_observeAndCache(element, name, observer, useCapture) static   private메소드, 이것에 대해 걱정하지말라.
unloadCache() static (none) private메소드, 이것에 대해 걱정하지말라. 메모리로부터 캐시된 모든 관찰자(observer)를 지운다.

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) 함수 객체
K Function(obj) 주어진 파라미터를 되돌리는 함수 객체

Enumerable 객체

Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.

많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.

 

프라퍼티 타입 상세설명
Version String 라이브러리의 버전

 

메소드 종류 인자 상세설명
each(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 주어진 iterator함수를 호출하는 것은 첫번째 인자내 목록으로 각각의 요소와 두번째 인자내 요소의 인덱스 전달한다.
all([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator 함수가 어떤 요소를 위해 false나 null을 반환한다면, all은 false를 반환할것이다. 그렇지 않다면 true를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "모든 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
any(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체(선택사항) 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator함수가 어떤 요소를 위해 false 나 null을 반환하지 않는다면 any는 true를 반환할것이다. 그렇지 않다면 false를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "어느 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
collect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다. 집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다.
detect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true를 반환하는 iterator함수를 야기하는 첫번째 요소를 반환한다. true를 반환하는 요소가 없다면, detect는 null을 반환한다.
entries() instance (none) toArray()와 같다.
find(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 detect()와 같다.
findAll(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true로 해석되는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array을 반환한다. 이 함수는 reject()와는 반대의 함수이다.
grep(pattern [, iterator]) instance pattern: 요소를 일치시키기 위해 사용되는 RegExp객체, iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 테스트한다. 함수는 정규표현식에 대응되는 모든 요소를 포함하는 Array 를 반환할것이다. iterator함수가 주어진다면, Array는 대응되는 각각의 요소를 가진 iterator를 호출한 결과를 포함할것이다.
include(obj) instance obj: 객체 집합내 주어진 객체를 찾도록 시도한다. 객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다.
inject(initialValue, iterator) instance initialValue: 초기화 값처럼 사용되는 객체, iterator: Function(accumulator, value, index)를 충족하는 함수 객체 iterator함수를 사용하여 집합의 모든 요소를 조합한다. 호출된 iterator는 accumulator인자에서 이전 반복의 결과를 전달한다. 첫번째 반복은 accumulator인자내 initialValue를 가진다. 마지막 결과는 마지막 반환값이다.
invoke(methodName [, arg1 [, arg2 [...]]]) instance methodName: 각각의 요소내에서 호출될 메소드의 이름, arg1..argN: 메소드 호출로 전달될 인자. 집합의 각각의 요소내 methodName에 의해 명시되는 메소드를 호출하는 것은 주어진 인자(arg1에서 argN) 전달하고 Array객체로 결과를 반환한다.
map(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 collect()과 같다.
max([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 큰 값이나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 큰 결과를 반환한다.
include(obj) instance obj: 객체 include()과 같다.
min([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 작은 값을 가진 요소나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 작은 결과를 가진 요소를 반환한다.
partition([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 두개의 다른 배열을 포함하는 Array를 반환한다. 첫번째 배열은 true를 반환하는 iterator함수를 야기하는 모든 요소를 포함할것이고 두번째 배열은 남아있는 요소를 포함할것이다. 만약 iterator가 주어지지 않는다면, 첫번째 배열은 true로 해석하는 요소를 포함할것이고 다른 배열은 남아있는 요소를 포함할것이다.
pluck(propertyName) instance propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름. 이것은 요소의 인덱스를 포함할수 있다. 집합의 각각의 요소내 propertyName에 의해 명시된 프라퍼티에 값을 가져가고 Array객체로 결과를 반환한다.
reject(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 false로 해석하는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array를 반환한다. 이 함수는 findAll()과는 반대되는 함수이다..
select(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 findAll()과 같다.
sortBy(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 iterator함수 호출결과를 따르는 정렬된 모든 요소를 가진 Array을 반환.
toArray() instance (none) 집합의 모든 요소를 가지는 Array를 반환.
zip(collection1[, collection2 [, ... collectionN [,transform]]]) instance collection1 .. collectionN: 병합될 목록, transform: Function(value, index)를 충족하는 함수 객체 현재의 집합으로 각각의 주어진 집합을 병합한다. 이 병합 작업은 같은 수의 요소를 가진 새로운 배열을 반환한다. 현재 집합과 각각의 요소가 각각의 병합된 집합으로부터 같은 인덱스를 가진 요소의 배열(이것을 하위 배열이라고 부르자.)이다. transform함수가 주어진다면, 각각의 하위 배열은 반환되기 전에 이 함수에 의해 변형딜것이다. 빠른 예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.

Hash 객체

Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.

Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다. 각각의 항목은 두개의 프라퍼티(key 와 value)를 가진다.

메소드 종류 인자 상세설명
keys() instance (none) 모든 항목의 key를 가진 Array을 반환
values() instance (none) 모든 항목의 value를 가진 Array을 반환
merge(otherHash) instance otherHash: Hash 객체 hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환
toQueryString() instance (none) 쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환. 이를테면 'key1=value1&key2=value2&key3=value3'
inspect() instance (none) key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)

ObjectRange 클래스

Enumerable으로부터 상속

상위 경계나 하위 경계로 값들의 범위를 표시

 

프라퍼티 타입 종류 상세설명
start (any) instance 범위의 시작값
end (any) instance 범위의 마지막값
exclusive Boolean instance 경계자체가 범위의 일부인지 판단

 

메소드 종류 인자 상세설명
[ctor](start, end, exclusive) constructor start: 시작값, end: 마지막값, exclusive: 경계가 범위내 포함되는가.? 하나의 range객체를 생성한다. start 에서 end로 범위를 지정한다. start 와 end가 같은 타입의 객체이고 succ()메소드를 가져야만 한다.
include(searchedValue) instance searchedValue: 검색할 값 주어진 값이 범위내 값인지 체크. true 나 false값을 반환한다.

The Class object

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와 명명공간(namespace)처럼 제공한다.

프라퍼티 타입 종류 상세설명
activeRequestCount Number instance 진행중인 AJAX요청의 수.

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

Ajax.Responders 객체

Enumerable로 부터 상속되었다

이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.

 

프라퍼티 타입 종류 상세설명
responders Array instance 객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다..

 

메소드 종류 인자 상세설명
register(responderToAdd) instance responderToAdd: 호출될 메소드를 가진 객체 responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다. 유사한 이벤트가 발생하면, 적절한 이름을 가진 메소드를 포함하는 모든 등록된 객체가 호출되는 메소드를 가질것이다.
unregister(responderToRemove) instance responderToRemove: list로부터 제거될 객체 responderToRemove 인자로 전달되는 객체는 등록된 객체의 list로부터 제거될것이다.
dispatch(callback, request, transport, json) instance callback: 보고되는 AJAX이벤트 이름, request: 이벤트를 책임지는 the Ajax.Request 객체, transport: AJAX호출을 가지는 XMLHttpRequest 객체, json: 응답의 X-JSON 헤더(존재할때만) 등록된 객체의 목록을 통해 실행하는 것은 callback 인자내 결정된 메소드를 가지는 것을 찾는다. 호출되는 각각의 메소드는 다른 3개의 인자를 전달한다. AJAX응답이 몇몇 JSON컨텐츠를 가지는 X-JSON HTTP 헤더를 포함한다면, 이것은 평가되고 json인자로 전달될것이다. 만약 이벤트가 onException라면, transport인자는 대신에 예외를 가질것이고 json은 전달되지 않을것이다.

Ajax.Base 클래스

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

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

Ajax.Request 클래스

Ajax.Base로 부터 상속

AJAX 작업을 캡슐화

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

 

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

options 인자 객체

AJAX작업의 중요한 부분은 options 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 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 옵션을 사용하라.

프라퍼티 타입 종류 상세설명
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 or 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) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

Element 객체

이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.

메소드 종류 인자 상세설명
visible(element) instance element: element 객체 또는 아이디 요소가 눈에 보이는지 표시하는 Boolean값을 반환
toggle(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 각각의 전달된 요소의 가시성(visibility)을 토글(toggle)한다.
hide(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display를 'none'로 셋팅하여 각각의 요소를 숨긴다.
show(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display를 ''로 다시 셋팅하여 각각의 요소를 보여준다.
update(element, html) instance element: element 객체 또는 아이디, html: html 컨텐츠 주어진 html인자를 가지는 요소의 내부 html을 대체. 주어진 html이 <script>블럭을 포함한다면, 그것들은 포함되지는 않지만 평가될것이다.
remove(element) instance element: element 객체 또는 아이디 문서로 부터 요소를 제거한다.
getHeight(element) instance element: element 객체 또는 아이디 요소의 offsetHeight값을 반환
addClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 주어진 class명을 요소의 class명으로 추가
hasClassName(element, className) instance element: element 객체 또는 아이디, className: name of a CSS class 요소가 class명중에 하나로 주어진 class명을 가진다면 true를 반환
removeClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 요소의 class명으로 부터 주어진 class명을 제거
cleanWhitespace(element) instance element: element 객체 또는 아이디 요소의 자식노드에서 공백을 제거

The Abstract 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Abstract.Insertion 클래스

이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML 동적 내용물 삽입을 도울 객체를 생성

프라퍼티 타입 종류 상세설명
adjacency String static, parameter 내용물이 주어진 요소에 대해 상대적으로 위치할 지점을 명시하는 파라미터. 가능한 값은 'beforeBegin', 'afterBegin', 'beforeEnd', 그리고 'afterEnd'.
element Object instance 삽입이 상대적으로 만들어질 요소객체
content String instance 삽입될 HTML.

Insertion 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Insertion.Before 클래스

Abstract.Insertion로 부터 상속

요소 앞에 HTML삽입

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체를 생성

다음의 코드는

<br>Hello,
<span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Before('person', 'Chief '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, Chief
<span id="person" style="color:red;">Wiggum. How's it going?</span>

Insertion.Top 클래스

Abstract.Insertion로 부터 상속

요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는


<br>Hello,
<span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Top('person', 'Mr. '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello,
<span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>
 

Insertion.Bottom 클래스

Abstract.Insertion로 부터 상속

요소아래의 마지막 자식으로 HTML삽입. 내용물은 요소의 닫기 태그앞에 위치할것이다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: HTML to be inserted Abstract.Insertion로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는


<br>Hello,
<span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Bottom('person', " What's up?"); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello,
<span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

Insertion.After 클래스

Abstract.Insertion로 부터 상속

요소의 닫기 태그뒤 HTML삽입

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: HTML to be inserted Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는


<br>Hello,
<span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.After('person', ' Are you there?'); </script>

다음처럼 HTML이 변경될것이다.


<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?

Field 객체

이 객체는 폼내 input필드와 작동하기 위한 몇가지 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
clear(field1 [, field2 [, field3 [...]]]) instance fieldN: field element 객체 또는 아이디 field요소로부터 각각 전달된 값을 지움(clear)
present(field1 [, field2 [, field3 [...]]]) instance fieldN: field element 객체 또는 아이디 모든 폼 field가 빈값이 아니라면 true를 반환
focus(field) instance field: field element 객체 또는 아이디 주어진 폼 field로 입력 포커스 이동
select(field) instance field: field element 객체 또는 아이디 텍스트 선택을 지원하는 field내 값을 선택
activate(field) instance field: field element 객체 또는 아이디 포커스를 이동하고 텍스트 선택을 지원하는 field내 값을 선택

Form 객체

이 객체는 데이터 항목 폼과 그것들의 입력 field와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
serialize(form) instance form: form element 객체 또는 아이디 'field1=value1&field2=value2&field3=value3'처럼 field명과 값의 url형태의 목록을 반환
getElements(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 포함하는 Array 반환
getInputs(form [, typeName [, name]]) instance form: form element 객체 또는 아이디, typeName: input요소의 타입, name: input요소명. 폼내 모든 <input>요소를 포함하는 Array 반환. 선택적으로 목록은 요소의 타입이나 name속성에 의해 필터링 될수 있다.
disable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용불가상태로 만들기
enable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용가능하게 만들기
focusFirstElement(form) instance form: form element 객체 또는 아이디 첫번째 가시성을 활성화하고, 폼내 입력 field를 가능하게 하기
reset(form) instance form: form element 객체 또는 아이디 폼을 리셋하기. form객체의 reset()메소드와 같다.

Form.Element 객체

이 객체는 폼요소와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
serialize(element) instance element: element 객체 또는 아이디 'elementName=elementValue'처럼 요소의 name=value 짝을 반환
getValue(element) instance element: element 객체 또는 아이디 요소의 값을 반환

Form.Element.Serializers 객체

이 객체는 폼요소의 현재 값을 가져오기 위해 라이브러리 내부적으로 사용되는 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
inputSelector(element) instance element: radio 버튼이나 checkbox처럼 checked프라퍼티를 가지는 form요소의 객체 또는 아이디 ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array을 반환
textarea(element) instance element: textbox, button 또는 password필드처럼 value프라퍼티를 가지는 form요소의 객체 또는 아이디. ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array를 반환
select(element) instance element: <select> 요소의 객체 또는 아이디 ['elementName', 'selOpt1 selOpt4 selOpt9']처럼 요소의 이름과 모든 선택된 옵션의 값이나 텍스트를 가지는 Array를 반환

Abstract.TimedObserver 클래스

이 클래스는 값이 변경(또는 프라퍼티가 클래스정의를 얻어내는)될때까지 하나의 요소를 모니터링할 다른 클래스를 위한 기본클래스처럼 사용된다. 이 클래스는 추상클래스처럼 사용된다.

하위클래스는 요소의 입력값, style프라퍼티중 하나, 또는 테이블내 row의 수, 또는 당신이 추적하고자 하는 모든것을 모니터링하기 위해 생성될수 있다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

instance, abstract
메소드 종류 인자 상세설명
[ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: 초단위 간격, callback: 요소가 변경될때 호출되는 함수 요소를 모니터링할 객체 생성
(none)
registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소 모니터링릉 시작하기 위한 객체 자체에 의해 호출된다.
onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소를 체크하기 위해 정기적으로 객체 자체에 의해 호출된다.

프라퍼티 타입 상세설명
element Object 모니터링되는 요소객체
frequency Number 이것은 체크사이에 초단위 간격으로 이루어진다.
callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue String 요소내 확인되는 마지막 값

Form.Element.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼 입력 요소의 값을 모니터링하는 Abstract.TimedObserver의 구현물. 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.Element.EventObserver 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: interval in seconds, callback: function to be called when the element changes Abstract.TimedObserver으로부터 상속. 요소의 value프라퍼티를 모니터링할 객체를 생성.
getValue() instance (none) 요소의 값을 반환

Form.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼내 데이터 항목 요소의 값이 변경하는지를 모니터링하는 Abstract.TimedObserver의 구현물. 당신이 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함하는 폼을 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.EventObserver 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](form, frequency, callback) constructor form: form 객체 또는 아이디, frequency: 초단위 간격, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수 Abstract.TimedObserver로부터 상속. 변경하기 위한 폼을 모니터링할 객체 생성.
getValue() instance (none) 모든 폼의 데이터의 직렬화를 반환

Abstract.EventObserver 클래스

이 클래스는 요소를 위해 값-변경 이벤트가 발생할때마다 콜백함수를 수행하는 다른 클래스를 위한 기본 클래스처럼 사용된다.

Abstract.EventObserver 타입의 다중 객체는 다른것을 지우지 않고 같은 요소로 묶일수 있다. 콜백은 요소에 할당되는 순서대로 수행될것이다.

트리거 형태의 이벤트는 radio버튼과 checkbox를 위해서는 onclick이고 대개의 textbox와 리스트박스/드랍다운을 위해서는 onchange이다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

instance, abstract
메소드 종류 인자 상세설명
[ctor](element, callback) constructor element: element 객체 또는 아이디, callback: 이벤트가 발생할때 호출되는 함수 요소를 모니터링할 객체 생성.
(none)
registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트를 자체적으로 묶는 객체에 의해 호출된다.
registerFormCallbacks() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 폼내 각각의 데이터 항목 요소의 이벤트로 자체적으로 묶기 위한 객체에 의해 호출된다.
onElementEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트로 묶일것이다.

프라퍼티 타입 상세설명
element Object 모니터링되는 요소객체
callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue String 요소내 확인되는 마지막 값

Form.Element.EventObserver 클래스

Abstract.EventObserver로 부터 상속

요소내 값 변경을 감지하기 위한 폼 데이터 항목 요소의 적절한 이벤트를 위한 콜백 함수를 수행하는 Abstract.EventObserver의 구현물. 만약 요소가 변경을 보고하는 이벤트를 드러내지 않는다면, 당신은 Form.Element.Observer 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](element, callback) constructor element: element 객체 또는 아이디, callback: function to be called when the event happens Abstract.EventObserver로 부터 상속. 요소의 value프라퍼티를 모니터링할 객체 생성.
getValue() instance (none) 요소의 값 반환.

Form.EventObserver 클래스

Abstract.EventObserver로 부터 상속

값이 변결될때 감지하기 위한 요소의 이벤트를 사용하여 폼내 포함되는 어느 데이터 항목 요소에 변경을 모니터링하는 Abstract.EventObserver의 구현물. 만약 폼이 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함한다면, 당신은 Form.Observer 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](form, callback) constructor form: form 객체 또는 아이디, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수 Abstract.EventObserver로부터 상속. 변경을 위해 폼을 모니터링할 객체 생성.
getValue() instance (none) 모든 폼의 데이터 직렬화를 반환

Position 객체 (예비 문서)

이 객체는 요소 위치할당을 작업할때 돕는 수많은 함수를 제공한다.

메소드 종류 인자 상세설명
prepare() instance (none)

스크롤 위치내 변경을 수용하기 위한 deltaX 와 deltaY 프라퍼티 조정. 페이지 스크롤후 withinIncludingScrolloffset를 호출하기 전에 이 메소드를 호출하는 것을 기억하라.

realOffset(element) instance element:object

요소에 영향을 끼치는 어느 스크롤 offset를 포함하는 요소의 정확한 스크롤 offset를 가진 Array을 반환. 이 결과 배열은 [total_scroll_left, total_scroll_top]과 유사.

cumulativeOffset(element) instance element:object

위치가 할당된 부모 요소에 의해 부과된 어느 offset를 포함하는 요소의 정확한 위치가 할당된 offset를 가진 Array을 반환. 결과 배열은[total_offset_left,total_offset_top] 과 유사

within(element, x, y) instance

element:object, x 와 y: 위치 조정

만약 주어진 지점이 주어진 요소의 직사각형내 조정이 되는지 테스트.

withinIncludingScrolloffsets(element, x, y)

 instance

element:object, x and y:
coordinates of a point

  
overlap(mode, element) instance

mode:
'vertical' 나 'horizontal', element: object

within()은 이 메소드가 호출되기 전에 호출될 필요가 있다. 이 메소드는 요소에서 겹치는 것을 조정하는 세분화정도를 표현하는 0.0과 1.0사이의 10진수를 반환할것이다. 예를 들면, 만약 요소가 100px를 가지는 정사각형 DIV이고 (300,300)에 위치한다면,
within(divSquare, 330, 330);
overlap('vertical', divSquare);
은 DIV의 top border로부터 10%(30px)를 가리키는 것을 의미하는 0.10을 반환할것이다.

clone(source, target) instance

source:
element 객체 또는 아이디,
target: element 객체 또는 아이디

source요소에 대해 똑같이 target요소의 크기를 다시 조정하고 다시 위치를 지정

 

'WEB2.0 > ajax' 카테고리의 다른 글

Ajax 한글 파라미터 보내기  (0) 2006.07.13
Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 02 _ Ajax support  (0) 2006.05.10
Prototype.js 가이드 01  (0) 2006.05.10
풍부한 웹 UI 구현을 위한 기술 집합체 _AJAX  (0) 2006.05.08
 

Prototype.js 가이드 02 _ Ajax support

WEB2.0/ajax | 2006. 5. 10. 20:31
Posted by 시반

The Ajax 객체

앞서의 함수들은 분명 좋은 코드들이지만 그러한 함수들을 구현할 능력이 있거나 이미 유사한 자신만의 함수를 사용하고 있을지 모른다. 하지만 prototype.js를 사용하는 이유는 대부분 Ajax기능을 쉽게 사용하길 원하기 때문이기에 이제 prototype.js를 사용하여 AJAX로직을 좀더 쉽게 작성할 수있는 방법을 살펴보기로 하자.

 

먼저 ProtoType라이브러니는 Ajax 기능 구현을 위해 Ajax 객체라는 것을 제공하고 있다

AJAX객체는 AJAX관련 함수를 작성시 만들어지는 코드의 단순화와 캡슐화를 위해 ProtoType라이브러리에 미리 정의된 객체이며 AJAX객체는 AJAX로직이 캡슐화되어 제공되어지는 다수의 클래스를 포함하고 있다. .

Ajax.Request 클래스 사용하기

만약 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면 Ajax기능을 사용하기 위해 수많은 코드에서  XMLHttpRequest 객체를 생성해야 것이며 각 실행 단계마다 비동기적으로 체크를 해야 할것이며. 그리고나서 응답을 뽑아내는 것을 반복할 것이다.

protoType라이브러리에서는 이러한 기능을 지원하기 위해 Ajax.Request클래스를 정의하고 있다.

 

라이브러리를 통해 Ajax 어플리케이션을 만들기 위해서는 다음과 같은 방식으로 Ajax.Request 객체를 생성하여야 한다

 var myAjax = new Ajax.Request(

              url,

              {method: 'post', parameters: data, onComplete: ajax_response}

              );

 

위에서 사용된 Ajax.Request객체의 생성자의 두번째 파라미터의 의미는 Ajax호출을 위한 옵션을 정의하고 있다 즉 위의 예에서는 HTTP POST명령을 통해 첫번째 파라미터인 url을 호출할 것이며 변수 data에 포함된 조회문자열을 전달하고 응답을 받아들이는 작업을 마칠 때 ajax_response()함수를 호출하라는 프로퍼티를 가지는 Ajax.Request객체를 생성하라는 뜻이다

 

예를 들었던 프로퍼티 외에 AJAX를 비동기적으로 서버에 호출할지를 결정( true 또는 false) 할 수 있는 asynchronous 프로퍼티(디폴트 값은 true이다.) 등 Ajax.Request 객체 내에서 정의하고 활성화 시킬수 있는 몇개의 프로퍼티가 더 존재하고 있다

 

XMLHttpRequest는 HTTP호출을 하는 동안 진행과정(Loading, Loaded, Interactive,Complete)를 알릴수 있는데 각 단계마다 사용자정의함수를 통해 Ajax.Request객체를 호출할 수 있으며 일반적으로 Complete 상태에서 Ajax.Request객체를 호출하고 있다

그 방법은 위의 예제(onComplete)처럼 요청옵션내 onXXXXX에서 간단히 설정하기만 하면  그 설정된 이름을 가진 함수를 통하여 XMLHttpRequest객체 자체가 될 하나의 인자와 response HTTP header(X-JSON)라는 또 하나의 인자를 가지는 객체를 전달 받을 수 있을 것이다

당신은 반환 데이타를 얻기 위해 이 객체를 사용하거나 호출된 HTTP 결과 코드를 포함하는 Status프로퍼티 체크를 하기 위해 이 객체를 사용할 지도 모른다.

 

또 다른 두개의 옵션은 결과에 대한 처리수행을 위해 사용될수 있다.

onSuccess옵션을 통해 AJAX호출이 에러없이 수행될 때 호출할 함수를 명시할 수 있다.

onFailure옵션은 반대로 에러가 발생할때 호출될 함수를 명시할 수 있다.

이 두가지 옵션에서도 onXXXXX에서 선택한 함수와 마찬가지로  AJAX호출시 전달되는 XMLHttpRequest객체나  evaluated X-JSON header를 전달하도록 할수 있을 것이다.

 

앞서 이야기 한 내용들을 토대로 간단한 예제를 만들어 보기로 하자

먼저 Ajax.Request 객체를 생성하는 함수를 만든다

 

function ajax_request(url, data) {

     var myAjax = new Ajax.Request(

              url,

              {method: 'post', parameters: data, onComplete: ajax_response}

              );

    }

 

두번째로 request가 끝나게 되면 호출될 ajax_response()라는 함수로 만들어 보자

 

function ajax_response(originalRequest) {

      if(!bHasRedirect) {

         //process originalRequest.responseText;

      } else {

          bHasRedirect = false;

          ajax_request(originalRequest.responseText, "");

      }

   }

 

이제 Ajax Request를 만들고 나면 만약 전역변수로 bHashRedirec를가 true로 설정하게 하는 또다른 Ajax.Request가 만들어지기거나 함수내 originalRequest.responseText()를 통하여 수행할 더이상의 코드가 존재하지 않을 때까지   response는 항상 ajax_response()를 호출할 것이다

 

Ajax.Responders 객체 사용하기

1.4.0 버전에서, 이벤트 반환 핸들링에 대하여 새로이 소개되고 있는 것이 있는데 만약 AJAX호출이 발생하더라도 특정 이벤트를 위해 항상 수행되어야 하는 코드를 가지고 있다면 이 새로운 Ajax.Responders 객체를 사용할수 있다고 한다 .

 

<script> 
     var myGlobalHandlers = {
         onCreate: function(){
             Element.show('systemWorking'); 
         }, 
         onComplete: function(){
             if(Ajax.activeRequestCount == 0){
                 Element.hide('systemWorking');
             }
         }
     };
 
     Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

 

위의 예에서와 같이 AJAX호출이 진행중이라는 시각적 표시를 보여주길 원한다고 했을 때. 당신은 두개의 전역 이벤트 핸들러를 사용할수 있다. 하나는 첫번째 호출이 시작되었을때 아이콘을 보여주는것이고 다른 하나는 적어도 하나가 끝났을때 아이콘을 숨기는 것이다.

 

더 자세한 사항은 Ajax.Request 참조문서나 options 참조문서를 참조하길 바란다

 

Ajax.Updater 클래스 사용하기

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>

 

Ajax.Updater 객체생성 코드는 Ajax.Request객체와 유사하지만.

인자가 하나 더 추가 되어 있습니다.

이것은 만약 html안에 이미 포맷팅한 정보를 가지고자 할때 Ajax.Updater 클래스를

사용하여 쉽게 채우고자 하는 위치point입니다

 

클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해보자.

 

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

위코드는에서는 앞서의 함수에서 보다 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시하였습니다.(이것은 onFailure옵션을 사용하여 수행한다).

또한 성공적으로 수행된 경우에만 활성화될 묶음자(placeholder)를 명시하였습니다.

 

첫번째 인자는 두가지 프로퍼티(success/failure)를 가지는데 위에서는 failure 프로퍼티를 사용하지 않고 onFailure옵션에서 reportError함수를 사용하여 에러상황을 표시하도록 하였습니다.

 

url로 호출된 서버 로직에서 HTML 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있습니다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해서는  객체 생성자의 마지막 인자에 evalScripts: true; 옵션을 추가하기만 하면 된다

.

좀더 상세한 설명을 원하신다면, Ajax.Request 참조문서와 Ajax.options 참조문서를 참조하세요.

'WEB2.0 > ajax' 카테고리의 다른 글

Ajax 마스터, Part 1: Ajax 소개  (0) 2006.06.02
Prototype.js 가이드 03 참조문서  (0) 2006.05.11
Prototype.js 가이드 01  (0) 2006.05.10
풍부한 웹 UI 구현을 위한 기술 집합체 _AJAX  (0) 2006.05.08
Ajax 개발을 위한 자바스크립트 다큐먼트 생성기- JSDoc  (0) 2006.04.12
 

Prototype.js 가이드 01

WEB2.0/ajax | 2006. 5. 10. 11:32
Posted by 시반

Prototype은 무엇인가.?

prototype.js는 Sam Stephenson에 의해 작성된 자바스크립트 라이브러리이며 웹2.0의 특성에 따라 작성된 코드들은 비동기적 웹페이지 구현시 많은 도움을 줄 수 있을 것입니다

 

 

ProtoType의 사용

 

prototype은 http://prototype.conio.net/에서 다운 받을 수 있으며 구현하고자 하는 페이지에서 다음과 같은 구문을 추가하면 prototype framework를 사용할 수 있다

 

<script src="/scripts/prototype.js" type="text/javascript"></script>

라이브러리를 사용하는 것은 반복적인 타이핑과 어구를 많이 줄일수 있게 됨으로서 작업 생산성 및 효율성을 높이는 데 있다

당연히 prototype.js에도 미리 정의된 많은 수의 객체와 유틸리티 함수를 가지게 되는데 어떤 것들이 있는지 살펴보도록 한다

 

유틸리티 함수들(utility functions)

 

$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키라고 할 수 있다. 예를 들면 DOM함수를 통해 특정id를 가진 요소 하나를 가져온다고 하자

 

 node = document.getElementById("elementID");

 

위의 식은 $()를 사용하여 다음과 같이 바꿀수 있다 

 

 node = $("elementID"); 

 

하지만 $()함수는 DOM함수와는 달리 여러개의 id를 사용할수 있다는 장점이 있다 이 때 반환하는 값은 Array객체를 반환한다

 

 allNodes = $("firstDiv", "secondDiv");

 

 for(i = 0; i < allNodes.length; i++) {

    alert(allNodes[i].innerHTML);

 }

 

이 함수의 또 다른 장점은 이 함수를 통하여 id문자열이나 요소객체 자체를 전달할 수 있기

때문에 인자타입을 가지는 다른 함수를 생성할때 매우 유용하다

$F() 함수 사용하기

$F() 함수는  DOM의 document.getElementById()함수에 대한 또 다른 단축키라 할 수 있다.

이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 

마찬가지로 요소 id나 요소객체 자체를 인자로 가질수 있다.

 

예를 들면 다음과 같은 Form필드가 존재한다고 하자

 <input type="text" id="textfield" name="textfield" />

 <textarea rows="5" cols="5" id="areafield" name="areafield"></textarea>

 <select id="selectfield" name="selectfield">

    <option value="1" selected>One</option>

    <option value="2">Two</option>

 </select>

 <input type="checkbox" id="checkfield" name="checkfield" value="1" checked />

각각의 필드값은 다음과 같이 가져올 수 있다

 $F("textfield");     // returns the value of the text input

 $F("areafield");   // returns the value of the textarea

 $F("selectfield"); // returns the selected value of the select

 $F("checkfield"); // returns undefined if not checked, or the value

 

$F()을 통해 쉽게 입력컨트롤의 값을 쉽게 가져올 수 있지만

라디오그룹에서는 사용하기 힘들다는 점과 $()와 같이 다수의 인자를 가질수 없다

$A() 함수 사용하기

$A() 함수는 인자들을 하나의 인자로 받아들여 Array객체로 변환한다

 

Array Class상속을 겸한 이 함수는 어떠한 enumerable list 형태도 Array객체로 변환 또는 복사 할 수 있다는 장점이 있다

예를 들면 다음과 같이 DOM의 NodeLists를 regular Arrays로 변환하기에 유용하다 

 <script>
    function showOptions() {
      var someNodeList = $('lstEmployees').getElementsByTagName('option');
      var nodes = $A(someNodeList);
      nodes.each(function(node) {
                         alert(node.nodeName + ': ' + node.innerHTML);
                       });
    }
 </script>
 
 <select id="lstEmployees" size="10" >
   <option value="5">Buchanan, Steven</option>
   <option value="8">Callahan, Laura</option>
   <option value="1">Davolio, Nancy</option>
 </select>
 
 <input type="button" value="Show the options" onclick="showOptions();">

 

 

$A() 의 또 하나의 장점은 함수생성시 인자의 수를 유연하게 받아들이게 한다는 점이다

 <script>

   function shoutOut(){

       sayHi('Hello, ', 'Homer', 'Bart', 'Marge', 'Snowball');

   }

 

   function sayHi(){

      var names = $A(arguments).slice(1);

      var phrase = arguments[0];

      for(i=0; i<names.length; i++)

          alert(phrase + names[i]);

   }

 </script>

 <input type="button" value="Say hi to everybody" onclick="shoutOut();" >

$H() 함수 사용하기

$H() 함수는 결합된 배열처럼 보이는 Hash객체로 변환한다.

 <script>

    function testHash() {

        var a = []; //let's populate the associative array

        a['first'] = 10;

        a['second'] = 20;

        a['third'] = 30;

 

        //now transform it into a hash

       var h = $H(a);

       alert(h.toQueryString());

       //displays: first=10&second=20&third=30 }

 </script>

$R() 함수 사용하기

$R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds) 형태의 다른 표현이다. 이 클래스에 대하여는 ObjectRange 클래스 문서를 통해 확인해보시길 바라며. 다음은 each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제입니다.

더 많은 메소드는 Enumerable 클래스 문서에서 보실 수 있습니다.

 <script>

    function demoDollar_R()

    {

       var range = $R(10, 20, false);

       range.each(function(value, index)

                         { alert(value); });

     }

 </script>

 <input type="button" value="Sample Count" onclick="demoDollar_R();" >

Try.these() 함수 사용하기

Try.these()함수는 개발자가 across Browser구현시 서로 다른 javascript등을 작성할 필요가 있는 코드생성시 도움을 주는 중요한 함수입니다

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

 <script>

     function test(){
       return Try.these(
        function() {
            alert("first");
            jkgjhgjhg        //intentional error
            alert("firsterror");
            return 1;
        },
        function() {
            alert("second");
            return 2;
        }
     );
    }

 </script>

 

 <input type="button" value="Try_these_test" onclick="test();" >

'WEB2.0 > ajax' 카테고리의 다른 글

Prototype.js 가이드 03 참조문서  (0) 2006.05.11
Prototype.js 가이드 02 _ Ajax support  (0) 2006.05.10
풍부한 웹 UI 구현을 위한 기술 집합체 _AJAX  (0) 2006.05.08
Ajax 개발을 위한 자바스크립트 다큐먼트 생성기- JSDoc  (0) 2006.04.12
자동완성기능 구현하기  (0) 2006.04.12
 
블로그 이미지

시반

시반(詩伴)이란 함께 시를 짓는 벗이란 뜻을 가지고 있습니다. 함께 나눌수 있는 그런 공간이길 바라며...

카테고리

분류 전체보기 (233)
개발 이야기 (73)
WEB2.0 (57)
DB2 (24)
MySQL (6)
오라클 (26)
기타 (44)
취미 (0)
잡담 (2)

티스토리툴바