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:

view plaincopy to clipboardprint?

1. Ext.Ajax.request({  
2.   url : 'ajax.php' ,   
3.   params : { action : 'getDate' },  
4.   method: 'GET',  
5.   success: function ( result, request ) {   
6.     Ext.MessageBox.alert('Success', 'Data return from the server: '+result.responseText);   
7.   },  
8.   failure: function ( result, request) {   
9.     Ext.MessageBox.alert('Failed', 'Successfully posted form: '+action.date);   
10.   }   
11. });  

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服务器端:

view plaincopy to clipboardprint?

1. // ajax.php  
2. <?php   
3. if ($_REQUEST['action'] == 'getDate') {  
4.   echo date('l dS /of F Y h:i:s A');  
5. }  
6.    
7. ?>  

// ajax.php<?php if ($_REQUEST['action'] == 'getDate') {  echo date('l dS /of F Y h:i:s A');} ?>

进阶例子 - 转换.responseText结果到JSON
HTML + javascript

view plaincopy to clipboardprint?

1. <div>  
2.   这里是一个简单的请求。  
3. </div>  
4. <div id="subButton"></div>  
5. <textarea id="log" cols="40" rows="10"></textarea>  
6.    
7. <script type="text/javascript">  
8.   function doJSON(stringData) {  
9.     try {  
10.       var jsonData = Ext.util.JSON.decode(stringData);  
11.       Ext.MessageBox.alert('Success', 'Decode of stringData OK  
12.             jsonData.date = '+ jsonData.date);  
13.     }  
14.     catch (err) {  
15.       Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);  
16.     }  
17.   }  
18.    
19.   function doAjax() {  
20.     Ext.Ajax.request({  
21.       url : 'ajax.php' ,   
22.       params : { action : 'getDate' },  
23.       method: 'GET',  
24.       success: function ( result, request) {   
25.         var textArea = Ext.get('log').dom;  
26.         textArea.value += result.responseText + "/n";   
27.         //Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);       
28.         doJSON(result.responseText);  
29.       },  
30.       failure: function ( result, request) {   
31.         Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date);   
32.       }   
33.     });  
34.   }  
35.    
36.   var button = new Ext.Button('subButton', {  
37.     text: 'Click to submit an AJAX Request',  
38.     handler: doAjax  
39.   });  
40. </script>  

<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 服务器端

view plaincopy to clipboardprint?

1. <?   
2. if ($_REQUEST['action'] == 'getDate') {  
3.   echo "{date: '" . date('l dS /of F Y h:i:s A') . "'}";  
4. }  
5.    
6. ?>  

<? 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/