`
ttlz
  • 浏览: 99315 次
  • 性别: 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

    ExtJS之Ext.Ajax.request用法详解.docx

    ExtJS之Ext.Ajax.request用法详解.docx

    ExtJS之Ext.Ajax.request用法详解.pdf

    ExtJS之Ext.Ajax.request用法详解.pdf

    Ext.Store的获取方法

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

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

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

    ExtJS之Ext.Ajax.request用法详解 (2).docx

    ExtJS之Ext.Ajax.request用法详解 (2).docx

    ExtJS之Ext.Ajax.request用法详解 (2).pdf

    ExtJS之Ext.Ajax.request用法详解 (2).pdf

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

    Ext.js教程和Ext.js API

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

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

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

Global site tag (gtag.js) - Google Analytics