yui-ext基础入门(4)

还有更多的..

这只是冰山一角。还有一打的UI Widgets可以供调用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。请参阅API文档中范例演示。

使用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方法来访问（本例中该元素是“msg“的div）。当使用Element.load方法，请求（request)会被加工处理后发送，等待服务器的响应（Response），来自动替换元素的innerHTML。简单传入服务器url地址，加上字符串参数，便可以处理这个请求（本例中，参数值来自“name”元素的value),而text值就是请求发送时提示的文本，完毕后显示那个msg的div（因为开始时默认隐藏）。当然，和大多数Ext组件一样，UpdateManager有许多的参数可选，不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

PHP ：

以下为引用的内容： <? if(isset($_GET['name'])) { echo 'From Server: '.$_GET['name']; } ?>

ASP.NET：

以下为引用的内容： protected void Page_Load(object sender, EventArgs e) { if (Request["name"] != null) { Response.Write("From Server: " + Request["name"]); Response.End(); } }

Coldfusion：

以下为引用的内容： <cfif StructKeyExists(url, "name")> <cfoutput>From Server: #url.name#</cfoutput> </cfif>

最后一个关于Ajax的谜题就是，服务器实际处理请求和返回（Resposne）的具体过程。这个过程会是一个服务端页面，一个Servlet，一个Http处理器，一个WebService,甚至是Perl或CGI脚本，即任何一个服务器都可以处理http请求。无法预料的是，服务器返回什么是服务器的事情，无法给一个标准的例子来覆盖所有的可能性。(这段代码输出刚才我们传入'name'的那个值到客户端，即发送什么，返回什么）。

使用Ajax的真正挑战，是需经过适当处理过的手工代码，并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择（最常用为JSON/XML)。正因Ext是一种与服务器中立的语言，使得其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是合适的数据格式，Ext绝不会过问服务器的事情！要全面讨论这个问题，已超出本文的范围。推荐正在使用Ajax的您，深入阅读Ext Ajax教程。