ajax实现二级联动

用js实现简单的ajax二级联动（如上图）

HTML代码：

1 省份：<select id="province" onchange="getCity();" >
2           <option>请选择--</option>
3      </select>
4 城市:<select id="city">
5           <option>请选择--</option>
6      </select>      

js代码：

  1 <script type="text/javascript">
  2         //获取不同浏览器的XMLHttpRequest对象
  3         function getXMLHttpRequest(){
  4             var    xmlHttp;
  5             try{
  6                 xmlHttp = new XMLHttpRequest();
  7             }catch(e){
  8                 try{
  9                     xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP");
 10                 }catch(e){
 11                     try{
 12                         xmlHttp = new XMLHttpRequest("Mircrosoft.HTTP");
 13                     }catch(e){
 14                         alert("此浏览器不支持AJAX!");
 15                         return false;
 16                     }
 17                 }
 18             }
 19             return xmlHttp;
 20         }
 21         //向服务器发送ajax请求
 22         window.onload=function(){
 23             //获取页面省份节点
 24
 25             var provinceElement = document.getElementById("province");
 26             var xmlHttp=getXMLHttpRequest();
 27             xmlHttp.open("POST","/JavaScript0505/Province",true);
 28             //表示客户端提交给服务器文本内容的编码方式 是URL编码
 29             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 30             xmlHttp.send();
 31
 32             //接收服务器响应数据
 33             xmlHttp.onreadystatechange=function(){
 34
 35                 if(xmlHttp.readyState==4){
 36                     if(xmlHttp.status==200){
 37                         //获得服务器输出的xml文件
 38                         var provinceXML =xmlHttp.responseXML;
 39                         //获取provinceXML文件中的province的集合
 40                         var provinces = provinceXML.getElementsByTagName("province");
 41                         //循环provinces集合获得province 的 name添加到页面的select标签下
 42
 43                         for(var i=0;i<provinces.length;i++){
 44                             //创建<option></option>
 45                             var optionElement = document.createElement("option");
 46                             //获取province的name的值
 47                             var provinceName = provinces[i].getAttribute("name");
 48                             //为option节点添加属性
 49                             optionElement.setAttribute("name", provinceName);
 50                             //创建文本节点<option>xxx</option>
 51                             var textNode=document.createTextNode(provinceName);
 52                             //添加节点
 53                             optionElement.appendChild(textNode);
 54                             provinceElement.appendChild(optionElement);
 55
 56                         }
 57                     }
 58                 }
 59             };
 60         };
 61         function getCity(){
 62             //获取已选择的省份的名字
 63             var selectedProvinceName=document.getElementById("province").value;
 64             //获取城市节点
 65             var cityElement=document.getElementById("city");
 66             //向服务器发送数据
 67             var xmlHttp = getXMLHttpRequest();
 68             xmlHttp.open("POST","/JavaScript0505/Province",true);
 69             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 70             xmlHttp.send();
 71             xmlHttp.onreadystatechange=function(){
 72                 if(xmlHttp.readyState==4){
 73                     if(xmlHttp.status==200){
 74                         var provinceXML = xmlHttp.responseXML;
 75                         var provinces = provinceXML.getElementsByTagName("province");
 76                         var selectProvince=null;
 77                         for(var i=0;i<provinces.length;i++){
 78                             if(selectedProvinceName==provinces[i].getAttribute("name")){
 79                                 selectProvince = provinces[i];
 80                                 break;
 81                             }
 82                         }
 83                         //在添加城市之前要删除之前已经存在城市节点
 84                         var oldOptions = cityElement.getElementsByTagName("option");
 85                         for(var i=1;i<oldOptions.length;){
 86                             cityElement.removeChild(oldOptions[i]);
 87                         }
 88                         //添加城市节点
 89                         var citys = selectProvince.getElementsByTagName("city");
 90                         for(var i=0;i<citys.length;i++){
 91                             var optionElement=document.createElement("option");
 92                             optionElement.setAttribute("name", citys[i].firstChild.nodeValue);
 93                             var text = document.createTextNode(citys[i].firstChild.nodeValue);
 94                             optionElement.appendChild(text);
 95                             cityElement.appendChild(optionElement);
 96                         }
 97
 98                     }
 99                 }
100             }
101         }
102
103
104     </script>

servlet代码：

 1     public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3             response.setContentType("text/xml;charset=utf-8");
 4             PrintWriter out = response.getWriter();
 5             out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
 6             out.println("<provinces>");
 7             out.println("<province name=\"北京\">");
 8             out.println("<city>东城区</city>");
 9             out.println("<city>西城区</city>");
10             out.println("<city>海淀区</city>");
11             out.println("<city>朝阳区</city>");
12             out.println("<city>昌平区</city>");
13             out.println("<city>大兴区</city>");
14             out.println("</province>");
15             out.println("<province name=\"天津\">");
16             out.println("<city>静海区</city>");
17             out.println("<city>唐古</city>");
18             out.println("<city>北晨区</city>");
19             out.println("<city>河东区</city>");
20             out.println("<city>河西区</city>");
21             out.println("</province>");
22             out.println("<province name=\"湖北省\">");
23             out.println("<city>武昌</city>");
24             out.println("<city>汉阳</city>");
25             out.println("<city>十堰</city>");
26             out.println("<city>宜昌</city>");
27             out.println("</province>");
28             out.println("<province name=\"山东省\">");
29             out.println("<city>荷泽</city>");
30             out.println("<city>烟台</city>");
31             out.println("<city>济南</city>");
32             out.println("<city>威海</city>");
33             out.println("</province>");
34             out.println("</provinces>");
35     }