|
未使用AJAX之前
AJAX
在你的Struts應用中使用AJAX
實現方案
現有的Struts應用
圖 1. 沒有AJAX的例子:初始屏幕
圖 2. 沒有AJAX的例子:輸入值并點擊了提交
|
我們的第一個Struts AJAX應用
觀察下下面的圖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的方法也是類似的。
function retrieveURL(url,nameOfFormToPost) {
//將url轉換成字符串
//調用AJAX
// 非IE瀏覽器
req = new ActiveXObject("Microsoft.XMLHTTP");
getFormAsString() 是一個“私有” 方法，在retrieveURL()中使用。 function getFormAsString(formName){
//設置返回字符串
//取得表單的值
//循環數組，組裝url
for(var i=formElements.length-1;i>=0; --i ){
//返回字符串
|
根據AJAX的響應更新web頁面
到現在為止，我們學習過了使用JavaScript來完成AJAX調用(前面列出)，Struts Action，ActionForm以及JSP(基本沒有變化，只是增加了標簽)。為了完善我們對Struts-AJAX項目的了解，我們需要了解三個用于根據服務器返回的結果而更新頁面的JavaScript方法。
- ? processStateChange()： 該方法在AJAX調用前設定。它在服務器響應到達后由XMLHttpRequest/Microsoft.XMLHTTP 對象調用。
- ?splitTextIntoSpan(): 根據響應，循環取出數組中的元素組裝成NewContent。
- ?replaceExistingWithNewHtml()： 根據span元素數組，循環搜索，將里面的元素調換掉頁面中和它的'someName'相同的中的內容。注意，我們使用的是req.responseText 方法來獲得返回的內容(它允許我們操作任何文本的響應)。與此相對于的是req.responseXml (它的作用更大，但是要求服務器返回是XHTML或者XML)。
|
新的控制流
添加以下的JavaScript代碼到我們的應用中，以下的步驟將在服務器和瀏覽器中執行。
- 1. 如同一個普通Struts應用裝載頁面。
- 2. 用戶改變文本框的值，觸發一個onChange() 事件，調用retrieveURL() 方法。
- 3. 該JavaScript方法通過發送Struts明白的表單變量(后臺)請求到服務器的Struts Action。
- 4. 該JavaScript方法同樣設定了第二個JavaScript方法的名字，此方法將到服務器響應完畢后調用。本例子中，設定為processStateChange() 方法。
- 5. 如我們所預期的，服務器響應完畢，調用processStateChange() 方法。
- 6. JavaScript在(新的)服務器響應中循環取出所有元素。將頁面上存在與獲得元素名字相同的 中的元素替換掉。
在你的應用中設計AJAX
以上描述的JavaScript方法能在大多數的應用中使用，包括比我們的例子復雜得多的。但是，在使用之前，你需要注意以下幾點：
? 避免復制代碼，最好在初始化請求(如，顯示完整的頁面)和AJAX(更新部分頁面)請求中使用相同的Struts Action和JSP。
?在公共的Action(控制器)中，決定JSP頁面(所有的JSP頁面或者其中的一部分)中的一個區域需要傳送到瀏覽器。通過在web服務器的session或者ActionForm中設定標記來讓JSP頁面知道哪些部分需要提交。
? 在JSP中，使用Struts 或者JSTL標簽來決定提交的HTML區域。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
