当前位置>>
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)
