Jaxcent AJAX 開發架構學習筆記

Jaxcent AJAX 開發架構學習筆記

 

—— 前天在網上無意中看到一個名為 Jaxcent 的 AJAX 開發架構，看過官方資料後覺得還有點兒意思，於是下回來試試，覺得確實有其存在的意義，在小規模的 Web/AJAX 應用開發中，尤其是有獨立的設計人員和編程人員的小團隊開發中，確實能起到提高生產力的作用。所以邊學邊把對此架構的理解記錄下來備忘。

* 由於接觸 Java 不久（實際上不到 3 周），文中對 Java 本身及相關工具的理解有限，難免有偏頗錯漏之處，留待修正改進。

 

---------------------
 一、Jaxcent 能做什麼
---------------------
　　Jaxcent 旨在提供一個用於 AJAX 編程開發的，基於純 Java 的架構及 API。

 

　　“Jaxcent: Java-only AJAX programming. JavaScript programming not required!”

　　正如其官方文檔中說的：JavaScript 指令碼編程不再是必需的了。

　　需要注意的是，只有當你的 AJAX 應用的服務端打算用 Java 編寫時，Jaxcent 才有用武之地。

 

---------------------
 二、Jaxcent 的特色
---------------------
1. 穩定良好的通用性

 

　　1.1. 可以方便地部署於任何支援 Java Servlet 的容器或應用伺服器內。
　　1.2. 通過配置可工作於 IIS 或是 Apache Web Servers。
　　1.3. Jaxcent 自行提供了一個簡易的 Servlet 容器，可以實現獨立的部署和運行。

2. 簡潔明晰的編程模型

 

　　通常情況下，開發 AJAX 應用時，程式員不得不編寫用戶端 JavaScript 指令碼以實現基本的 B/S 通訊、DOM 控制、狀態維護及更新，以及其它一些繁複的工作。當使用 Jaxcent 架構進行 AJAX 開發時，一切都不一樣了，用戶端指令碼簡化到僅需一行：引入 Jaxcent 架構提供的一個 .js 檔案，僅此而已。當然，如果您的應用中確實還需要自行編寫更多的指令碼以實現額外的功能，那與 Jaxcent 並不衝突。

 

　　之後的開發工作重心，就完全轉移到了服務端的 Java 程式中，幾乎所有原本在用戶端指令碼裡實現的具有 AJAX 風格的功能，現在都能在服務端施行。前台頁面的設計者不必再時刻當心他們是否忘了給某個 BUTTON 添加點擊事件，或是誤刪了程式員們寫好的事件關聯。而程式員也不需要在大片的 HTML 標籤裡尋找合適的添加事件的位置。

在服務端開發中，Jaxcent 也提供了方便的使用 session 及 application context 的方法，在必要的時候，各種需要維或同步狀態的內容，也可自動記入 session 條目中。

3. 易於實施及應用到項目中

　　如果要將 Jaxcent 應用到現有的或是正在開發中的項目，不需要花費太多精力。因為項目並不需要全部轉換為 Jaxcent 架構，只需要新添加的頁面或模組遵循 Jaxcent 規範即可。如果已有的部分希望轉換為使用 Jaxcent 架構，要做的也僅是將部分代碼改寫到服務端 Java 程式中，用戶端要做的，僅僅是刪掉舊的 JavaScript 指令碼，在將來可能發生的功能改變時，用戶端的維護僅由藝術或設計人員即可獨立完成。

 

----------------------
 三、Jaxcent 印象執行個體
----------------------
　　我們以一個簡單的 AJAX 應用為例，要實現的功能是通過 AJAX 技術，在用戶端頁面上定時同步顯示伺服器目前時間。

 

　　用標準的 AJAX 方法實現此功能亦不複雜：

 

　　　1. 在頁面裡啟動一個計時器.
　　　2. 建立 XMLHttpRequest 對象執行個體，設定回呼函數.
　　　3. 計時器事件發生時，通過 XMLHttpRequest 執行個體向服務端發送請求.
　　　4. 在回呼函數接收到服務端返回的時間資料後，更新頁面上用於時間顯示的 DOM 元素（假設是一個 ID="lab_CurTime" 的 <P> 標籤）。

 

