Ajax 模擬動(dòng)態(tài)列表
three.html
three.jsp
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>index.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=GBK">
- <script type="text/javascript">
- var xmlhttp;
- function loadXMLDoc(valueFromSelect1){
- var url = "three.jsp?valueFromSelect=" + valueFromSelect1 + "&" + Math.random();
- alert(url);
- xmlhttp=null;
- if (window.XMLHttpRequest){
- xmlhttp=new XMLHttpRequest();
- }
- else if (window.ActiveXObject){
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- if (xmlhttp!=null){
- xmlhttp.onreadystatechange=updatePage;
- xmlhttp.open("GET",url,true);
- xmlhttp.send(null);
- }
- else{
- alert("Your browser does not support XMLHTTP.");
- }
- }
- function state_Change(){
- if (xmlhttp.readyState==4){
- if (xmlhttp.status==200){
- updatePage();
- }
- else{
- alert("Problem retrieving XML data");
- }
- }
- }
- function updatePage(){
- // 清空select2
- while(select2.options[0] != null){
- select2.options[0] = null;
- }
- // 設(shè)置select2
- var xmlDoc = xmlhttp.responseXML;
- alert(xmlDoc);
- var labelValueBeanElements = xmlDoc.getElementsByTagName("labelValueBean");
- for (var i = 0; i < labelValueBeanElements.length; i++){
- var entityValue = xmlDoc.getElementsByTagName("value")[i].childNodes[0].nodeValue;
- var entityLabel = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue;
- select2.options[i] = new Option(entityLabel,entityValue,false,false);
- }
- }
- </script>
- </head>
- <body>
- select1:
- <select id="select1" onchange="loadXMLDoc(this.value)">
- <option value="1">1</option>
- <option value="2">2</option>
- </select>
- <br/>
- select2:
- <select id="select2">
- </select>
- <input type="button" value="顯示select2的值" onclick="alert(select2.value)">
- </body>
- </html>
three.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <%!
- private String fromDB (String valueFromSelect) {
- StringBuffer sb = new StringBuffer();
- if (valueFromSelect.equals("1")) {
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>haha</value>\n");
- sb.append(" <label>哈哈</label>\n");
- sb.append(" </labelValueBean>\n");
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>hehe</value>\n");
- sb.append(" <label>呵呵</label>\n");
- sb.append(" </labelValueBean>\n");
- } else if (valueFromSelect.equals("2")) {
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>heihei</value>\n");
- sb.append(" <label>嘿嘿</label>\n");
- sb.append(" </labelValueBean>\n");
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>gaga</value>\n");
- sb.append(" <label>嘎嘎</label>\n");
- sb.append(" </labelValueBean>\n");
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>woyun</value>\n");
- sb.append(" <label>我暈</label>\n");
- sb.append(" </labelValueBean>\n");
- sb.append(" <labelValueBean>\n");
- sb.append(" <value>123</value>\n");
- sb.append(" <label>456</label>\n");
- sb.append(" </labelValueBean>\n");
- }
- return sb.toString();
- }
- %>
- <%
- String valueFromSelect = request.getParameter("valueFromSelect");
- StringBuffer sb = new StringBuffer();
- sb.append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\n");
- sb.append("<resultFromDB>\n");
- sb.append(fromDB(valueFromSelect));
- sb.append("</resultFromDB>\n");
- response.setHeader("content-type", "text/xml;charset=GBK");
- System.out.println(sb);
- out.println(sb.toString());
- //out.flush();
- out.close();
- %>
posted on 2012-07-27 14:04 zx_bing 閱讀(211) 評論(0) 編輯 收藏 所屬分類: js