日本黄色免费在线视频,国产最新网址,久久久综合网

未使用AJAX之前

AJAX

在你的Struts應(yīng)用中使用AJAX

實(shí)現(xiàn)方案

現(xiàn)有的Struts應(yīng)用

圖 1. 沒(méi)有AJAX的例子:初始屏幕

圖 2. 沒(méi)有AJAX的例子:輸入值并點(diǎn)擊了提交

我們的第一個(gè)Struts AJAX應(yīng)用

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

圖 3. 頁(yè)面載入后的AJAX例子

圖 4. AJAX調(diào)用后的AJAX例子

添加AJAX是出奇的容易。服務(wù)器端的代碼和前面的例子是一樣的: 一個(gè)Struts的ActionForm來(lái)后去數(shù)據(jù)，一個(gè)Struts的Action來(lái)執(zhí)行需要的任務(wù)(例如，存儲(chǔ)數(shù)據(jù)庫(kù))然后轉(zhuǎn)發(fā)到適當(dāng)?shù)腏SP頁(yè)面來(lái)顯示結(jié)果。

繼續(xù)

如果你希望就此停止閱讀(跳過(guò)這個(gè)例子的工作說(shuō)明)，但是這里的是和你需要轉(zhuǎn)換你的Struts應(yīng)用到一個(gè)Struts-AJAX應(yīng)用同樣的風(fēng)格：

1. 在你的web頁(yè)面中引入一個(gè)Ajax.js (該文件是struts-ajax.zip 例文件中的一部分)。Ajax.js 包含了所有需要發(fā)送和接收AJAX調(diào)用的JavaScript方法。
2. 確保你希望在AJAX調(diào)用中更新的web頁(yè)面的部分包含在標(biāo)簽中，并且給每個(gè)標(biāo)簽一個(gè)id。
3. 當(dāng)一些事件觸發(fā)的時(shí)候就更新頁(yè)面(例如，文本框的the onchange()方法)，調(diào)用retrieveURL()方法，通過(guò)URL傳遞到需要執(zhí)行服務(wù)器端處理的Struts Action。
4. 為了頁(yè)面的顯示/更新，最簡(jiǎn)單的方法是Struts Action轉(zhuǎn)發(fā)回同樣的頁(yè)面。在本例中，showGreen/showBlue 文本框中的onchange()方法來(lái)觸發(fā)AJAX調(diào)用。

JavaScript方法retrieveURL()調(diào)用服務(wù)器的Struts(通過(guò)URL)，獲取JSP響應(yīng)，然后更新顯示頁(yè)面中的標(biāo)簽中的部分。就是這么簡(jiǎn)單！

AJAX解決方案的細(xì)節(jié)

我們將例子變?yōu)锳JAX-Struts應(yīng)用的時(shí)候，需要三個(gè)變化：

1. 增加一個(gè)JavaScript方法來(lái)完成到服務(wù)器的“背后的”AJAX調(diào)用。
2. 增加JavaScript代碼來(lái)接收服務(wù)器的響應(yīng)并更新頁(yè)面。
3. 在JSP頁(yè)面增加標(biāo)簽標(biāo)簽，這個(gè)標(biāo)簽中內(nèi)容將在AJAX調(diào)用中更新。

我們將詳細(xì)的說(shuō)明上面的每一步。

發(fā)送AJAX請(qǐng)求到服務(wù)器

有兩個(gè)方法(在下面列出)用于發(fā)送請(qǐng)求到服務(wù)器。

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

? getFormAsString()方法用于將retrieveURL()中form命名的值組裝成查詢(xún)字符串，并發(fā)送到服務(wù)器。

使用方法很簡(jiǎn)單，使用onclick()/onChange()事件來(lái)觸發(fā)retrieveURL()更新顯示。

在這兩個(gè)方法中有一些有趣的東西。

