Ajax+servlet+web.xml Ajax select 上拉菜单实例（转） _Web前端

Ajax+servlet+web.xml Ajax select 下拉菜单实例（转）
--- servlet----

package com.ajax;

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;

public class AjaxServlet extends HttpServlet {

String[][] hebeiArr;
String[][] beijingArr;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
   System.out.println("ajaxServlet onload .....");
   hebeiArr = new String[3][2];
   beijingArr = new String[3][2];
   String[][] tmpArr = null;
   hebeiArr[0][0] = "11";
   hebeiArr[0][1] = "石家庄";
   hebeiArr[1][0] = "12";
   hebeiArr[1][1] = "廊坊";
   hebeiArr[2][0] = "13";
   hebeiArr[2][1] = "秦皇岛";
   beijingArr[0][0] = "01";
   beijingArr[0][1] = "昌平";
   beijingArr[1][0] = "02";
   beijingArr[1][1] = "通州";
   beijingArr[2][0] = "03";
   beijingArr[2][1] = "大兴";
   String id = req.getParameter("id");
   if(id.equals("hb")){
    tmpArr = hebeiArr;
   } else if(id.equals("bj")){
    tmpArr = beijingArr;
   }
   StringBuffer sb = new StringBuffer();
   sb.append("<root>");
   System.out.println(tmpArr.length);
   for(int i=0; i<tmpArr.length; i++){
    sb.append("<city><id>"+tmpArr[i][0]+"</id><name>"+tmpArr[i][1]+"</name></city>");
   }
   sb.append("</root>");
   resp.setContentType("text/xml");
   resp.setHeader("Cache-Control", "no-cache");
   resp.setCharacterEncoding("utf-8");
   PrintWriter out = resp.getWriter();
   out.print(sb.toString());
   System.out.println(sb.toString());
   out.close();
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
   this.doGet(req, resp);
}
}

----- jsp-------

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
<form name='frm' method='post' action=''>
<table border='1' align='center'>
<tr>
   <td id='se'>
    <select onchange='show(this.value)'>
     <option value='hb'>河北省</option>
     <option value='bj'>北京市</option>
    </select>
   </td>
   <td id='si'>
    <select name='city'>
     <option value='0'>选择</option>
    </select>
   </td>
</tr>
</table>
</form>
</body>
<script language='javascript'>
var xMLHttpReq;
function show(val){
   if(window.ActiveXObject){
    try{
         xMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //IE6.0 
      } catch(e){
         xMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.5 这两版本差别不大
      }
     }else if(window.XMLHttpRequest){
     xMLHttpReq=new XMLHttpRequest();
     }
   xMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   var url = "servlet/AjaxServlet?id="+val;
   xMLHttpReq.open("get",url,true);
   xMLHttpReq.setRequestHeader("Content-Type","text/html;charset=utf-8");
   xMLHttpReq.onreadystatechange = proc;
   xMLHttpReq.send(null);
}
function proc(){
   if(xMLHttpReq.readyState == 4){ 
    if(xMLHttpReq.status == 200){
     var root = xMLHttpReq.responseXML;
     var res = root.getElementsByTagName("city"); //取得 city 标签的数组
     var sel = document.getElementById("city");
     var selsize = sel.options.length;
     /*
     for(var i=selsize-1; i>=0; i--){ //从后往前删除元素
      sel.remove(i);
     }
     */
     for(var i=0; i<selsize; i++){ //删除原有元素 效果与上同
      sel.remove(0);
     }
     for(var i=0; i<res.length; i++){
      var op = document.createElement("option");
      op.value = res[i].childNodes[0].text; //要用 .text 数组元素的第1个子元素
      op.text = res[i].childNodes[1].text; //数组元素的第2个子元素
      sel.add(op);
     }
    }
   }
}
</script>
</html>

-----------------------

---------------------

---------web.xml---------

<?xml version="1.0" encoding="UTF-8"?>
<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">
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet> 
<servlet-name>AjaxServlet</servlet-name> 
<servlet-class>com.ajax.AjaxServlet</servlet-class> 
</servlet> 

<servlet-mapping> 
<servlet-name>AjaxServlet</servlet-name> 
<url-pattern>/servlet/AjaxServlet</url-pattern> 
</servlet-mapping> 
</web-app>
----------------------

Ajax+servlet+web.xml Ajax select 上拉菜单 实例 （转）

Ajax+servlet+web.xml Ajax select 上拉菜单实例（转）