您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

JavaEE Without Ajax：以 JSF Render Kit 實現零 Ajax 代碼的富客戶體驗

編輯：Java 相關知識

背景：Ajax 的雙面刃

優點：局部刷新、更好 UX、Google Maps/Gmail 級體驗。
痛點：JavaScript 開發維護成本高——跨瀏覽器相容、缺乏編譯期檢查、除錯困難、SEO 不友善、History/Back 按鈕破壞。
Java 開發者心聲：「要 Java，不要 JavaScript」。

解決方案：JSF + 自訂 Ajax Render Kit

核心觀念：JSF 元件負責「狀態與行為」，Renderer 負責「呈現形式」。預設 HTML_BASIC Render Kit 輸出純 HTML；替換為 Ajax Render Kit 即可輸出含局部更新邏輯的 JavaScript，業務代碼零修改。

標準 JSF vs Ajax 啟用 JSF 請求/回應流程

階段	標準 JSF	Ajax JSF (OperaMasks)
請求類型	普通 HTTP POST	`x-requested-by: XML Http Request` 標頭
伺服端處理	完整生命週期 → 產生整頁 HTML	完整生命週期（除 Render Response） → 產生元件樹
Render Response	`Content-Type: text/html` 整頁輸出	`Content-Type: text/javascript` 僅輸出變更部分的 JS 更新腳本
瀏覽器端	整頁重繪	Ajax 回調執行 JS，局部 DOM 更新，無閃爍

JSF 標準生命週期標準 JSF 回應 Ajax JSF 回應

OperaMasks JSF 引擎關鍵實作

請求識別：Filter 攔截含 x-requested-by 標頭的請求，標記為 Ajax 請求。
生命週期共用：Restore View → Apply Request Values → Process Validations → Update Model → Invoke Application 完全相同。
差異化渲染：
- 掃描元件樹，比對 clientId 與先前狀態。
- 僅對狀態改變的元件產生 JS 更新代碼（document.getElementById(...).innerHTML = ... 或元件特定 JS API）。
- 靜態內容（標籤、樣式、不變結構）完全不輸出，大幅減少頻寬。
第三方元件適配：<ajax:enable> 標籤包裹非 Ajax 元件（如 Tomahawk Tree），自動轉為局部刷新；最佳做法是提供原生 Ajax Renderer。

優勢總結

零 Ajax 手寫代碼：開發者撰寫標準 JSF Facelets/XHTML，部署時切換 Render Kit 即可。
型別安全：Java 編譯期檢查、IDE 重構、單元測試全保留。
效能：傳輸量僅為整頁 5~15%，伺服端 CPU 同樣生命週期無額外負擔。
漸進增強：JS 失效時自動退回整頁提交（需配合表單降級）。

現代視角：JSF 2.0+ 內建 `f:ajax`

JSF 2.0 (2009) 已標準化 Ajax 支援：

<h:commandButton value="Submit">
    <f:ajax execute="@form" render="resultPanel" />
</h:commandButton>

execute：指定要處理的元件（預設 @this）。
render：指定要更新的元件 clientId（支援 @form、@all、搜尋表達式）。
listener、onevent、onerror 進階控制。

原理同屬「伺服端狀態比對 → 僅輸出變更 JS」，但標準化、無需第三方引擎。

結語

「JavaEE Without Ajax」不代表拒絕 Ajax 體驗，而是將 Ajax 複雜度下沉到框架層，讓 Java 開發者專注領域邏輯。無論選擇 JSF 2 標準 Ajax、PrimeFaces/OmniFaces 元件庫、或 OperaMasks 類容器級方案，核心都是：以 Java 為主語言，聲明式定義互動，框架負責生成最佳前端代碼。