<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Flyingis

    Talking and thinking freely !
    Flying in the world of GIS !
    隨筆 - 156, 文章 - 16, 評(píng)論 - 589, 引用 - 0
    數(shù)據(jù)加載中……

    Sprinkle Some AJAX Magic in Your Struts Web Application(3)

    Updating the Web Page with the AJAX Response

    So far, we have looked at the JavaScript to do the AJAX call (listed above) and the Struts Action, ActionForm, and JSP (mostly the same, with the addition of <span> tags). To complete our understanding of the Struts-AJAX project, we need to look at the three JavaScript functions that are responsible for updating the current web page when the results from the server are received.

    • processStateChange(): The method name that we set before making the AJAX call. This method is called by the XMLHttpRequest/Microsoft.XMLHTTP object once the server has completed sending back its response.
    • splitTextIntoSpan(): Loops through the response, picking out an array of <span id="someName">NewContent</span> elements.
    • replaceExistingWithNewHtml(): Loops through this array of span elements, searching for <span> elements in the existing page with 'someName' and replacing them with the new content from the server. Note that we get the returned content via req.responseText for robustness (since it allows us to manipulate any text response), rather than req.responseXml (which is more powerful, but requires that you return valid XHTML or XML).
    function processStateChange() {
      
      if (req.readyState == 4) { // Complete
        if (req.status == 200) { // OK response
            
        //Split the text response into Span elements
        spanElements = 
            splitTextIntoSpan(req.responseText);
        
        //Use these span elements to update the page
        replaceExistingWithNewHtml(spanElements);
        
        } else {
          alert("Problem with server response:\n " 
            + req.statusText);
        }
      }
    }
    

    replaceExistingWithNewHtml() is a "private" method used by the processStateChange() method.

      
    function replaceExistingWithNewHtml 
            (newTextElements){
     
      //loop through newTextElements
      for(var i=newTextElements.length-1;i>=0;--i){
      
        //check that this begins with <span
        if(newTextElements[i]. 
            indexOf("<span")>-1){
                            
              //get the span name - sits
          // between the 1st and 2nd quote mark
          //Make sure your spans are in the format
          //<span id="someName">NewContent</span>
              startNamePos=newTextElements[i]. 
                  indexOf('"')+1;
          endNamePos=newTextElements[i]. 
                  indexOf('"',startNamePos);
          name=newTextElements[i]. 
                  substring(startNamePos,endNamePos);
                            
          //get the content - everything 
          // after the first > mark
          startContentPos=newTextElements[i]. 
                   indexOf('>')+1; 
          content=newTextElements[i].
                   substring(startContentPos);
                            
         //Now update the existing Document 
         // with this element, checking that 
         // this element exists in the document
         if(document.getElementById(name)){
                    document.getElementById(name). 
                    innerHTML = content;
         }
      }
    }
    

    splitTextIntoSpan() is a "private" method used by the processStateChange() method.

    function splitTextIntoSpan(textToSplit){
     
      //Split the document
      returnElements=textToSplit. 
                split("</span>")
            
      //Process each of the elements        
      for(var i=returnElements.length-1;i>=0;--i){
                    
        //Remove everything before the 1st span
        spanPos = returnElements[i]. 
                 indexOf("<span");               
                    
        //if we find a match, take out 
        //everything before the span
        if(spanPos>0){
              subString=returnElements[i].
                  substring(spanPos);
              returnElements[i]=subString;
        } 
      }
      return returnElements;
    }
    

    New Flow of Control

    By adding the above JavaScript code to our application, the following steps now happen on the server and on the browser.

    1. The page loads as per a normal Struts application.
    2. The user changes a textbox value, triggering an onChange() event, which calls the retrieveURL() JavaScript function.
    3. This JavaScript function makes a (background) call to the Struts Action on the server, passing in all of the form variables in a way that Struts will understand.
    4. This JavaScript function also sets the name of a second JavaScript function, which will be called when the server response is finished. In this case, it is set to the processStateChange() method.
    5. As expected, when the server response is finished, the processStateChange() method is called.
    6. The JavaScript loops through all of the <span>elements in the (new) server response. Where it finds a <span> in the existing page with the same name, it updates it with the new content.

    Designing AJAX into Your Application

    The JavaScript outlined above can cope with the way Struts is used in most applications, including those that are much more complex than our simple example. However, you may find that following the points below makes it easier to write and use your code:

    • To avoid duplicated code, it can often be better to use the same Struts Action and JSP for the initial request (i.e., show full page) and the AJAX (update part of page) requests.
    • Within the common Action (controller) class, decide which sections of the JSP page (all of the JSP or only part of it) need to be sent to the browser. By setting flags in either the web server session or ActionForm, the JSP page knows which sections need to be rendered.
    • Within the JSP, use Struts <logic:equal> or JSTL tags to decide if we need to render a section of HTML or not.

    An updated version of this project, with AJAX enabled, can be downloaded here: struts-Ajax.zip

    Conclusion

    AJAX techniques promise to completely revolutionize how we build and use web applications. This article showed a simple technique to add AJAX behavior to existing Struts applications. It allows us to reuse our existing investment, not only in code but also in developer skills. As a nice by-product, it also allows us to write cleaner, more reusable, Java Struts applications.

    posted on 2005-11-02 11:29 Flyingis 閱讀(673) 評(píng)論(0)  編輯  收藏 所屬分類: Recycle Bin

    主站蜘蛛池模板: 亚洲日韩精品无码专区网站| 免费视频专区一国产盗摄| 可以免费观看一级毛片黄a | 亚洲综合激情九月婷婷| 99re6在线精品免费观看| 国产亚洲成av片在线观看| 一区二区三区无码视频免费福利 | 免费观看午夜在线欧差毛片| 成人精品国产亚洲欧洲| 国产一级淫片a免费播放口之| 免费精品视频在线| 国产亚洲精品a在线观看 | 免费观看一区二区三区| 亚洲AV无码专区国产乱码电影| 99国产精品免费观看视频| 亚洲性一级理论片在线观看| 好男人www免费高清视频在线| 亚洲av永久中文无码精品 | 亚洲男人的天堂一区二区| 中文字幕乱码系列免费| 久久久久亚洲精品天堂| 成年女人午夜毛片免费看| 免费一区二区三区在线视频| 亚洲人成人网站色www| 4hu四虎最新免费地址| 亚洲欧洲专线一区| 亚洲一区二区三区在线视频| 免费国产污网站在线观看15| 亚洲视频在线观看2018| 亚洲精品线路一在线观看| 久99久精品免费视频热77| 亚洲一区二区无码偷拍| 中文字幕亚洲不卡在线亚瑟| 120秒男女动态视频免费| 毛片亚洲AV无码精品国产午夜| 亚洲老妈激情一区二区三区| 国产99视频精品免费观看7| 男人扒开添女人下部免费视频| 亚洲综合久久综合激情久久| 在线免费观看污网站| 人人揉揉香蕉大免费不卡|