Winner.Net(2007)

======================================================
注：本文源代码点此下载
======================================================

使用ajax

在弄好一些页面后,你已经懂得在页面和脚本之间的交互原理(interact)。接下来,你应该掌握的是,

怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)

到数据库中。通过javascript 异步无刷新交换数据的这种方式,就是所谓的ajax。ext 内建卓越的ajax 支

持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,ui 元素根据回应(response)

作出更新。这是一个包含text input 的表单,一个div 用于显示消息(注意,你可以在extstart.html 中加入

下列代码,但这必须要访问服务器):

name:

接着,我们加入这些处理交换数据的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 请求有不同的方案。而这里仅演示最简单的那种。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/