Manual:Core:Ext.Ajax 类

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

配置项对象
已经全部归档到Ext.Ajax Class Doc

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

简单的例子
下面的例子会执行一个请求和完成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
            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') . "'}";
}
 
?>

转载自:http://extjs.com/learn/Manual:Core:Ext.Ajax_%28Chinese%29

译者姓名:Frank
译者博客:http://www.ajaxjs.com/blog/