ajax获取服务器以xml形式输出省市数据，并获取数据绑定前台下拉框和实现联动

1、利用servlet作为服务器，以xml形式输出省市的、数据，代码如下：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setCharacterEncoding("utf-8");
response.setContentType("text/xml,charset=utf-8");//表示以xml形式输出数据
PrintWriter out = response.getWriter();

out.println("<china>");
out.println("<province name='广东省'>");
out.println("<city>广州市</city>");
out.println("<city>佛山市</city>");
out.println("<city>深圳市</city>");
out.println("<city>湛江市</city>");
out.println("</province>");

out.println("<province name='江苏省'>");
out.println("<city>徐州市</city>");
out.println("<city>无锡市</city>");
out.println("<city>常州市</city>");
out.println("</province>");

out.println("<province name='广西省'>");
out.println("<city>桂林市</city>");
out.println("<city>北海市</city>");
out.println("<city>南宁市</city>");
out.println("</province>");
out.println("</china>");
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}



2、test.js文件，在这个文件会模拟ajax连接servlet服务器，并获取服务器输出的xml数据，并绑定前台下拉框和实现联动  代码如下：

//创建XmlHttpRequest对象
function getXmlHttpRequest(){
var xmlHttpRequest;
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (e) {
try {
              // Internet  Explorer
              xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTp");
         }catch(e){
              try{
                   // Internet  Explorer
                   xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch(e){
              }
         }
}
return xmlHttpRequest;
}
window.onload = function(){
var data;
var xmlHttpRequest = getXmlHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
data = xmlHttpRequest.responseXML;
//获取所有标签province元素
var provinceElements = data.getElementsByTagName("province");
for(var i = 0 ;i < provinceElements.length ; i++){
//得到每个province元素
var provinceElement = provinceElements[i];

//获取元素中name的属性值
var value = provinceElement.getAttribute("name");
//创建option元素
var optionElement = document.createElement("option");
    //给option设置value属性值
optionElement.setAttribute("value",value);
//创建文本节点
var textElement = document.createTextNode(value);
//给option元素追加文本
optionElement.appendChild(textElement);
//获取id为province的元素
var province = document.getElementById("province");
//给province元素追加option
province.appendChild(optionElement);

}
}
}
}
//xmlHttpRequest.open("GET","./servlet/HtmlServlet?a=8",true);
xmlHttpRequest.open("POST","./servlet/XmlServlet",true);
xmlHttpRequest.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//使用get可以不设置，使用post必须设置，告知服务器正在发送数据，并通过url编码
xmlHttpRequest.send(null);
//xmlHttpRequest.send("b=9&c=10");

document.getElementById("province").onchange = function(){
//获取id为province的元素
var city = document.getElementById("city");
var optionConut = city.options.length;//获取城市中页面显示的选择数目
for(var j = 0; optionConut>1&&j < optionConut-1; j++){
city.options.remove(1);//删除除了请选择这个选项的之前所有选项
} //city.sel.selectindex=1;
var selectValue = this.options[this.selectedIndex].value;
//alert(selectValue);
var provinceElements = data.getElementsByTagName("province");
for (var i = 0; i < provinceElements.length; i++) {
//得到每个province元素
var provinceElement = provinceElements[i];

//获取元素中name的属性值
if (provinceElement.getAttribute("name") == selectValue) {
var cityElements = provinceElement.getElementsByTagName("city");
for (var j = 0; j < cityElements.length; j++){
//cityElements[i].childNodes[0].nodeValue
var cityElement = cityElements[j].childNodes[0];
//获取city元素文本值
var text = cityElement.nodeValue;
//创建option元素
var optionElement = document.createElement("option");
//给option设置value属性值
optionElement.setAttribute("value", text);
//创建文本节点
var textElement = document.createTextNode(text);
//给option元素追加文本
optionElement.appendChild(textElement);
//给province元素追加option
city.appendChild(optionElement);
}
}
}
}

}




3、前台jsp页面


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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
<script type="text/javascript"  src="${pageContext.request.contextPath }/scripts/test.js"></script>
  </head>
 
  <body>
  <form action="" enctype="application/x-www-form-urlencoded" >
    <div>
          省份：<select id="province">
          <option value="请选择">请选择</option>
          </select>
          市区：<select id="city">
              <option value="请选择">请选择</option>
          </select>
    </div>
    </form>
  </body>
</html>