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("");
out.println("");
out.println("广州市");
out.println("佛山市");
out.println("深圳市");
out.println("湛江市");
out.println("");

out.println("");
out.println("徐州市");
out.println("无锡市");
out.println("常州市");
out.println("");

out.println("");
out.println("桂林市");
out.println("北海市");
out.println("南宁市");
out.println("");
out.println("");
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"%>

省份：
请选择

市区：
请选择