请访问 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> <xforms:instance src="wisdom.xml"/> <xforms:submission action="http://localhost/newwisdom.xml" method="post" replace="instance"instance="instance_model_pearls"/> </xforms:model> <link href="gen_default.css"/> </head> <body> <h1>Cowboy Wisdom</h1> <xforms:output 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 ref="/pearls/pearl[2]" model="model_pearls" /> <form> <input type="button" value="Change saying" /> </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 samplesxforms_ajax_source.zip4KB
参考资料
developerWorks: 登录
标有星（*）号的字段是必填字段。
相关文章
精彩导读
热门资讯
关注我们
