级别： 中级 Nicholas Chase (ibmquestions@nicholaschase.com), 自由撰稿人, Backstop Media
2007 年 4 月 02 日 Asynchronous JavaScript™ and XML 或者说 Ajax 在目前的 Web 领域引起轰动，因为借助它，Web 设计人员可以创建出不必重新加载整个页面就能响应用户操作的应用程序，XForms 本身已具备这项功能。这篇技巧分别考察了 XForms 和 Ajax 版本以及如何将两种技术结合起来。现在有很多资料说明如何实际发出 Ajax 请求，但是对于如何使用返回的数据，XForms 提供了一些特殊的挑战和机遇。
 | | 请访问 Ajax 资源中心，这个一站式信息交换中心提供了关于 Ajax 编程模型的文章和教程、讨论论坛、blog、wiki、活动和新闻。如果有的话，都能从这里找到。 |
|
开始之前：关于本技巧
这篇技巧针对特定任务。关于 XForms 的背景信息，请参阅系列文章 XForms 专题。
本技巧中使用的 XForms 例子经过了测试，在 Firefox 1.5（安装有 XForms 扩展）和 Microsoft® Internet Explorer 6（安装有 Formsplayer 控件）上均能运行。下载 包括用于 Firefox 的 XHTML 文件和用于 IE 的 HTML 文件。
应用程序
XForms 提供了自己的 Ajax 版本，无需替换整个页面就能修改定义页面内容的数据。例如，假设页面收集了一些牛仔名言。实例文档可能如清单 1 所示。
清单 1. 实例数据
<pearls>
<pearl>
Never ask a barber if he thinks you need a haircut.
</pearl>
<pearl>
Making it in life is kind of like busting broncos. You're
going to get thrown a lot. The simple secret is to keep getting
back on.
</pearl>
<pearl>
Never miss a good chance to shut up.
</pearl>
<pearl>
The quickest way to double your money is to fold it over and
put it back in your pocket.
</pearl>
</pearls>
|
可以建立清单 2 所示的窗体。
清单 2. 窗体
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="model_pearls">
<xforms:instance id="instance_model_pearls" src="wisdom.xml"/>
<xforms:submission id="submit_model_pearls"
action="http://localhost/newwisdom.xml"
method="post" replace="instance"
instance="instance_model_pearls"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1>Cowboy Wisdom</h1>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
结果如图 1 所示。
图 1. 基本页面
请注意，output 元素的 ref 属性是一个包含位置的 XPath 语句。通过控制该 XPath 语句。就能控制页面的外观。
也能通过控制实际数据来控制页面。您可能还注意到，清单 1 中的粗体文本是关于 submission 元素的信息。这里告诉 XForms 引擎不需要替换页面，而是替换特定的实例。发出对该 URL 的请求，将返回数据不同的相同结构，从而立即得到新数据。比如，如果单击 Submit 按钮，浏览器加载另一篇文档，并且由于 output 语句设置为总是在同一位置进行查找，就会使用该位置的数据填充窗体，如图 2 所示。
图 2. 更换页面的一部分
必须使用脚本的情况
无论是否愿意，有时候必须使用 JavaScript。也许必须在使用数据之前以某种方式通知要处理的数据，或者数据来自不能控制的站点。一种办法是使用 JavaScript 检索数据然后添加到页面中。
关键是了解不能像普通的 HTML 页面那样直接向元素添加数据。而必须将信息放到实例中，然后处理指定 XForms 控件内容的 XPath 表达式。
下面的例子通过在页面中增加了一个按钮来说明这一点（如清单 3 所示）。
清单 3. 添加脚本
...
<body>
<h1>Cowboy Wisdom</h1>
<script type="text/javascript">
var whichPearl = 0;
function choosePearl(){
if (whichPearl == 0) {
whichPearl = 1;
} else if (whichPearl == 1) {
whichPearl = 2;
} else if (whichPearl == 2) {
whichPearl = 3;
} else if (whichPearl == 3) {
whichPearl = 0;
}
refString = "/pearls/pearl["+whichPearl+"]";
theTarget = document.getElementById("thePearl");
theTarget.setAttribute("ref", refString);
}
</script>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<form>
<input type="button" value="Change saying"
onclick="choosePearl();" />
</form>
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
函数本身很简单，循环使用几个数值。在实际的应用程序中，这些脚本可用于发送 Ajax 请求和处理返回的数据。对每个索引值，可以为 thePearl 元素的 ref 属性创建新的文本。
下面添加 from which 函数来调用该脚本。重新打开网页就能看到新增加的按钮，还可以单击该按钮。每次单击它的时候，ref 属性就会改变，网页自动修改数据来和 XPath 语句匹配，如图 3 所示。
图 3. 新脚本
结束语
XForms 已经提供了某些类似 Ajax 的功能，比如在不重新加载页面的情况下修改其中的数据。另一方面，如果必须借助脚本，则可以操纵定义了 XForms 窗体外观的 XML 数据，从而根据外部数据进行任何修改。
下载 | 描述 | 名字 | 大小 | 下载方法 |
|---|
| Ajax XForms samples | xforms_ajax_source.zip | 4KB | HTTP |
|---|
参考资料
关于作者 | | | Nicholas Chase 曾经参与多家公司的网站开发，包括 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers。Nick 曾经做过高中物理教师、低放射性废弃设备管理员、在线科幻杂志的编辑、多媒体工程师、Oracle 教员以及一家交互通信公司的首席技术官。他出版了多部著作，包括 XML Primer Plus（Sam's）。 |
对本文的评价
| 