　　　按標準模型開發時，我們需要作的工作如下：

 

　　　1. 在設計好樣式的頁面中，編寫以上 4 步涉及的 JS 指令碼，或是將指令碼寫入單獨的 .js 檔案，在頁面中引入。
　　　2. 編寫運行在服務端的介面程式，根據實際情況不同，可以是 WebService, Servlet, JSP, ASP, PHP.......

 

　　　開發人員需要考慮的細節如下：

　　　1. 確定用戶端發送到服務端的請求命令的格式，比如設定為 ?action=getCurTime.
　　　2. 確定服務端發回用戶端的資料格式，比如設定為表示當前伺服器時間的簡單字串、JSON 串、XML 片段等。
　　　3. 如果項目是團隊開發，那麼這個格式一旦被確定，就需要同開發群組成員溝通並明示，在其他可能使用此服務的模組中遵守此格式約定。
　　　4. 提醒用戶端頁面或 UI 設計人員，在可能發生的頁面外觀更改時，小心處理檔案中插入的 JS 指令碼代碼。

 

　　　誠然，這個例子中的標準開發步驟，並沒有複雜到必須考慮使用工具庫甚至架構。

　　　但我們不妨看一下如果使用 Jaxcent 架構，會是什麼樣的情形。

　　　1. 設計人員像往常一樣進行用戶端頁面設計
　　　2. 設計人員在頁面中增加一個對 Jaxcent JS 橋接器的引用（典型的情況是在 HEAD 標記內添加：<script type="text/javascript" src="/jaxcent.js"></script>）
　　　3. 程式員編寫服務端 Java 程式，主要內容如下：
　　　　　　a. 類繼承自 jaxcent.JaxcentPage.
　　　　　　b. 聲明一個 jaxcent.HtmlPara 變數 hp，並將其關聯為 "lab_CurTime".
　　　　　　c. 取得伺服器目前時間 curTime.
　　　　　　d. 調用 hp.setInnerHTML( curTime ).
　　　　　　e. 建立一個線程，將 c, d 放到線程中定時執行.

 

　　　好了，至此，在我們的用戶端頁面上，那個重要的 <P> 標籤就能不斷地變化顯示從伺服器取回的時間文本了。

--------------------------
 四、Jaxcent 架構工作原理
--------------------------

　　目前已經有許多正在被開發人員們使用的 AJAX 工具庫或是架構。兩者的區別在於，工具庫提供實現 AJAX 風格編程的基礎函數集，而架構則在此之上，進而定製了一套 B/S 兩端需要遵守的開發規範和編程模型。

 

　　Jaxcent 架構的底層工作原理，與 ASP.NET AJAX Extensions 等架構類產品基本相同。通過 XMLHttpRequest 對象，在瀏覽器和伺服器之間傳遞中繼資料和控制命令。

　　基於目前 AJAX 架構標準並不統一的情況，Jaxcent 定位於提供一個輕量級的架構，當然輕量級更多是相對於主流 AJAX 架構產品而言，要掌握 Jaxcent 架構的使用，仍然需要付出少量的時間瞭解其結構。

 

　　從上面的例子可以看到，一個基於 Jaxcent 架構的 AJAX 應用的基本結構及工作流程如下：

 

　　用戶端頁面(JSP,HTML...) <--> JavaScript 橋接器 <--> 服務端 Jaxcent Servlet <--> 服務端 Java 程式(Class, Servlet, Beans)

　　（其中 JavaScript 橋接器和服務端 Jaxcent Servlet 均包含在 Jaxcent 架構發行包內）

 

　　　通過對上述流程圖的直觀理解，和對 JS 橋接器代碼的分析，可以總結出 Jaxcent 架構的實際工作過程如下：

 

