初學Ajax

原創 zgw555555 2020-02-24 07:50
一、開門見山
    這些時間，瞎子也看得見，AJAX正大踏步的朝我們走來。不管我們是擁護也好，反對也罷，還是視而不見，AJAX像一陣潮流，席轉了我們所有的人。
    關於AJAX的定義也好，大話也好，早有人在網上發表了汗牛充棟的文字，在這裏我也不想照本宣科。
    只想說說我感覺到的一些優點，對於不對，大家也可以和我討論：
    首先是異步交互，用戶感覺不到頁面的提交，當然也不等待頁面返回。這是使用了AJAX技術的頁面給用戶的第一感覺。
    其次是響應速度快，這也是用戶強烈體驗。
    然後是與我們開發者相關的，複雜UI的成功處理，一直以來，我們對B/S模式的UI不如C/S模式UI豐富而苦惱。現在由於AJAX大量使用JS，使得複雜的UI的設計變得更加成功。
    最後，AJAX請求的返回對象爲XML文件，這也是一個潮流，就是WEB SERVICE潮流一樣。易於和WEB SERVICE結合起來。
    好了，閒話少說，讓我們轉入正題吧。
    我們的第一個例子是基於Servlet爲後臺的一個web應用。
 
 
二、基於Servlet的AJAX
    第一個例子是關於關聯選擇框的問題，如圖：
 
    這是一個很常見的UI，當用戶在第一個選擇框裏選擇ZHEJIANG時，第二個選擇框要出現ZHEJIANG的城市；當用戶在第一個選擇框裏選擇JIANGSU時，第二個選擇框裏要出現JIANGSU的城市。
    首先，我們來看配置文件web.xml，在裏面配置一個servlet，跟往常一樣：
 <web-app version="2.4"
 xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 
 <servlet>
 <servlet-name>SelectCityServlet</servlet-name>
 <servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
 </servlet>
 
 <servlet-mapping>
 <servlet-name>SelectCityServlet</servlet-name>
 <url-pattern>/servlet/SelectCityServlet</url-pattern>
 </servlet-mapping>
 
 </web-app>
 
    然後，來看我們的JSP文件：
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>MyHtml.html</title>
 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 </head>
 <script type="text/javascript">
 function getResult(stateVal) {
         var url = "servlet/SelectCityServlet?state="+stateVal;
         if (window.XMLHttpRequest) {
                 req = new XMLHttpRequest();
         }else if (window.ActiveXObject) {
                 req = new ActiveXObject("Microsoft.XMLHTTP");
         }
         if(req){
                 req.open("GET",url, true);
                 req.onreadystatechange = complete;
                 req.send(null);
         }
 }
 function complete(){
         if (req.readyState == 4) {
                 if (req.status == 200) {
                         var city = req.responseXML.getElementsByTagName("city");
                         //alert(city.length);
                         var str=new Array();
                         for(var i=0;i<city.length;i++){
                                 str[i]=city[i].firstChild.data;
                         }
                         //alert(document.getElementById("city"));
                         buildSelect(str,document.getElementById("city"));
                 }
         }
 }
 function buildSelect(str,sel) {
         sel.options.length=0;
         for(var i=0;i<str.length;i++) {
                 sel.options[sel.options.length]=new Option(str[i],str[i])
         }
 }
 </script>
 <body>
 <select name="state" onChange="getResult(this.value)">
         <option value="">Select</option>>
         <option value="zj">ZEHJIANG</option>>
         <option value="zs">JIANGSU</option>>
 </select>
 <select id="city">
     <option value="">CITY</option>
 </select>
 </body>
 </html>
 
    第一眼看來，跟我們平常的JSP沒有兩樣。仔細一看，不同在JS裏頭。
    我們首先來看第一個方法：getResult(stateVal)，在這個方法裏，首先是取得XmlHttpRequest；然後設置該請求的url：req.open("GET",url, true);接着設置請求返回值的接收方法：req.onreadystatechange = complete;該返回值的接收方法爲——complete();最後是發送請求：req.send(null);
    然後我們來看我們的返回值接收方法：complete()，這這個方法裏，首先判斷是否正確返回，如果正確返回，用DOM對返回的XML文件進行解析。關於DOM的使用，這裏不再講述，請大家參閱相關文檔。得到city的值以後，再通過buildSelect(str,sel)方法賦值到相應的選擇框裏頭去。
 
    最後我們來看看Servlet文件：
 import java.io.IOException;
 import java.io.PrintWriter;
 
 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectCityServlet extends HttpServlet {
 
 
     public SelectCityServlet() {
             super();
     }
 
     public void destroy() {
             super.destroy();
     }
 
     public void doGet(HttpServletRequest request, HttpServletResponse response)
                     throws ServletException, IOException {
             response.setContentType("text/xml");
             response.setHeader("Cache-Control", "no-cache");
             String state = request.getParameter("state");
             StringBuffer sb=new StringBuffer("<state>");
             if ("zj".equals(state)){
                     sb.append("<city>hangzhou</city><city>huzhou</city>");
             } else if("zs".equals(state)){
                     sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
             }
             sb.append("</state>");
             PrintWriter out=response.getWriter();
             out.write(sb.toString());
             out.close();
     }
 }
    這個類也十分簡單，首先是從request裏取得state參數，然後根據state參數生成相應的XML文件，最後將XML文件輸出到PrintWriter對象裏。
    到現在爲止，第一個例子的代碼已經全部結束。是不是比較簡單？我們進入到第二個實例吧！
    這次是基於JSP的AJAX的一個應用。
 
 
 
 
