本文示例源代碼或素材下載
Asynchronous JavaScript™ and XML 或者說 Ajax 在目前的 Web 領域引起轟動，因為借助它，Web 設計人員可以創建出不必重新加載整個頁面就能響應用戶操作的應用程序，XForms 本身已具備這項功能。這篇技巧分別考察了 XForms 和 Ajax 版本以及如何將兩種技術結合起來。現在有很多資料說明如何實際發出 AJax 請求，但是對於如何使用返回的數據，XForms 提供了一些特殊的挑戰和機遇。
開始之前：關於本技巧
這篇技巧針對特定任務。關於 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 數據，從而根據外部數據進行任何修改。