From Learn About the Ext JavaScript Library

Contents 1 Ext.Ajax 클래스 1.1 Config objects 1.2 Success 와 Failure 상태 1.2.1 result 오브젝트를 위한 속성 1.2.2 request 오브젝트를 위한 속성 1.3 간단한 예제 1.4 고급 예제 - result.responseText를 JSON으로 변환

Ext.Ajax 클래스

Ext.Ajax 는 빠르고 효율적으로 Ajax 요청을 수행하기 위한 순수하고 간단 명료한 XHR 래퍼 클래스이다. 이 튜토리얼에서는 request public 메소드와 순수한 텍스트를 사용하거나 힘을 싣기 위해 JSON 오브젝트로 인코드 하는 것에 대해 논할 것입니다.

• clear text : 순수한 텍스트, 다른 말로 plain text라고도 함

Config objects

이것은 Ext.Ajax Class Doc에 모두 문서화 되어져 있다

Config	Type
url	string	required
params	JSON encoded object	optional
method	'GET' or 'POST'	optional
success	anonymous function object(익명함수) 혹은 이미 선언된 function	required
failure	anonymous function object(익명함수) 혹은 이미 선언된 function	required
timeout	XHR 타임아웃을 위한 밀리초	optional

Success 와 Failure 상태

성공과 실패의 함수 오브젝트는 두개의 파라미터 오브젝트를 전달 받을 것입니다. 간단하게 첫번째는 result를 그리고 두번째는 request을 호출할 것입니다.

result 오브젝트를 위한 속성

result.responseText 는 웹 서버에서 되돌아 온 응답에 대한 순수한 텍스트 입니다. 만약 100% 이상 응답 받은 텍스트를 제어하고 포맷화 된 데이터를 JSON으로 기대하고 있다면, 여러분은 Ext.util.JSON.decode() 함수를 통해서 오브젝트로 디코딩 해야 할 것입니다. 나는 개인적으로 서버에서 JSON 데이터를 반환되는 것을 선호합니다.

서버 응답이 유요한 XML 데이터를 포함하기 위해 클래스에 의해서 자동적으로 감지되어 result.responseXML 에 데이터로 채워진다.

request 오브젝트를 위한 속성

다음 프로퍼티의 어떤 것이든 다양한 액션을 수행하기 위해서 사용 될 것이다. 이 글을 작성할 때 그것들의 필요성을 갖지 않았다.

간단한 예제

다음 예제는 request를 실행할 것이고 Ext.MessageBox.alert를 수행할 것이다.

JavaScript:

Ext.Ajax.request({
	url : 'ajax.php' , 
	params : { action : 'getDate' },
	method: 'GET',
	success: function ( result, request ) { 
		Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 
	},
	failure: function ( result, request) { 
		Ext.MessageBox.alert('Failed', result.responseText); 
	} 
});

PHP Server Side:

// ajax.php
<?php
 
if ($_REQUEST['action'] == 'getDate') {
	echo date('l dS \of F Y h:i:s A');
}
 
?>

고급 예제 - result.responseText를 JSON으로 변환

HTML + javascript

<div>
	Here is a simple AJAX Request.
</div>
<div id="subButton"></div>
<textarea id="log" cols="40" rows="10"></textarea>
 
<script type="text/javascript">
        //Ext.Ajax.request 호출에 대한 성공 콜백 함수
	function doJSON(stringData) {
		try {
 
                        //성공시 넘어오는 stringData를 Ext.util.JSON.decode() 를 통해 
                           //JSON 오브젝트로 변환
			var jsonData = Ext.util.JSON.decode(stringData);
			Ext.MessageBox.alert('Success', 'Decode of stringData OK<br />jsonData.date = ' + jsonData.date);
		}
		catch (err) {
			Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
		}
	}
 
	function doAjax() {
                //XHR request를 위한 메소드 호출
		Ext.Ajax.request({
			url : 'ajax.php' , 
			params : { action : 'getDate' },
			method: 'GET',
                        //성공 시에 수행될 콜백 함수
			success: function ( result, request) { 
				var textArea = Ext.get('log').dom;
				textArea.value += result.responseText + "\n"; 
				//Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 		
				doJSON(result.responseText);
			},
                        //실패 시에 수행될 콜백 함수
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date); 
			} 
		});
	}
 
	var button = new Ext.Button('subButton', {
		text: 'Click to submit an AJAX Request',
		handler: doAjax
	});
</script>

PHP Server Side

<?
 
if ($_REQUEST['action'] == 'getDate') {
	echo "{date: '" . date('l dS \of F Y h:i:s A') . "'}";
}
 
?>

--JGarcia@TDG-i.com 14:15, 3 August 2007 (CDT)