icai项目开发日记（三）

四.struts中Ajax 的简单应用

  Ajax 现在已经热火朝天了,正好做这个小项目时有个功能最理想的方法就是用Ajax时,因为没学过javascript,费了好大的劲,也请教了不少人才弄明天下面这段代码是怎么回事．功能是实现了，不过对Ajax的实在了解不多，有空了以后好好再琢磨．不懂javascript.不会Ajax.struts中Ajax的简单应用.可以完全不用理会javascript.现在就来看看它的入门级用法.看看我是怎么实现的.

用到的Ajax代码如下:（可以不用知道是怎么回事，不过介意看完整个代码）

/**//**
 * Ajax.js
 *
 * Collection of Scripts to allow in page communication from browser to (struts) server
 * ie can reload part instead of full page
 *
 * How to use
 * ==========
 * 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick)
 * 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post
 * 3) When the server responds ...
 *         - the script loops through the response , looking for <span id="name">newContent</span>
 *          - each <span> tag in the *existing* document will be replaced with newContent
 *
 * NOTE: <span id="name"> is case sensitive. Name *must* follow the first quote mark and end in a quote
 *         Everything after the first '>' mark until </span> is considered content.
 *         Empty Sections should be in the format <span id="name"></span>
 */

//global variables
  var req;
  var which;


  /**//**
   * Get the contents of the URL via an Ajax call
   * url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1) 
   * nodeToOverWrite - when callback is made
   * nameOfFormToPost - which form values will be posted up to the server as part 
   *                    of the request (can be null)
   */
  function retrieveURL(url,nameOfFormToPost) ...{
    
    //get the (form based) params to push up as part of the get request
    url=url+getFormAsString(nameOfFormToPost);
    
    //Do the Ajax call
    if (window.XMLHttpRequest) ...{ // Non-IE browsers
      req = new XMLHttpRequest();
      req.onreadystatechange = processStateChange;
      try ...{
          req.open("GET", url, true); //was get
      } catch (e) ...{
        alert("Problem Communicating with Server "+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();
      }
    }
  }

/**//*
   * Set as the callback method for when XmlHttpRequest State Changes 
   * used by retrieveUrl
  */
  function processStateChange() ...{
  
        if (req.readyState == 4) ...{ // Complete
      if (req.status == 200) ...{ // OK response
        
        //alert("Ajax response:"+req.responseText);
        
        //Split the text response into Span elements
        spanElements = splitTextIntoSpan(req.responseText);
        
        //Use these span elements to update the page
        replaceExistingWithNewHtml(spanElements);
        
      } else ...{
          alert("Ajax response:"+req.responseText);
        //alert("Problem with server response:  " + req.statusText);
      }
    }
  }
 
 /**//**
  * gets the contents of the form as a URL encoded String
  * suitable for appending to a url
  * @param formName to encode
  * @return string with encoded form values , beings with &
  */ 
 function getFormAsString(formName)...{
     
     //Setup the return String
     returnString ="";
     
      //Get the form values
     formElements=document.forms[formName].elements;
     
     //loop through the array , building up the url
     //in the form /strutsaction.do&name=value
     
     for ( var i=formElements.length-1; i>=0; --i )...{
         //we escape (encode) each value
         returnString=returnString+"&"+escape(formElements[i].name)+"="+escape(formElements[i].value);
     }
     
     //return the values
     return returnString; 
 }
 
 /**//**
 * Splits the text into <span> elements
 * @param the text to be parsed
 * @return array of <span> elements - this array can contain nulls
 */
 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;
 }
 
 /**//*
  * Replace html elements in the existing (ie viewable document)
  * with new elements (from the ajax requested document)
  * WHERE they have the same name AND are <span> elements
  * @param newTextElements (output of splitTextIntoSpan)
  *                    in the format <span id=name>texttoupdate
  */
 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 name - between the 1st and 2nd quote mark
             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
             
                 //check that this element exists in the document
                 if(document.getElementById(name))...{
                 
                     //alert("Replacing Element:"+name);
                     document.getElementById(name).innerHTML = content;
                 } else ...{
                     alert("Element:"+name+"not found in existing document");
                 }
         }
     }
 }

视图层的jsp页面如下：（仅贴出使用相关的代码）

 

<%...@page contentType="text/html;charset=gb2312" language="java" isELIgnored="false"%>
<html:form action="/lr0Analyze" method="POST"  >
<P align="left">
选择文法：
  <html:select property="select_grammar" onchange="retrieveURL('grammarAjax.do?tableName=GRAMMAR','lr0AnalyzeForm');">
     <html:options collection="grammarCollection" property="label" labelProperty="label"/>
  </html:select>