　　　1. 在用戶端頁面引入的 JS 橋接器檔案內，向 window 添加了一個 onload 接聽程式事件（是添加而不是直接用 "=" 覆蓋）。
　　　　a. 當瀏覽器完成頁面內元素的載入後，觸發掛接的各 window.onload 事件.
　　　　b. JS 橋接器在該事件中，向服務端 Jaxcent Servlet 發送初始請求，發送的資料中包含了當前頁面的 URL.
　　　　c. Servlet 通過查詢設定檔（後述），尋找與該頁面關聯的 Java 類，如果找到，則建立該類的一個執行個體.
　　　　d. Servlet 返回重載了事件（如 OnClick 等）的元素特徵（ID、TAG、TYPE 等）.
　　　　e. JS 橋接器尋找特徵對應的 DOM 元素節點，根據響應類型為其添加事件接聽程式.
　　　　* 至此 Jaxcent 對頁面的初始化完成，頁面進入 AJAX 意義上的執行期.

 

　　　2. 用戶端向服務端的通訊
　　　　a. 當被添加了相關接聽程式的 DOM 節點發生對應的事件時，JS 橋接器將狀態變化記錄並編碼，發送到服務端 Servlet.
　　　　d. Servlet 按上述方法將資料傳遞給對應 Java 類中對應事件的響應函數.

 

　　　3. 服務端向用戶端的通訊
　　　　a. 與目前所有 AJAX 方法一樣，JS 橋接器將定時向服務端 Servlet 發送狀態查詢，以及時探索服務端要回送的狀態.
　　　　　　（此過程可在服務端控制其改變重新整理間隔時間、暫停、或繼續）
　　　　b. 當回送的狀態指示有需要更新的 DOM 節點時，JS 橋接器尋找目標節點，並做相應更新（外觀、內容、狀態）.

 

　　　4. 頁面關閉前，可執行可選的掃尾工作，如中止線程、銷毀計時器等，以主動釋放系統資源.

 

-------------------------
 五、Jaxcent 的 DOM 操作
-------------------------
　　以目前版本的 Jaxcent 來看，架構中提供了幾乎所有 DOM 標籤對應的類，所有能在用戶端通過 JS 指令碼實現的 DOM 操作，幾乎都能以 Java 類的方式實現在服務端。

 

　　除了滑鼠點擊、移入、移出、鍵盤事件等常規事件外，架構中的類還封裝了拖曳、調整大小這些擴充的功能。

　　例如要實現將允許使用者將一個表格內的某行拖到另一個表格中這樣的功能，即使是非常熟悉 JS 指令碼的開發人員，要重頭寫出實現代碼也會感到厭煩，除了要考慮拖動，還要考慮釋放滑鼠後舊元素的刪除和新元素的插入。

 

　　而在 Jaxcent 架構支援下，服務端程式中只需要不超過 10 行代碼（關鍵代碼僅 2 行）就能實現。對 DOM 繁瑣細節的處理，都由相關類包辦了。

 

 

------------------------
 六、Jaxcent 持久性支援
------------------------
　　也許對於多數 AJAX 應用來說，資料庫之外的持久性支援意義並不大，對使用者體驗的提升也十分有限。
　　但如果某一個應用中，確實需要對用戶端表面層進行通用的持久性支援，那 Jaxcent 基於 Java 的先天優勢就顯得有用了。可以試想一下，要將用戶端所有狀態記錄在 Cookie 或是資料庫裡，組織這些資料實際上會令人頗傷腦筋（當然 Jaxcent 也提供了訪問 Cookie 的方法，如果確實需要用的話），這時候想想序列化三個字，應用會感到輕鬆不少。

 

 

--------------------------
 七、Jaxcent 的部署和配置
--------------------------
...還沒寫
----------------------
 八、Jaxcent 的類結構
----------------------
...還沒寫
--------------------------
 九、Jaxcent 綜合應用執行個體
--------------------------
...還沒寫

 

---------------------
 十、Jaxcent 官方網站
---------------------

http://www.jaxcent.com/