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)