</P>
  <P align="left">
  输入文法：                                                                      
  <!-- 1.Default Return Blank -->  
  <logic:notPresent name="SELECTED_GRAMMAR" scope="request">
  <span id="thegrammar">                                       
    <html:textarea property="selected_grammar" rows="7" cols="40">
    </html:textarea>*
  </span>
  </logic:notPresent>
  <!-- 2.Return content if requested-->    
  <logic:present name="SELECTED_GRAMMAR" scope="request">
    <span id="thegrammar">         
      <html:textarea property="selected_grammar" rows="7" cols="40" value="${SELECTED_GRAMMAR}">
      </html:textarea>*     
    </span>      
  </logic:present>                                           
  </P>
  <P align="left">
  输 入 串  ：
  <html:text maxlength="40" property="input_lr0" size="40"/>必须以<FONT color="#ff0000">＃</FONT>号结尾
</P>
  <P align="left">
  <html:submit/><html:reset/>
</P>
</html:form>

　　如代码所示：代码中有两个<span id="thegrammar"> (thegrammar是保存在request域内的一个参数)两个代码表示的意思分别是：1.当request域内不存在thegrammar时使用期1。2.当request域内存在thegrammar时使用期2。form提交的目标是grammarAjax.do.(struts-config.xml中定义的名字)

<html:textarea property="selected_grammar" rows="7" cols="40" value="${SELECTED_GRAMMAR}">

将<html:textarea>的值设为${SELECTED_GRAMMAR}；

Ajax可以接收任一后台处理的结果。jsp,servlet,action等。要做的只要将处理结果保存到相应的区域（request,reponse,application）使用action处理如下（此即为grammarAjax.do　对应的代码）：

package ysu.cs.icai.action;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import java.sql.*;
import ysu.cs.icai.common.*;
import ysu.cs.icai.database.ConDatabase;

/** *//** 
 * MyEclipse Struts
 * Creation date: 08-30-2006
 * 
 * XDoclet definition:
 * @struts.action validate="true"
 */
public class GrammarAjaxAction extends Action ...{
    /** *//** 
     * Method execute
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward execute(
        ActionMapping mapping,
        ActionForm form,
        HttpServletRequest request,
        HttpServletResponse response) ...{
        
        ConDatabase dataSource;
        java.sql.Connection myConnection;
        Statement st;
        ResultSet set;
        String sel=request.getParameter("select_grammar");
        String labeltable=request.getParameter("tableName");
        String sql="select * from "+labeltable+" where label='"+sel+"'";//the value of "tableName" is GRAMMAR OR FORMULA 
        
        try...{
            ServletContext application=request.getSession().getServletContext();
            
            dataSource=(ConDatabase)application.getAttribute("DATASOURCE");
            myConnection=dataSource.getConnection();

            st=myConnection.createStatement();
            st.execute("use icaidb;");
            set=st.executeQuery(sql);
            while(set.next())...{
                String re=set.getString(2);
                re=Common.removeTransferredMeaning(re);
                //System.out.print(re);
                request.setAttribute("SELECTED_GRAMMAR",re);        
                //System.out.print(re);
            }
        }catch(SQLException er)...{
            er.printStackTrace();
        }
        return mapping.findForward("SUCCESS_PATH");
    }
}

这段代码相信大家都看能看明白：根据select_grammar和tablename这两个属性在一个数据库中检索相应的数据后，并将结果返回．（注意相保存在到request,reponse,application...任一作用域中）．

 可以参考如下文章（以下列表摘自www.ibm.com）：

Adaptive Path 是一家领先的用户界面设计公司，仔细阅读他们的网站可以更多地了解 Ajax。 
 

可以先了解下一期文章的主题 XMLHttpRequest 对象，请阅读 关于 XMLHttpRequest 对象的这篇文章。

如果使用 Internet Explorer，可以访问 Microsoft Developer Network 的 XML Developer Center。

面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序（developerWorks，2005 年 9 月）介绍了这种革新方法，它解决了页面重新加载难题，可以创建动态的 Web 应用程序体验。

面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化（developerWorks，2005 年 10 月）介绍了在 Ajax 应用程序中对数据进行序列化的五种方法。

Using Ajax with PHP and Sajax（developerWorks，2005 年 10 月），这篇教程针对那些对开发丰富 Web 应用程序感兴趣的人，介绍了使用 Ajax 和 PHP 动态更新内容。

Call SOAP Web services with AJAX, Part 1: Build the Web services client（developerWorks，2005 年 10 月）介绍了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机。

XML 问题: 超越 DOM（developerWorks，2005 年 5 月）详细阐述了如何使用文档对象模型来构建动态 Web 应用程序。

Build apps with Asynchronous JavaScript with XML, or AJAX（developerWorks，2005 年 11 月）演示了如何使用 Ajax 构造支持实时检验的 Web 应用程序。