`
ttlz
  • 浏览: 98406 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ext.Ajax类

    博客分类:
  • JS
阅读更多
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') . "'}";} ?>
分享到:
评论

相关推荐

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.Ajax.request跨域

    标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员

    Ext.Ajax.request 小问题收集

    这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小问题。 首先,`Ext.Ajax.request`的基本语法如下: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', // 可选值有...

    ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常

    标题提到的"ext-basex.js进行Ext.Ajax.request同步请求 FF无法正常"问题,涉及到浏览器兼容性和异步/同步请求的理解。 `Ext.Ajax.request`是ExtJS中的一个方法,用于发起Ajax(异步JavaScript和XML)请求。它可以...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    EXT核心API详解

    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.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (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进行处理.doc

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    ExtJS入门教程(超级详细)

    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、...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...

    Ext.js教程和Ext.js API

    Ext.js 3.0的中文API提供了一个详细的类和方法参考,方便中文阅读者理解其工作原理。API文档通常包括以下内容: 1. **类结构**:列出所有可用的类,如Panel、Grid、Form等,以及它们之间的继承关系。 2. **类方法和...

    Ext2.0.2的Ajax请求拦截示例

    然而,如果我们需要为整个应用的Ajax请求设置统一的拦截器,可以使用`Ext.Ajax.on`方法来监听`beforerequest`和`requestcomplete`事件: ```javascript Ext.Ajax.on('beforerequest', function(connection, options...

    Ext ajax 上传文件

    Ext.Ajax.request({ url: 'upload.php', // 文件上传的服务器端处理程序 method: 'POST', useXhrUpload: true, headers: { 'Content-Type': undefined }, // 必须取消Content-Type以让浏览器自动设置 params: ...

    Ext.js 6 示例学习

    接下来,要熟悉Ext JS的API,这包括各种组件类、方法和配置选项。理解并熟练运用这些API能够帮助你创建出功能丰富的用户界面。同时,掌握MVC模式将有助于你更好地组织代码,提高代码复用性和可维护性。 除此之外,...

    Ext3.1 Ajax 精简包以及使用方法

    3. **发送数据:** 在`Ext.Ajax.request`中,可以通过`params`字段传递数据,或者使用`jsonData`、`xmlData`等字段直接传入JSON或XML格式的数据。 4. **处理响应:** 成功或失败的回调函数接收两个参数,分别是响应...

Global site tag (gtag.js) - Google Analytics