作爲 Domino 開發人員，瀏覽器應用的開發是其中重要的一部分。而瀏覽器應用開發方面會有許多新的技術和方法出現。如何將這些新的技術和方法運用到 Domino 環境中是 Domino 開發人員需要面對的一個重要問題。
目前，我們正處於在 Web 2.0 的時代，在這個偉大的時代出現了大量的瀏覽器技術，其中有代表性的就是 Ajax。通過 Ajax，我們可以讓客戶端在不刷新網頁的情況下與服務器交換數據，從而生成真正動態的網頁。對 Ajax 的使用包括一定的低層編碼工作，爲了簡化這一工作，人們提出了 Ajax 框架的概念，將 Ajax 相關的低層編碼封裝起來，裝配成簡單易用的小組件。而 Dojo 則是 Ajax 框架中極爲優秀的一個。
本文並不會詳細地介紹 Ajax 與 Dojo，有關 Ajax 與 Dojo 的具體內容請參考 相關資源。同時，本文也不會詳細介紹 Domino 的設計方法，本文的讀者需要對 Domino 開發有一定的經驗。本文主要是介紹如何在 Domino 環境中使用 Dojo 這一框架，並將 Dojo 與 Domino 的設計元素結合起來。
 |
|
|||||||||
Ajax 的英文全名是： Asynchronous JavaScript and XML，中文意思就是“異步的 JavaScript 和 XML”。其中 JavaScript 用於前臺處理，XML 用於前臺與後臺的數據傳遞。之所以稱之爲“異步”，是因爲 Ajax 使用了異步的方式與服務器交互，當前臺處理的 JavaScript 向後臺發送完數據請求後，程序控制權會返回給 JavaScript。當服務器在後臺對請求進行響應的時候，前臺的 JavaScript 可以繼續運行，執行其它操作。當服務器端處理完請求並返回結果後，會在前臺觸發事先指定的方法，通過這一方法對返回結果進行處理。
Ajax 所擁有的這種異步通訊能力在低層而言得益於一個新的 JavaScript 對象：XmlHttpRequest。它的核心功能是向指定的服務器發送一個 HTTP 請求，同時指定一個 JavaScript 方法作爲回調函數。當這個 HTTP 請求被髮送後，當前網頁不需要被刷新。同時，雖然被指定的回調函數會等待服務器的處理結果，但是前臺的 JavaScript 可以繼續工作，響應用戶在前臺的其它操作。
使用 Ajax 技術，開發人員需要建立 XmlHttpRequest 對象，並實現回調函數。如果在每一個需要的網頁元素上都實現這樣細節，會有很大工作量，同時代碼也不易管理。在這種情況下，人們提出的 Ajax 框架的概念，通過 Ajax 技術實現了大量實用的小組件，開發人員只需要調用小組件就可以和服務器進行異步交互。
在 Ajax 框架中，Dojo 是其中極爲優秀的一個。Dojo 是一個開源項目，雖然在 Dojo 的主頁上，他們只是把 Dojo 定義成一個開源的 DHTML 項目，但是它無疑是一個充分發揮 Ajax 優勢的框架。
 |