三、基於JSP的AJAX
   這個例子是關於輸入校驗的問題，我們知道，在申請用戶的時候，需要去數據庫對該用戶性進行唯一性確認，然後才能繼續往下申請。如圖：
 
    這種校驗需要訪問後臺數據庫，但又不希望用戶在這裏提交後等待，當然是AJAX技術大顯身手的時候了。
    首先來看顯示UI的JSP:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Check.html</title>
 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 </head>
 <script type="text/javascript">
  var http_request = false;
  function send_request(url) {//初始化、指定處理函數、發送請求的函數
   http_request = false;
   //開始初始化XMLHttpRequest對象
   if(window.XMLHttpRequest) { //Mozilla 瀏覽器
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {//設置MiME類別
     http_request.overrideMimeType('text/xml');
    }
   }
   else if (window.ActiveXObject) { // IE瀏覽器
    try {
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
   if (!http_request) { // 異常，創建對象實例失敗
    window.alert("不能創建XMLHttpRequest對象實例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;
   // 確定發送請求的方式和URL以及是否同步執行下段代碼
   http_request.open("GET", url, true);
   http_request.send(null);
  }
  // 處理返回信息的函數
     function processRequest() {
         if (http_request.readyState == 4) { // 判斷對象狀態
             if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
                 alert(http_request.responseText);
             } else { //頁面不正常
                 alert("您所請求的頁面有異常。");
             }
         }
     }
  function userCheck() {
   var f = document.form1;
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('check1.jsp?username='+username);
   }
  }
 
 </script>
 <body>
  <form name="form1" action="" method="post">
 User Name:<input type="text" name="username" value="">&nbsp;
 <input type="button" name="check" value="check" onClick="userCheck()">
 <input type="submit" name="submit" value="submit">
 </form>
 </body>
 </html>
 
    所有的JS都跟上一個例子一樣，不同的只是對返回值的操作，這次是用alert來顯示：alert(http_request.responseText);
    我們來看處理邏輯JSP:
 <%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
 <%
 String username= request.getParameter("username");
 if("educhina".equals(username)) out.print("用戶名已經被註冊，請更換一個用戶名。");
 else out.print("用戶名尚未被使用，您可以繼續。");
 %>
 
    非常簡單，先取得參數，然後作處理，最後將結果打印在out裏。
    我們的第三個例子仍然以這個唯一性校驗爲例子，這次結合Struts開發框架來完成AJAX的開發。
 
 
四、基於Struts的AJAX
    首先，我們仍然是對Struts應用來做配置，仍然是在struts-config,xml文件裏做配置，如下：
 <action type="com.ajax.CheckAction"
       scope="request" path="/ajax/check">
       <forward name="success" path="/check.jsp"/>
 </action>
 
    跟普通的Struts應用的配置一樣，只是沒有ActionForm的配置。
    下面是Action類：
 package com.ajax;
 
 import java.io.PrintWriter;
 
 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 org.apache.struts.action.DynaActionForm;
 
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class CheckAction extends Action
 {
  public final ActionForward execute(ActionMapping mapping, ActionForm form,
             HttpServletRequest request,
             HttpServletResponse response)
   throws Exception
   {
    System.out.println("haha...............................");
    String username= request.getParameter("username");
    System.out.println(username);
    String retn;
    if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
    else retn = "congraducation!you can use this name....";
    PrintWriter out=response.getWriter();
             out.write(retn);
             out.close();
    return mapping.findForward("success");
   }
  public static void main(String[] args)
  {
  }
 }
 
    我們可以看到裏面的邏輯跟上例中Servlet裏的邏輯一樣。最後，我們來看看JSP:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Check.html</title>
 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 </head>
 <script type="text/javascript">
  var http_request = false;
  function send_request(url) {//初始化、指定處理函數、發送請求的函數
   http_request = false;
   //開始初始化XMLHttpRequest對象
   if(window.XMLHttpRequest) { //Mozilla 瀏覽器
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {//設置MiME類別
     http_request.overrideMimeType('text/xml');
    }
   }
   else if (window.ActiveXObject) { // IE瀏覽器
    try {
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
   if (!http_request) { // 異常，創建對象實例失敗
    window.alert("不能創建XMLHttpRequest對象實例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;
   // 確定發送請求的方式和URL以及是否同步執行下段代碼
   http_request.open("GET", url, true);
   http_request.send(null);
  }
  // 處理返回信息的函數
     function processRequest() {
         if (http_request.readyState == 4) { // 判斷對象狀態
             if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
                 alert(http_request.responseText);
             } else { //頁面不正常
                 alert("您所請求的頁面有異常。");
             }
         }
     }
  function userCheck() {
   var f = document.forms[0];
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('ajax/check.do?username='+username);
   }
  }
 
 </script>
 <body>
  <form name="form1" action="" method="post">
 User Name:<input type="text" name="username" value="">&nbsp;
 <input type="button" name="check" value="check" onClick="userCheck()">
 <input type="submit" name="submit" value="submit">
 </form>
 </body>
 </html>
 
    我們可以看到，JSP基本是一樣的，除了要發送的url：ajax/check.do?username='+username。
    最後，我們來看一個基於Struts和AJAX的複雜一些的例子，如果不用AJAX技術，UI的代碼將十分複雜。
 
 
 
五、一個複雜的實例
    我們先來看看UI圖：
 
 
    這是一個比較複雜的級聯：一共八個列表框，三個下拉框。從第一個列表框裏選擇到第二個列表框裏後，第一個選擇框裏的選項是第二個列表框的選擇；然後，在第一個選擇框裏選擇以後，與選擇值關聯的一些選項出現在第三個列表框裏。從第三個列表框裏選擇選項到第四個列表框裏，同樣，第二個選擇框的選項也是第四個列表框的選項；如果對第二個選擇框進行選擇後，與選擇值關聯的一些選項出現在第六個列表框裏，依次類推……
    這個UI的邏輯就比較複雜，但使用了AJAX使得我們實現起來就簡單多了，這個例子我們除了使用Action類，還要用到POJO類和Business類，然後我們擴展的話，可以通過Business類和數據庫連接起來。
    我們還是先看配置文件：
 <action type="com.ajax.SelectAction"
       scope="request" path="/ajax/select">
       <forward name="success" path="/select.jsp"/>
 </action>
 
    然後看看Action類：
 /*
 /**
  * Title : Base Dict Class
  * Description : here Description is the function of class, here maybe multirows
  * Copyright: Copyright (c) 2004
  * @company Freeborders Co., Ltd.
  * @Goal Feng        
  * @Version       1.0
  */
 
 package com.ajax;
 
 import java.io.PrintWriter;
 import java.util.List;
 
 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;
 
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectAction extends Action
 {
  public final ActionForward execute(ActionMapping mapping, ActionForm form,
             HttpServletRequest request,
             HttpServletResponse response)
   throws Exception
   {
    response.setContentType("text/xml");
          response.setHeader("Cache-Control", "no-cache");
          String type = request.getParameter("type");
          String id = request.getParameter("id");
          System.out.println(id);
          StringBuffer sb=new StringBuffer("<select>");
          sb.append("<type>"+type+"</type>");
         
          List list = new SelectBusiness().getData(id);
          for(int i=0;i<list.size();i++)
          {
           SelectForm sel = (SelectForm)list.get(i);
           sb.append("<text>"+sel.getText()+"</text><value>"+sel.getValue()+"</value>");
          }
  
          sb.append("</select>");
          PrintWriter out=response.getWriter();
          out.write(sb.toString());
          out.close();
          System.out.println(sb.toString());
    return mapping.findForward("success");
   }
  public static void main(String[] args)
  {
  }
 }
 
    POJO類和Business類：
 package com.ajax;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectForm
 {
  private String text;
  private String value;
 
  /**
   * @return Returns the text.
   */
  public String getText()
  {
   return text;
  }
  /**
   * @param text The text to set.
   */
  public void setText(String text)
  {
   this.text = text;
  }
  /**
   * @return Returns the value.
   */
  public String getValue()
  {
   return value;
  }
  /**
   * @param value The value to set.
   */
  public void setValue(String value)
  {
   this.value = value;
  }
  public static void main(String[] args)
  {
  }
 }
 
 
 package com.ajax;
 
 import java.util.ArrayList;
 import java.util.List;
 
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectBusiness
 {
  public List getData(String id)
  {
   ArrayList list = new ArrayList();
   for(int i=1;i<6;i++)
   {
    SelectForm form = new SelectForm();
    form.setText(id+i);
    form.setValue(id+i);
    list.add(form);
   }
   return list;
  }
 
  public static void main(String[] args)
  {
  }
 }
 
    最後是JSP文件：
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <HTML>
 <HEAD>
 <TITLE>FB</TITLE>
 <LINK href="images/magazin.css" type=text/css rel=stylesheet>
 <LINK href="images/briefing.css" type=text/css rel=stylesheet>
 <META http-equiv=Content-Type content="text/html; charset=utf-8">
 <META content="MSHTML 6.00.2800.1498" name=GENERATOR>
 <style type="text/css">
 <!--
 .style1 {
  color: #000000;
  font-weight: bold;
  font-size: 10pt;
 }
 .style2 {font-size: 10pt; color: #FF0000;}
 -->
 </style>
 <script language="javascript">
 function Add()
 {
 if(document.all.Education2.style.display=='block')document.all.Education2.style.display='none';
 else document.all.Education2.style.display='block';
 }
 </script>
 </HEAD>
 <BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
 <script type="text/javascript" src="images/head.js"></script>
 <script language=javascript>
 
 function getResult(type,id) {
         var url = "ajax/select.do?type="+type+"&id="+id;
         if (window.XMLHttpRequest) {
                 req = new XMLHttpRequest();
         }else if (window.ActiveXObject) {
                 req = new ActiveXObject("Microsoft.XMLHTTP");
         }
         if(req){
                 req.open("GET",url, true);
                 req.onreadystatechange = complete;
                 req.send(null);
         }
 }
 function complete(){
         if (req.readyState == 4) {
                 if (req.status == 200) {
                         var type = req.responseXML.getElementsByTagName("type");
                          var value = req.responseXML.getElementsByTagName("value");
                          var str=new Array();
                          for(var i=0;i<value.length;i++){
                                str[i]=value[i].firstChild.data;
                             }
                         var type = type[0].firstChild.data;
                        
                         removeType1(type);
                            
                        if(type=="0")
                         {
                          
                          buildSelect(str,document.getElementById("select28"));
                        }
                        else if(type=="1")
                        {
                          buildSelect(str,document.getElementById("select32"));
                        }
                        else if(type=="2")
                        {
                          buildSelect(str,document.getElementById("select34"));
                        }
                       
                 }
         }
 }
 function buildSelect(str,sel) {
         sel.options.length=0;
         for(var i=0;i<str.length;i++) {
                 sel.options[sel.options.length]=new Option(str[i],str[i])
         }
 }
        
        
 
  function removeType1(type)
   {
    var form = document.forms[0];
    if(type=="0")
    {
     removeAll(form.select28);
     removeAll(form.select29);
     removeAll(form.select30);
     removeAll(form.select31);
     removeAll(form.select32);
     removeAll(form.select33);
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="1")
    {
     removeAll(form.select31);
     removeAll(form.select32);
     removeAll(form.select33);
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="2")
    {
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="3")
    {
     
    }
   }
  
  
   
    function selChange(f,h)
   {
    for(i = 0;i < f.length; i++)
    {  
     if(f.options[i].selected == true)
     {    
      h.options.add(new Option( f.options[i].text,f.options[i].value));
      f.options.remove(i);
      i--;
     }
    }
   }
   
   function removeAll(obj)
   {
    for(i=0;i<obj.length;i++)
    {
     obj.options.remove(i);
     i--;
    }
   }
   
   function addAll(f,h)
   { 
    for(i = 0;i < f.length; i++)
    {
     h.options.add(new Option( f.options[i].text,f.options[i].value));
     f.options.remove(i);
     i--; 
    }
   }
   
   function changeSel(offer,getter,type)
   {
    removeType(type);
    for(i=0;i<getter.length;i++)
    {
     getter.options.remove(i);
     i--;
    }
    getter.options.add(new Option("",""));
    for(i = 0;i < offer.length; i++)
    {
     getter.options.add(new Option(offer.options[i].text,offer.options[i].value));
    }
   }
   
   function removeType(type)
   {
    var form = document.forms[0];
    if(type=="0")
    {
     removeAll(form.select25);
     removeAll(form.select28);
     removeAll(form.select29);
     removeAll(form.select30);
     removeAll(form.select31);
     removeAll(form.select32);
     removeAll(form.select33);
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="1")
    {
     removeAll(form.select30);
     removeAll(form.select31);
     removeAll(form.select32);
     removeAll(form.select33);
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="2")
    {
     removeAll(form.select31);
     removeAll(form.select34);
     removeAll(form.select35);
    }
    else if(type=="3")
    {
     
    }
   }
   function removeAll(obj)
   {
    for(i=0;i<obj.length;i++)
    {
     obj.options.remove(i);
     i--;
    }
   }
  
    </script>
 <form>
 <font face="Arial, Helvetica, sans-serif"></font>
 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
   <TBODY>
   <TR>
     <TD align=middle vAlign=top bgcolor="#eeeeee"><!--[ Left & Contents & Right ]------>
         <TABLE cellSpacing=0 cellPadding=0 width=945 align=center
       background=images/bg2.gif border=0>
           <TBODY>
             <TR>
               <TD vAlign=top> <TABLE cellSpacing=0 cellPadding=0 width="95%" align=center border=0>
                   <TBODY>
                     <TR>
                       <TD width="97%" align=right> <p align="left"> Resource Management&nbsp;&gt;&gt;&nbsp;New
                           Staff</TD>
                     </TR>
                     <TR height=4>
                       <TD></TD>
                     </TR>
                     <TR>
                       <TD valign="top"> <table class=homeBody cellspacing=0 cellpadding=0 width="100%"
 align=center border=0>
                           <tbody>
                             <tr>
                               <td height=25 colspan="2" nowrap><table class=grid style="WIDTH: 100%;" cellspacing=0 cellpadding=3>
                                   <tbody>
                                     <tr class=gridHeader>
                                       <td width="26%" align=left bgcolor="#eeeeee" ><strong>&nbsp;Personal
                                         Information</strong></td>
                                       <td width="74%" align=left bgcolor="#eeeeee" ><span class="gridAlternating">Last
                                         Modified : 06/06/2005</span></td>
                                     </tr>
                                   </tbody>
                                 </table></td>
                             </tr>
                             <tr>
                               <td valign=middle nowrap><div align="right"><input style="width:50px" class="button" type="button" value="Save"
          name="B323252">&nbsp;&nbsp;<input style="width:50px" class="button" type="button" value="Undo" name="B323262">
                                 </div></td>
                             </tr>
                             <tr>
                               <td colspan=2 valign="top" class="modifiedRow modifiedProducts">
                                 <table id=DynamicTabsTable cellspacing=0 cellpadding=0
 border=0 name="DynamicTabsTable">
                                   <tbody>
                                     <tr id=DynamicTabsTR>
                                       <script language=JavaScript
 src="images/Public.js"></script>
                                     </tr>
                                   </tbody>
                                 </table>
                                 <table width="100%" border="0" cellpadding="0" cellspacing="3" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF">
                                  
                                   <tr>
                                     <td nowrap><fieldset align="left" style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; LINE-HEIGHT: 30px; PADDING-TOP: 8px;width:900px">
                                       <legend class=legend>Freeborders Experience</legend>
                                       <table width="100%" height="15" border="0" align="center" cellspacing="0" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" id="table21">
                                         <tr>
                                           <td nowrap><strong>FB Vertical Experience</strong></td>
                                           <td colspan="2"><strong>FB Customer
                                             Experience </strong></td>
                                         </tr>
                                         <tr>
                                           <td height="26" valign="top" nowrap>&nbsp;</td>
                                           <td colspan="2" valign="top" nowrap><strong>
                                             <select name="select25" id="select25" style="WIDTH: 179px" οnchange="getResult('0',document.forms[0].select25.value);">
                                               <option value="b">b</option>
                                               <option value="c">c</option>
                                             </select>
                                             </strong></td>
                                         </tr>
                                         <tr>
                                           <td height="26" valign="top" nowrap>
                                             <table  border="0" cellspacing="0" cellpadding="0" id="table34">
                                               <tr>
                                                 <td> <select id="select26" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select26">
                                                     <option value="a">a</option>
                                                   </select>
                                                 </td>
                                                 <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center">
                                                     <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table35">
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button29" style="WIDTH: 30px"  value=">" οnclick="selChange(document.forms[0].select26,document.forms[0].select27);changeSel(document.forms[0].select27,document.forms[0].select25,'0')" />
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button30" style="WIDTH: 30px" value=">>" causesvalidation="False" οnclick="addAll(document.forms[0].select26,document.forms[0].select27);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td height="5"><div align="center"></div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button31" style="WIDTH: 30px" value="<" causesvalidation="False" οnclick="selChange(document.forms[0].select27,document.forms[0].select26,document.forms[0].select25,1);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button32" style="WIDTH: 30px" value="<<" causesvalidation="False" οnclick="addAll(document.forms[0].select27,document.forms[0].select26);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/>
                                                           </div></td>
                                                       </tr>
                                                     </table>
                                                   </div></td>
                                                 <td>&nbsp;</td>
                                                 <td align="right"> <select id="select27"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select27">
                                                     <option value="b">b</option>
                                                     <option value="c" selected>c</option>
                                                   </select></td>
                                               </tr>
                                             </table></td>
                                           <td colspan="2" valign="top" nowrap>
                                             <table  border="0" cellspacing="0" cellpadding="0" id="table36">
                                               <tr>
                                                 <td> <select id="select28"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select28">
                                                     <option value="b1">b1</option>
                                                   </select></td>
                                                 <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center">
                                                     <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table37">
                                                       <tr>
                                                         <td><div align="center">
                                                             <input type="button"  name="button2" id="button33" style="WIDTH: 30px"  value=">" οnclick="selChange(document.forms[0].select28,document.forms[0].select29);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button34" style="WIDTH: 30px" value=">>" causesvalidation="False" οnclick="addAll(document.forms[0].select28,document.forms[0].select29);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td height="5"><div align="center"></div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button35" style="WIDTH: 30px" value="<" causesvalidation="False" οnclick="selChange(document.forms[0].select29,document.forms[0].select28);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button36" style="WIDTH: 30px" value="<<" causesvalidation="False" οnclick="addAll(document.forms[0].select29,document.forms[0].select28);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/>
                                                           </div></td>
                                                       </tr>
                                                     </table>
                                                   </div></td>
                                                 <td>&nbsp;</td>
                                                 <td> <select id="select29"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select29">
                                                     <option value="b2">b2</option>
                                                   </select></td>
                                               </tr>
                                             </table></td>
                                         </tr>
                                         <tr>
                                           <td height="10" colspan="2" nowrap></td>
                                           <td width="275" valign="top">&nbsp;</td>
                                         </tr>
                                         <tr>
                                           <td nowrap><strong>Project Experience</strong></td>
                                           <td colspan="2" nowrap><strong>SubProject
                                             Experience</strong></td>
                                         </tr>
                                         <tr>
                                           <td height="10" valign="top" nowrap><strong>
                                             <select name="select30" id="select30" style="WIDTH: 179px" οnchange="getResult('1',document.forms[0].select30.value);">
                                               <option value=""></option>
                                               <option value="b2">b2</option>
                                             </select>
                                             </strong></td>
                                           <td colspan="2" valign="top" nowrap><strong>
                                             <select name="select31" id="select31" style="WIDTH: 179px" οnchange="getResult('2',document.forms[0].select31.value);">
                                               <option> </option>
                                               <option value="b13">b13</option>
                                               <option value="b14">b14</option>
                                             </select>
                                             </strong></td>
                                         </tr>
                                         <tr>
                                           <td height="10" valign="top" nowrap>
                                             <table  border="0" cellspacing="0" cellpadding="0" id="table38">
                                               <tr>
                                                 <td> <select id="select32"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select32">
                                                     <option value="b11">b11</option>
                                                     <option value="b12">b12</option>
                                                   </select></td>
                                                 <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center">
                                                     <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table39">
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button37" style="WIDTH: 30px"  value=">" οnclick="selChange(document.forms[0].select32,document.forms[0].select33);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button38" style="WIDTH: 30px" value=">>" causesvalidation="False" οnclick="addAll(document.forms[0].select32,document.forms[0].select33);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td height="5"><div align="center"></div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button39" style="WIDTH: 30px" value="<" causesvalidation="False" οnclick="selChange(document.forms[0].select33,document.forms[0].select32);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button40" style="WIDTH: 30px" value="<<" causesvalidation="False" οnclick="addAll(document.forms[0].select33,document.forms[0].select32);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/>
                                                           </div></td>
                                                       </tr>
                                                     </table>
                                                   </div></td>
                                                 <td>&nbsp;</td>
                                                 <td> <select id="select33"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select33">
                                                     <option value="b13">b13</option>
                                                     <option value="b14">b14</option>
                                                   </select></td>
                                               </tr>
                                             </table></td>
                                           <td colspan="2" valign="top" nowrap>
                                             <table  border="0" cellspacing="0" cellpadding="0" id="table40">
                                               <tr>
                                                 <td> <select id="select34"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select34">
                                                     <option value="b111">b111</option>
                                                     <option value="b112">b112</option>
                                                     <option value="b113">b113</option>
                                                   </select></td>
                                                 <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center">
                                                     <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table41">
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button41" style="WIDTH: 30px"  value=">" οnclick="selChange(document.forms[0].select34,document.forms[0].select35);"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button42" style="WIDTH: 30px" value=">>" causesvalidation="False" οnclick="addAll(document.forms[0].select34,document.forms[0].select35)"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td height="5"><div align="center"></div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button43" style="WIDTH: 30px" value="<" causesvalidation="False" οnclick="selChange(document.forms[0].select35,document.forms[0].select34);"/>
                                                           </div></td>
                                                       </tr>
                                                       <tr>
                                                         <td><div align="center">
                                                             <input name="button2" type="button" class="button" id="button44" style="WIDTH: 30px" value="<<" causesvalidation="False" οnclick="addAll(document.forms[0].select35,document.forms[0].select34)"/>
                                                           </div></td>
                                                       </tr>
                                                     </table>
                                                   </div></td>
                                                 <td>&nbsp;</td>
                                                 <td> <select id="select35"
             style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4"
             name="select35">
                                                     <option value="b114">b114</option>
                                                     <option value="b115">b115</option>
                                                     <option value="b116">b116</option>
                                                   </select></td>
                                               </tr>
                                             </table></td>
                                         </tr>
                                        
                                             </table></td>
                                         </tr>
                                       </table>
                                       </fieldset></td>
                                   </tr>
                                 </table></td>
                             </tr>
                           </tbody>
                         </table></TD>
                     </TR>
                   </TBODY>
                 </TABLE>
                 <TABLE cellSpacing=0 cellPadding=0 width="95%" align=center border=0>
                   <TBODY>
                     <TR valign="top">
                       <TD width="97%" align="left" valign="middle"><div align="right"><input style="width:50px" class="button" type="button" value="Save"
          name="B32">&nbsp;&nbsp;<input style="width:50px" class="button" type="button" value="Undo" name="B3">
                         </div></TD>
                     </TR>
                   </TBODY>
                 </TABLE>
                
               </TD>
             </TR>
           </TBODY>
      </TABLE>
         <script type="text/javascript" src="images/bottom.js"></script></TD></TR></TBODY></TABLE>
 </BODY></form></HTML>
 
 雖然這個JSP複雜多了，但是關於AJAX的代碼還是跟前面的例子一樣，在這裏我也就不多說了，請大家自己看。
 
 
六、蛇足
    好了，例子都說完了。廢話也就不多說了，只說一件事：AJAX好像來勢洶洶，要把我們用得極其普遍、極其習慣的Struts等的MVC開發模式取代掉一樣。
    其實，AJAX有它的優點，同樣也有它的缺點。它一般用在用戶不想等待返回結果的時候和複雜的UI上；其他時候，我們還是可以使用Struts等常規方法。
    一句話，不要爲了使用AJAX而使用AJAX，而是要在適合於使用AJAX的地方使用AJAX。
 
    注：本文參考了一些網友的作品，不好列出參考文獻，在此對他們的工作表示感謝！


Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=590435 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Vue 學習筆記簡寫

一.Vue文件內容                <template>     </template>     <script>     </script>     <style>     </style>

原創 2024-05-13 21:42:40

一鍵自動化博客發佈工具,用過的人都說好(csdn篇)

CSDN應該是大家接觸到最多的博客平臺了，所以一款能夠發佈到CSDN的自動化工具還是非常有必要的。 今天給大家講講自動化CSDN博客發佈的思路和一些問題的解決辦法。 解決問題的思路一定是最重要的，知識是死的，問題是活的，如何在工作中解決遇

原創 2024-05-13 21:39:29

Spring boot自動裝配實現原理

自動裝配原理分析 條件註冊機制 spring-context模塊中有兩個組件：Condition接口和@Conditional註解，在@Conditional註解中可以指定一組Condition實現， 通常@Conditional是和@Co

原創 2024-05-16 23:48:07

京東秒送售後系統退款業務重構心得| 京東零售技術團隊

一、重構背景 1.1、退款 京東秒送秒送退款有2套結構，代碼邏輯混亂； 其中秒送、天選部分售後單是和平生pop交互退款，部分是和售後中臺交互退款；並且兼容3套邏輯； 痛點：代碼繁重，缺乏合理性的設計，後續迭代開發以及維護成本高，同時增加

原創 2024-05-16 23:56:23

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

終於要講解我們親愛的掘金了。掘金是一個非常不錯的平臺。所以很多朋友會把博客發佈到掘金上。 發佈到掘金要填寫的內容也比較多。今天給大家介紹一下如何用blog-auto-publishing-tools這個工具自動把博客發佈到掘金平臺上去。 前

原創 2024-05-16 21:38:44

Koupleless 內核系列｜模塊化隔離與共享帶來的收益與挑戰

文｜趙真靈（花名：有濟） Koupleless 項目負責人螞蟻集團技術專家 本文 3724 字    閱讀 10 分鐘 聯繫作者/加入共建/使用產品 本篇文章屬於「Koupleless 進階系列文章」之一，默認讀者對 Koupleless

原創 2024-05-15 23:18:46

鴻蒙原生應用已超4000個！

鴻蒙原生應用已超4000個！ 來自 HarmonyOS  微博近期消息，#鴻蒙千帆起# 重大里程碑！目前已有超4000個應用加入鴻蒙生態。從今年1月18日華爲宣佈首批200多家應用廠商正在加速開發鴻蒙原生應用，到3月底超4000個應用，短短

原創 2024-05-13 12:26:37

鴻蒙原生應用再添新丁！瑞幸咖啡 入局鴻蒙

鴻蒙原生應用再添新丁！瑞幸咖啡 入局鴻蒙 來自 @HarmonyOS  微博1月23日消息，國內擁有超過1.3萬家門店、累計服務超過2億客戶的瑞幸咖啡，已完#成鴻蒙原生應用#核心功能開發，大家以後可以隨時隨地在多種#HarmonyOS#終端

原創 2024-05-13 12:26:35

鴻蒙原生應用再添一批新丁！阿里旗下11款應用、廣汽傳祺、嵐圖汽車、零跑汽車、凱翼汽車 入局鴻蒙

 鴻蒙原生應用再添一批新丁！阿里旗下11款應用、廣汽傳祺、嵐圖汽車、零跑汽車、凱翼汽車 入局鴻蒙   來自 HarmonyOS  微博近期消息，阿里旗下閒魚、1688、飛豬、餓了麼、盒馬、菜鳥、點淘、淘寶特價版、大麥、淘票票、燈塔專業版共1

原創 2024-05-13 12:26:34

鴻蒙原生應用再添新丁！萬達 入局鴻蒙

鴻蒙原生應用再添新丁！萬達 入局鴻蒙   來自 @HarmonyOS  微博1月11日消息，#萬達酒店及度假村啓動鴻蒙原生應用及元服務開發# 作爲具有中國特色的國牌服務酒店標杆之一，@萬達酒店及度假村Wanda 將帶來全新的服務和交互方式，

原創 2024-05-13 12:26:31

鴻蒙生態千帆啓航！

2024年1月18日，華爲舉行的鴻蒙生態千帆啓航儀式，會上宣佈HarmonyOS NEXT鴻蒙星河版系統開發者預覽版開放申請。據介紹，鴻蒙星河版將實現原生精緻、原生應用、原生流暢、原生安全、原生智能、原生互聯六大極致原生體驗。Harmony

原創 2024-05-13 12:26:29

鴻蒙原生應用再添一批新丁！墨跡天氣、北京銀行、快手、中國電信 入局鴻蒙

 鴻蒙原生應用再添一批新丁！墨跡天氣、北京銀行、快手、中國電信 入局鴻蒙 來自 HarmonyOS  微博近期消息，#鴻蒙千帆起#服務超七億用戶的天氣App@墨跡天氣，啓動鴻蒙原生應用開發，讓智慧體驗落地更多場景！[打call]鴻蒙星河版墨

原創 2024-05-13 12:26:26

Spring @EnableXxx註解的使用理解

@EnableXxx註解 Spring有很多@EnableXxx這種形式的註解，類似於可以一鍵打開某項功能，相當於暴露給用戶的一種便捷的配置API，例如 @EnableAsync 激活異步執行能力，@EnableTransactionMan

原創 2024-05-16 23:48:06

Spring 按條件裝配使用方法

條件註冊 Spring 4.0 引入條件註冊機制，暴露給用戶的API是@Conditional和Condition接口，把@Conditional聲明在一個 @Component類上，並接受一組條件（Condition實現），容器初始化期間

原創 2024-05-15 11:50:12

Python函數與模塊的精髓與高級特性

本文分享自華爲雲社區《Python函數與模塊的精髓與高級特性》，作者：檸檬味擁抱。 Python 是一種功能強大的編程語言，擁有豐富的函數和模塊，使得開發者能夠輕鬆地構建複雜的應用程序。本文將介紹 Python 中函數和模塊的基本使用方法，

原創 2024-05-14 11:00:07