ext使用学习3
来源:互联网 发布:python 自定义迭代器 编辑:程序博客网 时间:2024/06/06 05:32
使用Ajax
在弄好一些页面后,你已经懂得在页面和脚本之间的交互原理(interact)。接下来,你应该掌握的是,怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)到数据库中。通过JavaScript异步无刷新交换数据的这种方式,就是所谓的Ajax。Ext内建卓越的Ajax支持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,UI元素根据回应(Response)作出更新。这是一个包含text input的表单,一个div用于显示消息(注意,你可以在html中加入下列代码,但这必须要访问服务器):
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />
接着,我们加入这些处理交换数据的JavaScript代码到文件js中:
Ext.onReady(function(){
Ext.get('oKButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({ url: [server url], //换成你的URL params: 'name=' + Ext.get('name').dom.value, text: 'Updating...' });
msg.show();
});
});
这种模式看起来已经比较熟悉了吧!先获取按钮元素,加入单击事件的监听。在事件处理器中(event handler),我们使用一个负责处理Ajax请求、接受响应(Response)和更新另一个元素的Ext内建类,称作UpdateManager。 UpdateManager可以直接使用,或者和我们现在的做法一样,通过Element的load方法来引用(本例中该元素是id为“msg“的 div)。当使用Element.load方法,请求(request)会在加工处理后发送,等待服务器的响应(Response),来自动替换元素的 innerHTML。简单传入服务器url地址,加上字符串参数,便可以处理这个请求(本例中,参数值来自“name”元素的value),而text值是请求发送时提示的文本,完毕后显示那个msg的div(因为开始时默认隐藏)。当然,和大多数Ext组件一样,UpdateManager有许多的参数可选,不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。
- ext使用学习3
- Ext JS 学习(3) Ext.Window 组件的使用
- ext使用学习1
- ext使用学习2
- ext使用学习4
- ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- Ext学习日记 grid使用
- Ext 学习(3)---ExtPanel
- Ext JS 学习(1) Ext.MessageBox.show()方法的使用
- Ext JS 学习(2) Ext.Panel 组件的使用
- Ext JS 学习(11) Ext.Template的使用
- Ext JS 学习(12) Ext.TreePanel的使用 第一式
- Ext Js 学习日记 (1) 开始使用Ext JS
- 学习EXT第四天--开始使用Grid
- ext学习之fckeditor的使用
- Ext学习笔记(2):Element使用Demo
- Ext学习笔记(5):DrawComponent使用 Demo
- 2012级C++第一学期期中教学调查及有关说明
- hashcode 的作用
- 计算器
- Excel 追加数据
- [C++]文本转Recordset
- ext使用学习3
- 上周总结
- 存储过程及流程控制
- DOS/Windows和Linux/Unix间文件格式和字符集转换
- 博客的开端,希望是个好的开始
- VC++2012编程演练数据结构《12》二叉排序树
- 《Android应用性能优化》试读:第一章:Java代码优化
- 封装 ASIHTTPRequest 多请求管理类
- android游戏开发自学笔记3-3