在retrieveURL()方法中，req.onreadystatechange = processStateChange (注意，沒(méi)有括號(hào))這一行來(lái)告訴瀏覽器在服務(wù)器響應(yīng)到達(dá)的時(shí)候調(diào)用processStateChange()方法(該方法將在后面介紹)。retrieveURL()方法中(現(xiàn)在已經(jīng)是AJAX的標(biāo)準(zhǔn)了)同樣決定是使用IE瀏覽器(ActiveX)還是使用Netscape/Mozilla (XmlHttpRequest) 來(lái)實(shí)現(xiàn)跨瀏覽器兼容。

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

            function retrieveURL(url,nameOfFormToPost) {

//將url轉(zhuǎn)換成字符串

url=url+getFormAsString(nameOfFormToPost);

//調(diào)用AJAX

if (window.XMLHttpRequest) {

// 非IE瀏覽器

req = new XMLHttpRequest();

req.onreadystatechange = processStateChange;

try {

req.open("GET", url, true);

} catch (e) {

alert("Server Communication Problem\n"+e);

}

req.send(null);

} else if (window.ActiveXObject) {

// IE

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange=processStateChange;

req.open("GET", url, true);

req.send();

}

}

}

getFormAsString() 是一個(gè)“私有” 方法，在retrieveURL()中使用。

function getFormAsString(formName){

//設(shè)置返回字符串

returnString ="";

//取得表單的值

formElements=document.forms[formName].elements;

//循環(huán)數(shù)組，組裝url

//像'/strutsaction.do&name=value'這樣的格式

for(var i=formElements.length-1;i>=0; --i ){

//轉(zhuǎn)化每一個(gè)值

returnString+="&"

+escape(formElements[i].name)+"="

+escape(formElements[i].value);

}

//返回字符串

return returnString;

}

根據(jù)AJAX的響應(yīng)更新web頁(yè)面

到現(xiàn)在為止，我們學(xué)習(xí)過(guò)了使用JavaScript來(lái)完成AJAX調(diào)用(前面列出)，Struts Action，ActionForm以及JSP(基本沒(méi)有變化，只是增加了標(biāo)簽)。為了完善我們對(duì)Struts-AJAX項(xiàng)目的了解，我們需要了解三個(gè)用于根據(jù)服務(wù)器返回的結(jié)果而更新頁(yè)面的JavaScript方法。

