zx_bing

人生路漫漫，多学些知识总是有益处的
随笔 - 32, 文章 - 0, 评论 - 0, 引用 - 0
数据加载中……

Ajax 模拟动态列表

three.html
Java代码 复制代码 收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.     <head> 
  4.         <title>index.html</title> 
  5.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  6.         <meta http-equiv="description" content="this is my page"> 
  7.         <meta http-equiv="content-type" content="text/html; charset=GBK"> 
  8.         <script type="text/javascript"> 
  9.         var xmlhttp; 
  10.         function loadXMLDoc(valueFromSelect1){ 
  11.             var url = "three.jsp?valueFromSelect=" + valueFromSelect1 + "&" + Math.random(); 
  12.             alert(url); 
  13.             xmlhttp=null; 
  14.             if (window.XMLHttpRequest){ 
  15.               xmlhttp=new XMLHttpRequest(); 
  16.             } 
  17.             else if (window.ActiveXObject){ 
  18.               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  19.             } 
  20.             if (xmlhttp!=null){ 
  21.               xmlhttp.onreadystatechange=updatePage; 
  22.               xmlhttp.open("GET",url,true); 
  23.               xmlhttp.send(null); 
  24.             } 
  25.             else{ 
  26.               alert("Your browser does not support XMLHTTP."); 
  27.             } 
  28.         } 
  29.          
  30.         function state_Change(){ 
  31.             if (xmlhttp.readyState==4){ 
  32.                 if (xmlhttp.status==200){ 
  33.                     updatePage(); 
  34.                 } 
  35.                 else{ 
  36.                     alert("Problem retrieving XML data"); 
  37.                 } 
  38.             } 
  39.         } 
  40.          
  41.         function updatePage(){             
  42.             // 清空select2 
  43.             while(select2.options[0] != null){ 
  44.                 select2.options[0] = null; 
  45.             } 
  46.              
  47.             // 设置select2 
  48.             var xmlDoc = xmlhttp.responseXML; 
  49.             alert(xmlDoc); 
  50.             var labelValueBeanElements = xmlDoc.getElementsByTagName("labelValueBean"); 
  51.            
  52.             for (var i = 0; i < labelValueBeanElements.length; i++){ 
  53.                 var entityValue = xmlDoc.getElementsByTagName("value")[i].childNodes[0].nodeValue; 
  54.                 var entityLabel = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue; 
  55.                 select2.options[i] = new Option(entityLabel,entityValue,false,false); 
  56.             } 
  57.         } 
  58.         </script> 
  59.     </head> 
  60.  
  61.     <body> 
  62.         select1: 
  63.         <select id="select1" onchange="loadXMLDoc(this.value)"> 
  64.             <option value="1">1</option> 
  65.             <option value="2">2</option> 
  66.         </select> 
  67.         <br/> 
  68.         select2: 
  69.         <select id="select2"> 
  70.         </select> 
  71.         <input type="button" value="显示select2的值" onclick="alert(select2.value)"> 
  72.     </body> 
  73. </html> 






three.jsp
Java代码 复制代码 收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3.      
  4. <%! 
  5.     private String fromDB (String valueFromSelect)  { 
  6.         StringBuffer sb = new StringBuffer(); 
  7.  
  8.         if (valueFromSelect.equals("1")) { 
  9.             sb.append("    <labelValueBean>\n"); 
  10.             sb.append("        <value>haha</value>\n"); 
  11.             sb.append("        <label>哈哈</label>\n"); 
  12.             sb.append("    </labelValueBean>\n"); 
  13.             sb.append("    <labelValueBean>\n"); 
  14.             sb.append("        <value>hehe</value>\n"); 
  15.             sb.append("        <label>呵呵</label>\n"); 
  16.             sb.append("    </labelValueBean>\n"); 
  17.         } else if (valueFromSelect.equals("2")) { 
  18.             sb.append("    <labelValueBean>\n"); 
  19.             sb.append("        <value>heihei</value>\n"); 
  20.             sb.append("        <label>嘿嘿</label>\n"); 
  21.             sb.append("    </labelValueBean>\n"); 
  22.             sb.append("    <labelValueBean>\n"); 
  23.             sb.append("        <value>gaga</value>\n"); 
  24.             sb.append("        <label>嘎嘎</label>\n"); 
  25.             sb.append("    </labelValueBean>\n"); 
  26.             sb.append("    <labelValueBean>\n"); 
  27.             sb.append("        <value>woyun</value>\n"); 
  28.             sb.append("        <label>我晕</label>\n"); 
  29.             sb.append("    </labelValueBean>\n"); 
  30.             sb.append("    <labelValueBean>\n"); 
  31.             sb.append("        <value>123</value>\n"); 
  32.             sb.append("        <label>456</label>\n"); 
  33.             sb.append("    </labelValueBean>\n"); 
  34.         } 
  35.         return sb.toString(); 
  36.     } 
  37.  
  38. %> 
  39. <% 
  40.     String valueFromSelect = request.getParameter("valueFromSelect"); 
  41.  
  42.     StringBuffer sb = new StringBuffer(); 
  43.     sb.append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\n"); 
  44.     sb.append("<resultFromDB>\n"); 
  45.     sb.append(fromDB(valueFromSelect)); 
  46.     sb.append("</resultFromDB>\n"); 
  47.     response.setHeader("content-type", "text/xml;charset=GBK"); 
  48.     System.out.println(sb); 
  49.     out.println(sb.toString()); 
  50.     //out.flush(); 
  51.     out.close(); 
  52.      
  53.     %> 

posted on 2012-07-27 14:04 zx_bing 阅读(201) 评论(0)  编辑  收藏 所属分类: js