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)