Ext入门4

 使用Ajax

      在弄好一些页面后,你已经懂得在页面和脚本之间的交互(interact)原理。接下来,你应该掌握的是,怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)到数据库中。通过JavaScript异步无刷新交换数据的这种方式,就是所谓的Ajax。Ext内建卓越的Ajax支持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,UI元素根据回应(Response)作出更新。这是一个包含text input的表单,一个div用于显示消息:

<div></div>
<div>
    Name: <input>
    <input>
</div>
<div></div>

      接着,我们加入这些处理交换数据的JavaScript代码:

Ext.
 Ext.., 
   msg = Ext.;
  msg.
   url: , 
   params:  + Ext...,
   text: 
  ;
  msg.;
 ;
;

      注意: 这个例子需要web server才可运行。 浏览器的URL地址不应是以file://开头,而是http://开头,否则的话Ajax的数据交互将不会工作。Localhost就可以工作得很好,但必须是通过http的。

      这种模式看起来已经比较熟悉了吧!先获取按钮元素,加入一个匿名函数监听单击。在事件处理器中(event handler),我们使用一个负责处理Ajax请求、接受响应(Response)和更新另一个元素的Ext内建类,称作UpdateManagerUpdater。UpdateManager可以直接使用,或者和我们现在的做法一样,通过Element的load方法来引用(本例中该元素是id为“msg“的div)。当使用Element.load方法,请求(request)会在加工处理后发送,等待服务器的响应(Response),来自动替换元素的innerHTML。简单传入服务器url地址,加上字符串参数,便可以处理这个请求(本例中,参数值来自“name”元素的value),而text值是请求发送时提示的文本,完毕后显示那个msg的div(因为开始时默认隐藏)。当然,和大多数Ext组件一样,Ext.Ajax 有许多的参数可选,不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

      最后一个关于Ajax隐晦的地方就是,服务器实际处理请求和返回(Resposne)是具体过程。这个过程会是一个服务端页面,一个Servlet,一个Http调度过程,一个WebService,甚至是Perl或CGI脚本,即不指定一个服务器都可以处理的http请求。让人无法预料的是,服务器返回什么是服务器的事情,无法给一个标准的例子来覆盖阐述所有的可能性。。

      使用Ajax的真正挑战,是需要进行适当的手工编码,并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择(最常用为JSON/XML)。 Ext没有跟任何服务器语言有独家联系,因此其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是EXT能处理的数据格式,Ext绝不会干涉服务器其他的事情!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章