Ajax 模拟动态列表

最新推荐文章于 2022-11-08 10:44:50 发布

oyprunner

最新推荐文章于 2022-11-08 10:44:50 发布

阅读量93

点赞数

分类专栏： JavaScript 文章标签： Ajax JSP XML HTML Microsoft

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

three.html

<!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;
            }

            // 设置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();

	%>