看看如何在Struts應用中施展AJAX魔法[2]

  觀察下下面的圖3和圖4。第一眼看上去，它們和前面的例子沒有說明區別。它們的不同之處在于，頁面載入后（圖3）然后文本框中的值改變了，窗體自動提交而不顯示空白的，然后在圖4中顯示結果。普通的提交按鈕仍然在，你也可以選擇使用它。

  圖 3. 頁面載入后的AJAX例子

  圖 4. AJAX調用后的AJAX例子

  添加AJAX是出奇的容易。服務器端的代碼和前面的例子是一樣的： 一個Struts的ActionForm來后去數據，一個Struts的Action來執行需要的任務（例如，存儲數據庫）然后轉發到適當的JSP頁面來顯示結果。

  繼續

  如果你希望就此停止閱讀（跳過這個例子的工作說明），但是這里的是和你需要轉換你的Struts應用到一個Struts－AJAX應用同樣的風格：

  1. 在你的web頁面中引入一個Ajax.js （該文件是struts-ajax.zip 例文件中的一部分）。Ajax.js 包含了所有需要發送和接收AJAX調用的JavaScript方法。

  2. 確保你希望在AJAX調用中更新的web頁面的部分包含在標簽中，并且給每個標簽一個id。

  3. 當一些事件觸發的時候就更新頁面（例如，文本框的the onchange()方法），調用retrieveURL()方法，通過URL傳遞到需要執行服務器端處理的Struts Action。

  4. 為了頁面的顯示/更新，最簡單的方法是Struts Action轉發回同樣的頁面。在本例中，showGreen/showBlue 文本框中的onchange()方法來觸發AJAX調用。

  JavaScript方法retrieveURL()調用服務器的Struts（通過URL），獲取JSP響應，然后更新顯示頁面中的 標簽中的部分。就是這么簡單！

  AJAX解決方案的細節

  我們將例子變為AJAX－Struts應用的時候，需要三個變化：

  1. 增加一個JavaScript方法來完成到服務器的“背后的”AJAX調用。

  2. 增加JavaScript代碼來接收服務器的響應并更新頁面。

  3. 在JSP頁面增加標簽標簽，這個標簽中內容將在AJAX調用中更新。

  我們將詳細的說明上面的每一步。

  發送AJAX請求到服務器

  有兩個方法（在下面列出）用于發送請求到服務器。

  · retrieveURL()方法獲得服務器的URL和Struts form。URL用于使用AJAX，form的值用于傳遞到服務器。

  · getFormAsString()方法用于將retrieveURL()中form命名的值組裝成查詢字符串，并發送到服務器。

  使用方法很簡單，使用onclick()/onChange()事件來觸發retrieveURL()更新顯示。

  在這兩個方法中有一些有趣的東西。

  在retrieveURL()方法中，req.onreadystatechange = processStateChange （注意，沒有括號）這一行來告訴瀏覽器在服務器響應到達的時候調用processStateChange()方法（該方法將在后面介紹）。retrieveURL()方法中（現在已經是AJAX的標準了）同樣決定是使用IE瀏覽器(ActiveX)還是使用Netscape/Mozilla (XmlHttpRequest) 來實現跨瀏覽器兼容。

  getFormAsString()方法將HTML form轉換成字符串連接在URL后面（這樣就允許我們發送HTTP GET請求）。這個字符串是經過轉換的（比如，空格轉換成%20等），并且是一個Struts能將其組裝成ActionForm的格式（并不需要Struts清楚的明白這個是來之AJAX的請求）。注意，在本例中我們使用HTTP GET，使用HTTP POST的方法也是類似的。

原文轉自：http://www.anti-gravitydesign.com