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') . "'}";} ?>
分享到:
相关推荐
在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...
标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...
环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员
这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小问题。 首先,`Ext.Ajax.request`的基本语法如下: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', // 可选值有...
标题提到的"ext-basex.js进行Ext.Ajax.request同步请求 FF无法正常"问题,涉及到浏览器兼容性和异步/同步请求的理解。 `Ext.Ajax.request`是ExtJS中的一个方法,用于发起Ajax(异步JavaScript和XML)请求。它可以...
ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...
25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、...
(1)Ext.FormPanel f.getForm().submit({ url:”... }, failure:function(c,v,e){} }) (2)Ext.Ajax.request Ext.Ajax.request({ url:”….”, params:{XX:xx….}, success: function (v,c) { var json=Ext.decode(v.r
Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
Ext.js 3.0的中文API提供了一个详细的类和方法参考,方便中文阅读者理解其工作原理。API文档通常包括以下内容: 1. **类结构**:列出所有可用的类,如Panel、Grid、Form等,以及它们之间的继承关系。 2. **类方法和...
然而,如果我们需要为整个应用的Ajax请求设置统一的拦截器,可以使用`Ext.Ajax.on`方法来监听`beforerequest`和`requestcomplete`事件: ```javascript Ext.Ajax.on('beforerequest', function(connection, options...
Ext.Ajax.request({ url: 'upload.php', // 文件上传的服务器端处理程序 method: 'POST', useXhrUpload: true, headers: { 'Content-Type': undefined }, // 必须取消Content-Type以让浏览器自动设置 params: ...
接下来,要熟悉Ext JS的API,这包括各种组件类、方法和配置选项。理解并熟练运用这些API能够帮助你创建出功能丰富的用户界面。同时,掌握MVC模式将有助于你更好地组织代码,提高代码复用性和可维护性。 除此之外,...
3. **发送数据:** 在`Ext.Ajax.request`中,可以通过`params`字段传递数据,或者使用`jsonData`、`xmlData`等字段直接传入JSON或XML格式的数据。 4. **处理响应:** 成功或失败的回调函数接收两个参数,分别是响应...