|
因爲 Domino 是一個完整的 HTTP 服務器，在不添加其它框架的情況下，開發人員都可以在 Domino 環境裏通過編寫代碼實現 Ajax 調用，從而實現複雜的異步應用。爲了讓讀者集中瞭解在 Domino 上實現 Ajax 調用的關鍵，下面用最簡單的例子進行說明。
首先，爲了測試需要，我們在測試服務器上建立一個測試數據庫，名爲：ajaxsample.nsf。 然後，在該數據庫創建一個表單，名爲：SampleAJAX。此外，在同一數據庫創建一個頁面名爲 samplepage，裏面輸入文本“testing page”作爲內容。我們將在表單 SampleAJAX 裏實現 Ajax 調用，在不刷新當前頁面的情況下動態獲取頁面“samplepage”的內容。
在表單 SampleAJAX 中的“JS Header”事件中輸入如下代碼：
var oXHR;
function mycallback() {
if (oXHR.readyState == 4) {
if (oXHR.status == 200) {
alert(oXHR.responseText);
} else {
alert('error');
}
}
}
|
然後在表單中創建一個按鈕和一個可編輯的文本域，按鈕用於觸發 Ajax 調用，可編輯的文本域用於證明當前頁面是否被刷新。完成以上步驟後的結果如下圖所示：
然後，在按鈕的 onclick 事件中加入以下代碼：
oXHR = new ActiveXObject("Microsoft.XMLHTTP");
oXHR.onreadystatechange = mycallback;
oXHR.open('GET', 'samplepage?openpage', true);
oXHR.send(null);
|
完成後的結果如下圖所示：
現在，第一個調用 Ajax 的表單已經創建好了，可以開始在瀏覽器上測試它。通過 URL http://<服務器名>/ajaxsample/SampleAJAX?openform 打開名爲 SampleAJAX 的表單。在測試輸入框中隨意輸入一些字符，然後點擊按鈕。我們可以發現，在測試輸入框的內容沒有被清除的情況下，瀏覽器獲得了頁面 sampleage 的內容，並通過提示框顯示出來。結果如下：
圖 3. 通過 Ajax 調用獲得頁面 sampleage 的 HTML 代碼內容
在成功實現第一個調用 Ajax 的表單後，我們回過頭來看看它是怎麼工作的。
當用戶點擊表單中的按鈕時，該按鈕的 onclick 事件被觸發，在該按鈕的 onclick 事件中我們加入了以下代碼，這些代碼所做的工作，正如註釋所解釋的，向服務器發送了一個動態 HTTP 請求：
oXHR = new ActiveXObject("Microsoft.XMLHTTP");
// 通過 new ActiveXObject 創建 XmlHttpRequest 對象
//ActiveXObject 是微軟對 XmlHttpRequest 對象的實現，在 IE 上可以支持
oXHR.onreadystatechange = mycallback;
// 指定回調函數爲 mycallback，這一函數是在 JS Header 中定義好的
oXHR.open('GET', 'samplepage?openpage', true);
// 指定這次動態 http 請求的目標 URL，本例中是打開同一服務器上相同數據庫中名爲 samplepage 的頁面
oXHR.send(null);
// 發送請求
|
在請求發送之後，當前的表單不需要刷新，所以測試輸入框中的內容不會被清空。服務器接收到請求後對請求進行處理並將結果返回給瀏覽器。根據上面的代碼，瀏覽器在接收到返回結果後會調用名爲 mycallback 的函數。mycallback 函數對返回的數據進行了處理，如下面註釋所解釋的：
function mycallback() {
if (oXHR.readyState == 4) {
if (oXHR.status == 200) {
// 如果返回的結果碼是 200，表示服務器處理請求成功
// 將返回結果的文本信息通過提示框顯示出來
alert(oXHR.responseText);
} else {
// 如果返回的結果碼不是 200，表示服務器處理請求時出錯，顯示“error”
alert('error');
}
}
}
|
|
|
通過上面的樣例我們知道在 Domino 上實現 Ajax 調用需要一系列的工作，如果將它用於表單設計中則會要求大量的編碼工作。爲了簡化這些工作，我們可以直接使用 Dojo 框架。
下面描述的是在 Domino 上配置使用 Dojo 的詳細步驟：
- 下載 Dojo 包
在 Dojo 項目的 官方主頁 上有一個紫色的“0.4.x Ajax Edition”按鈕，點擊可以直接下載 Dojo 包。
- 解壓 Dojo 包
Dojo 包下載後是一個後綴爲 tar1.gz 的文件，可以通過 winzip 進行解壓，解壓後出現一個後綴爲 tar 的文件，可以通過 winzp 再次進行解壓。解壓出現的 dojo-0.4.3-ajax 目錄包含了 Dojo 包的所有文件。
- 將 Dojo 包部署在 Domino 上
將 Dojo 包部署在 Domino 上主要是將 Dojo 包裏的文件放入 Domino 的 html 目錄中。缺省情況下，Domino 的 html 目錄是數據目錄下的 domino/html 目錄，比如，假設 Domino 安裝時指定的數據目錄是：C:/Lotus/Domino/data/，則 Domino 的 html 目錄爲 C:/Lotus/Domino/data/domino/html。爲了便於管理，一般是在 html 目錄下再創建一個目錄，如 dojo，然後將 Dojo 包裏的所有文件拷貝到這個新建的目錄中，如下圖所示：
圖 4. html 目錄下創建的 dojo 目錄![圖 4. html 目錄下創建的 dojo 目錄]()
- 在設計元素中引入 Dojo 包
爲了在 Domino 的設計元素中使用 Dojo 元素，需要將 Dojo 包引入到設計元素中。在標準的 html 頁面中，引入 Dojo 包的方式是在
header標籤內通過<script>標籤指定。在 Domino 設計元素中有對應的“HTML 首頁內容”設置，可以通過它指定生成的 html 頁面中header的內容。以在表單中加入 Dojo 按鈕爲例，在表單的“HTML 首頁內容”中加入以下內容，注意加入內容前後的引號：
清單 5. 在頁面中引入 Dojo 包"<title>Ajax Dojo Domino!</title> <script type=/"text/javascript/" src=/"/dojo/dojo.js/"> </script> <script type=/"text/javascript/"> dojo.require(/"dojo.widget.Button/"); </script>"其中各部分的主要作用如下：
<title></title>部分是爲表單指定標題，這一行對於實現 Dojo 而言是可選的。src=/"/dojo/dojo.js/"是爲表單指定 Dojo 包所在的位置，如果在第三步中將 Dojo 包部署到了其它目錄，在這裏需要作對應的調整。dojo.require(/"dojo.widget.Button/");爲表單引入了 Dojo 組件中的按鈕組件，根據使用組件的不同，這一行會有所變化，如dojo.widget.Dialog等。
- 在設計元素中使用 Dojo 元素
在設計元素中引入 Dojo 包後可以開始使用 Dojo 組件了。在標準的 html 中使用 Dojo 組件是通過標籤屬性指定的，在 Domino 設計元素中則可以通過內置 html 的方式或者是指定元素 html 屬性的方式使用 Dojo 組件。以內置 html 方式爲例，在表單中加入 Dojo 按鈕的代碼如下：
<button dojoType="button" onclick="alert('click')">Click here</button>輸入後注意選中這些內容，再選擇“文本 -> 內置 html”將它們設置成內置 html。其中
dojoType="button"用於指定按鈕是一個 Dojo 按鈕，其它元素與標準的 html 按鈕相同。
完成第四步和第五步後的結果示意圖如下：
以上面提到的表單爲例，完成後進行測試時可以看見表單中出現了 Dojo 的按鈕組件，點擊後出面“click”字樣，如下圖所示：
|
|
在以上的 Dojo 例子中，我們實現了一個 Dojo 按鈕。在這個例子中，Dojo 組件並沒有體現動態頁面訪問，因爲它沒有進行 Ajax 調用。
在 Dojo 組件中，有部分組件直接體現了 Ajax 調用，其中 ComboBox 組件是有代表性的一個。ComboBox 組件是一個組合框。對於普通的 html 組合框，頁面設計者需要在設計組合框的時候指定組合框的選擇項。而 Dojo 的 ComboBox 組件不同，在頁面中使用它的時候只是指定了選擇項的來源，當用戶點擊組合框的下拉按鈕時瀏覽器才從服務器動態獲得選擇項。下面就以 Dojo 的 ComboBox 爲例說明 Dojo 中的 Ajax 調用。
根據上面的描述，在 Domino 設計元素中使用 Dojo 組件需要五個步驟，其中前三個步驟屬於在 Domino 服務器層面的設置，對於這個服務器上的所有設計元素而言是可以共享的，前三個步驟在一個服務器上只需要完成一次。由於我們在上面的章節中已經完成了前三個步驟，下面只需要完成後兩個步驟：
- 在設計元素中引入 Dojo 包。
- 在設計元素中使用 Dojo 元素。
爲了在表單中使用 Dojo 的 ComboBox 元素，我們需要在表單的“HTML 首頁內容”中指定 Dojo 包的位置，同時引入 dojo.widget.ComboBox 元素，代碼如下：
"<title>Insert title here</title>
<script type=/"text/javascript/" src=/"/dojo/dojo.js/">
</script>
<script type=/"text/javascript/">
dojo.require(/"dojo.widget.ComboBox/");
</script>"
|
在表單中使用 Dojo 的 ComboBox 元素，我們可以通過內置 html 的方式在表單中使用 html 編碼，代碼如下：
<select dojoType="ComboBox" value="this should never be seen - it is replaced!"
dataUrl="comboBox.js" style="width: 300px;" name="foo.bar1" maxListLength="15">
</select>
|
其中 dojoType="ComboBox" 指定了這個元素是一個 Dojo 的 ComboBox，value= 所指定的內容是給 Dojo 代碼進行處理的。dataUrl="comboBox.js" 指定了該組合框的選擇項的來源，這裏的 comboBox.js 我們需要通過 Domino 數據庫的共享資源創建，具體的步驟在後面描述。
完成以上兩步後的結果如下圖：
此時對錶單進行測試已經可以在瀏覽器上看到 Dojo 的 ComboBox 的顯示效果，但是當我們點擊下拉框時會發現選擇框是空的。因爲我們通過 dataUrl="comboBox.js" 所指定的選擇項來源“comboBox.js”並不存在。
在 Dojo 包中有一個目錄，名爲 tests/widget，裏面包含了一些用於演示的樣例文檔，其中的 comboBoxData.js 包含了一些樣例選擇項。我們可以通過 Domnio 的“共享資源 -> 文件”將文件 comboBoxData.js 引入至 Domino 數據庫。在 Lotus Domino 設計端，選擇“共享資源 -> 文件 -> 新建文件資源”，然後選擇 Dojo 包所在的目錄下的以下文件：tests/widget/comboBoxData.js，注意，引入後一定要將文件資源名稱改爲“comboBox.js”。如下圖所示：
完成 ComboBox.js 的引入後再次對 ComboBox 表單進行測試則可以看到 Dojo 的 ComboBox 是如何從後臺動態獲得選擇項的。結果如下圖：
|
|
在以上的樣例中，我們在表單中使用了 Dojo 的元素，但是我們沒有將 Dojo 元素和 Domino 的對應元素結合起來。如組合框 ComboBox，能否將用戶所選擇的內容保存到 Domino 文檔中呢？
這樣一個問題引出一系列的相似問題。在 Domino 數據庫中有各種各樣的設計元素，大的如表單、視圖、頁面、大綱等等，小的有計算文本、文本域、組合框、富文本框、操作、按鈕等等。對於 Domino 應用開發人員而言，這些設計元素是 Domino 應用的構成關鍵，通過它們可以形成前臺表達與後臺數據之間的互動。Dojo 的元素主要集中在前臺的表達上，它們不能與 Domino 服務器形成有效的數據交互。因爲 Domino 平臺上的數據獲取方式與提交方式與一般的 Web 應用平臺不同。如表單的保存，是由 Domino 根據 @command([filesave]) 命令生成動態的 submit 方法。又如表單中的域，如果在前臺通過 html 生成一個輸入框，在表單中沒有對應的域，輸入框的信息是不會被保存在 Domino 的文檔中的。
所以，在 Domino 上有效使用 Dojo 的方式是將 Domino 設計元素與 Dojo 元素結合起來，在前臺表達時使用 Dojo 元素，在與後臺進行數據交互時藉助 Domino 原有的設計元素。
結合 Domino 設計元素與 Dojo 元素的方式有兩種，一種比較簡單，可以直接在 Domino 設計元素的 html 屬性中使用 Dojo 屬性，使 Domino 設計元素在瀏覽器上直接表現爲 Dojo 元素。另一種同時創建 Domino 設計元素與 Dojo 元素，通過名稱或者是其它方式將兩個元素連接起來。
下面通過兩個例子簡要說明第一種方法，將 Dojo 裏的時間選擇框使用在 Domino 表單中原有的時間域中。
- 首先創建一個表單，並在表單中加入一個時間域，因爲時間域在瀏覽器上無法直接表達，它在瀏覽器上會表現成爲一個可輸入的文本框。
- 然後，爲了使用 Dojo，在該表單的“HTML 首頁內容”中加入相應的引入 Dojo 的代碼，爲了方便，可以在
require語句中通過dojo.widget.*引入所有元素。 - 最後，在時間域的 HTML 屬性頁的“類”一欄中填入“dojo-DropDownDatePicker”，這一設置說明該域使用 Dojo 的時間選擇框。
完成後的結果如下圖：
測試結果如下：
|
|
對於 Domino 開發人員而言，Dojo 是一個 Web 應用開發的有力工具，它可以幫助 Domino 開發人員實現豐富的界面和更強大的功能。當然，在 Domino 上有效地使用 Dojo 需要更多的工作，需要更多的人進行創新的工作。本文只是介紹了我們需要邁出的第一步，希望可以幫助讀者更快地開展工作。
學習
- 開始瞭解 IBM Lotus Notes and Domino V8 技術內容。
- 閱讀 developerWorks 文章 “使用 Ajax 操縱 Lotus Notes 文檔”。
- 閱讀 developerWorks 文章 “開發 IBM Lotus Domino Web 2.0 客戶機”。
- 閱讀關於 IBM Lotus Notes 和 Domino 的更多信息。
- Ajax 技術資源中心：developerWorks 上所有有關 Ajax 的問題都可以在這裏找到解答。
- 訂閱 Ajax 相關文章和教程 的 RSS 提要：獲得即將發表的 Ajax 相關文章和教程的通知（查看 developerWorks 內容 RSS 提要 瞭解更多的信息）。
討論