Ajax、jQuery 與 Struts2 整合開發指南：架構釐清與實務建議

三者角色定位

• Ajax (Asynchronous JavaScript and XML)： 瀏覽器端非同步請求技術，實現無刷新局部更新，提升使用者體驗。
• jQuery： 輕量級 JavaScript 函式庫，封裝了 DOM 操作、事件處理、動畫及 Ajax 封裝（$.ajax, $.get, $.post），大幅簡化前端開發。
• Struts 2： 伺服器端 MVC 框架，負責處理業務邏輯、資料存取、結果導向（JSP/FreeMarker/Velocity/JSON 等）。

整合架構圖解

瀏覽器 (jQuery + Ajax)
      │  HTTP Request (JSON/Form Data)
      ▼
Struts 2 Action (業務處理)
      │  返回 JSON / JSP 頁面片段
      ▼
瀏覽器 (jQuery 回呼處理 DOM 更新)

專案搭建關鍵步驟

1. 引入依賴： 專案加入 struts2-json-plugin 以支援 Action 直接回傳 JSON。
2. Action 設定： 在 struts.xml 中配置 result type="json"，或使用 @Result(type="json") 註解。
3. 前端請求： 使用 $.ajax({ url: 'actionName', dataType: 'json', success: fn }) 呼叫後端。
4. 資料綁定： Struts 2 自動將請求參數映射到 Action 屬性（需提供 getter/setter）。

常見坑與注意事項

• 內容型別： 確保回應 Header 為 application/json;charset=UTF-8，避免中文亂碼。
• 攔截器順序： 若使用自訂攔截器，注意 json 攔截器需在 params 之後，否則 JSON 內容無法正確綁定。
• 防止 CSRF： 整合 Struts 2 的 token 機制或雙重提交 Cookie 模式。
• 錯誤處理： 統一回傳格式 {success: boolean, message: string, data: object}，前端統一處理業務錯誤與系統異常。

建議開發流程

1. 先定義前後端介面契約（請求參數、回傳 JSON 結構）。
2. 實作 Struts 2 Action 單元測試，驗證業務邏輯與 JSON 序列化。
3. 前端以 jQuery Ajax 串接，優先處理成功/失敗回呼與載入狀態。
4. 引入模組化管理（RequireJS / Webpack / ES6 Module）組織前端程式碼。

總結

Ajax 是傳輸機制，jQuery 是前端工具庫，Struts 2 是後端控制層。三者分工明確：前端負責呈現與互動，後端專注業務與資料。遵循 RESTful 風格設計 API，配合 JSON 交換格式，可構建清晰、可維護的企業級 Web 應用。