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') . "'}";} ?>

你可能感兴趣的:(JavaScript,Ajax,json,PHP,ext)