? processStateChange()：該方法在AJAX調(diào)用前設(shè)定。它在服務(wù)器響應(yīng)到達(dá)后由XMLHttpRequest/Microsoft.XMLHTTP 對(duì)象調(diào)用。
?splitTextIntoSpan(): 根據(jù)響應(yīng)，循環(huán)取出數(shù)組中的元素組裝成NewContent。
?replaceExistingWithNewHtml()：根據(jù)span元素?cái)?shù)組，循環(huán)搜索，將里面的元素調(diào)換掉頁(yè)面中和它的'someName'相同的中的內(nèi)容。注意，我們使用的是req.responseText 方法來(lái)獲得返回的內(nèi)容(它允許我們操作任何文本的響應(yīng))。與此相對(duì)于的是req.responseXml (它的作用更大，但是要求服務(wù)器返回是XHTML或者XML)。

            
              function processStateChange() {
            
            
              if (req.readyState == 4) { // 完成
              

              

              if (req.status == 200) { // 響應(yīng)正常
            
            
              //將響應(yīng)的文本分割成Span元素
              

              

              spanElements = 
              

              

              splitTextIntoSpan(req.responseText);
            
            
              //使用這些Span元素更新頁(yè)面
              

              

              replaceExistingWithNewHtml(spanElements);
            
            
              } else {
              

              

              alert("Problem with server response:\n " 
              

              

              + req.statusText);
              

              

              }
              

              

              }
              

              

              }
              

              

              replaceExistingWithNewHtml()是為processStateChange()使用的“私有”方法。
            
            
              function replaceExistingWithNewHtml 
              

              

              (newTextElements){
            
            
              //循環(huán)newTextElements
              

              

              for(var i=newTextElements.length-1;i>=0;--i){
            
            
              //判斷是否以 if(newTextElements[i]. 
              

              

              indexOf("-1){
            
            
              //獲得span的名字- 設(shè)置在第一和第二個(gè)引號(hào)之間
              

              

              //確認(rèn)span元素是以下的格式
              

              

              //NewContent
              

              

              startNamePos=newTextElements[i]. 
              

              

              indexOf('"')+1;
              

              

              endNamePos=newTextElements[i]. 
              

              

              indexOf('"',startNamePos);
              

              

              name=newTextElements[i]. 
              

              

              substring(startNamePos,endNamePos);
            
            
              //獲得內(nèi)容－在第一個(gè)>標(biāo)記后的所有內(nèi)容
              

              

              startContentPos=newTextElements[i]. 
              

              

              indexOf('>')+1; 
              

              

              content=newTextElements[i].
              

              

              substring(startContentPos);
            
            
              //現(xiàn)在更新現(xiàn)有的Document中的元素， 
              

              

              // 確保文檔存在該元素
              

              

              if(document.getElementById(name)){
              

              

              document.getElementById(name). 
              

              

              innerHTML = content;
              

              

              }
              

              

              }
              

              

              }
              

              

              splitTextIntoSpan() 是為processStateChange() 使用的“私有”方法。
              

              

              function splitTextIntoSpan(textToSplit){
            
            
              //分割文檔
              

              

              returnElements=textToSplit. 
              

              

              split("")
            
            
              //處理每個(gè)元素 
              

              

              for(var i=returnElements.length-1;i>=0;--i){
            
            
              //刪除掉第一個(gè)span后面的元素
              

              

              spanPos = returnElements[i]. 
              

              

              indexOf(" 
            
            
              //如果找到匹配的，獲得span前的內(nèi)容
              

              

              if(spanPos>0){
              

              

              subString=returnElements[i].
              

              

              substring(spanPos);
              

              

              returnElements[i]=subString;
              

              

              } 
              

              

              }
              

              

              return returnElements;
              

              

              }

新的控制流

添加以下的JavaScript代碼到我們的應(yīng)用中，以下的步驟將在服務(wù)器和瀏覽器中執(zhí)行。

1. 如同一個(gè)普通Struts應(yīng)用裝載頁(yè)面。
2. 用戶(hù)改變文本框的值，觸發(fā)一個(gè)onChange() 事件，調(diào)用retrieveURL() 方法。
3. 該JavaScript方法通過(guò)發(fā)送Struts明白的表單變量(后臺(tái))請(qǐng)求到服務(wù)器的Struts Action。
4. 該JavaScript方法同樣設(shè)定了第二個(gè)JavaScript方法的名字，此方法將到服務(wù)器響應(yīng)完畢后調(diào)用。本例子中，設(shè)定為processStateChange() 方法。
5. 如我們所預(yù)期的，服務(wù)器響應(yīng)完畢，調(diào)用processStateChange() 方法。
6. JavaScript在(新的)服務(wù)器響應(yīng)中循環(huán)取出所有元素。將頁(yè)面上存在與獲得元素名字相同的中的元素替換掉。

在你的應(yīng)用中設(shè)計(jì)AJAX

以上描述的JavaScript方法能在大多數(shù)的應(yīng)用中使用，包括比我們的例子復(fù)雜得多的。但是，在使用之前，你需要注意以下幾點(diǎn)：

? 避免復(fù)制代碼，最好在初始化請(qǐng)求(如，顯示完整的頁(yè)面)和AJAX(更新部分頁(yè)面)請(qǐng)求中使用相同的Struts Action和JSP。

?在公共的Action(控制器)中，決定JSP頁(yè)面(所有的JSP頁(yè)面或者其中的一部分)中的一個(gè)區(qū)域需要傳送到瀏覽器。通過(guò)在web服務(wù)器的session或者ActionForm中設(shè)定標(biāo)記來(lái)讓JSP頁(yè)面知道哪些部分需要提交。

? 在JSP中，使用Struts 或者JSTL標(biāo)簽來(lái)決定提交的HTML區(qū)域。

在Struts應(yīng)用中使用Ajax

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義