Ext 介绍入门之 Manual:Core:Ext.Ajax 类

Ext.Ajax类

Ext.Ajax类是一个简单而清晰的XHR封装器，允许你快速而有效地执行AJAX请求。在本教程中，我们将会讨论除了公共方法request()外，还有怎么使用明文报码（Cleat Text）或解码JSON对象的强大扩展方法。

配置项对象

已经全部归档到Ext.Ajax Class Doc

配置项类型  

url	字符类型	必须的
params	已编码JSON的对象	可选的
method	'GET' 或 'POST'	可选的
success	匿名函数对象或已声明好的函数	必须的
failure	匿名函数对象或已声明好的函数	必须的
timeout	XHR超时的毫秒数	可选的

成功、失败的条件

success和failure这两个函数对象由配置项参数config负责传入。简单地说，我们会调用第一个 result 和第二个request。

结果对象产生的属性

result.responseText是由web服务器根据响应返回的明文报码。如果你有返回文本的100％控制权，并且是JSON格式的数据，那么你应该通过Ext.util.JSON.decode()函数来解码对象。个人更倾向于从服务器返回JSON数据。

如果服务器的响应的由类自动检测的话，result.responseXML 多用于包含有效的XML数据。

请求对象之属性

执行不同的动作（Action）会使用所有列出的属性。此时我还没需要用到这些属性。

简单的例子

下面的例子会执行一个请求和完成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', 'Successfully posted form: '+action.date); 
	} 
});

PHP服务器端:

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

进阶例子 - 转换.responseText结果到JSON

HTML + javascript

<div>
	这里是一个简单的请求。
</div>
<div id="subButton"></div>
<textarea id="log" cols="40" rows="10"></textarea>
 
<script type="text/javascript">
	function doJSON(stringData) {
		try {
			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() {
		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 服务器端

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

--Djliquidice 14:15, 3 August 2007 (CDT)