Ext 介紹入門之 Manual:Core:Ext.Ajax 類

來源:互聯網
上載者:User
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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.