• ext使用ajax


    使用Ajax
    在弄好一些页面后,你已经懂得在页面和脚本之间的交互原理(interact)。接下来,你应该掌握的是,
    怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)
    到数据库中。通过JavaScript 异步无刷新交换数据的这种方式,就是所谓的Ajax。Ext 内建卓越的Ajax 支
    持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,UI 元素根据回应(Response)
    作出更新。这是一个包含text input 的表单,一个div 用于显示消息(注意,你可以在ExtStart.html 中加入
    下列代码,但这必须要访问服务器):
    <div id="msg" style="visibility: hidden"></div>
    Name: <input type="text" id="name" /><br />
    <input type="button" id="oKButton" value="OK" />
    接着,我们加入这些处理交换数据的JavaScript 代码到文件ExtStart.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 请求有不同的方案。而这里仅演示最简单的那种。
  • 相关阅读:
    查找算法之——符号表(引入篇)
    排序算法之——优先队列经典实现(基于二叉堆)
    C# Timer和多线程编程、委托、异步、Func/Action
    Tomcat汇总-部署多个项目(不同端口)
    数据库汇总(MySQL教材)
    基础知识
    常用工具&网址
    Phython开发
    单元测试
    软件项目过程和文档
  • 原文地址:https://www.cnblogs.com/winner/p/1242914.html
Copyright © 2020-2023  润新知