ajax 实现XML的二级联动

今天学习了一下ajax以及xml的用法并且实现了一个二级联动的小功能，因为楼主比较懒，将其放于博客方便查阅并希望能帮助其他人！

小案例：省市联动

代码：ajax代码

省部分：

<script type="text/javascript">
	var xmlDoc;
	window.onload=function(){
		
		// 发出异步请求
		var xhr = getXHR();
		xhr.onreadystatechange= function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					xmlDoc = xhr.responseXML;
					// 给省份赋值:XML DOM和HTML DOM解析的问题 
					// --------------------------
						//1.解析XML文档,得到所有的province元素
						var xmlProvinces = xmlDoc.getElementsByTagName("province");
						// 2.遍历province元素,得到他的属性code和name的值
						for(var i = 0;i<xmlProvinces.length;i++){
							var codeValue = xmlProvinces[i].getAttribute("code");
							var nameValue = xmlProvinces[i].getAttribute("name");
							//alert(codeValue+":"+nameValue);
							
							// 3 . 创建HTML中的option对象,给id=p1的元素添加子元素
							
							var o = new Option(nameValue,codeValue);
							document.getElementById("p1").add(o);
							
						}
				}
				
			}
		}
		xhr.open("GET","${pageContext.request.contextPath}/servletDemo4?time="+new Date().getTime());
		xhr.send(null);
		
	}

省的变化引起城市的变化：

// 省份的变化,引起城市的变化
	function selectCity(provinceObj){
		// 取到当前的选项的值
		var selectValue = provinceObj.value;
		if(selectValue==""){
			// 清楚城市下拉内容
			document.getElementById("c1").length = 1;
		}else{
			// 遍历xml文档中的省份元素,比对code的值
			var xmlProvinces = xmlDoc.getElementsByTagName("province");
			for(var i = 0; i<xmlProvinces.length;i++){
				// 找到了:把他的子元素city取出来
				if(selectValue == xmlProvinces[i].getAttribute("code")){
					var xmlCitys = xmlProvinces[i].getElementsByTagName("city");
					// 给HTML中的city下拉选择添加option
					for(var j=0;j<xmlCitys.length;j++){
						var o = new Option(xmlCitys[j].getAttribute("name"),xmlCitys[j].getAttribute("code"));
						document.getElementById("c1").add(o);
					}
					
				}
				
				
			}
			
			
		}
		
		
	}
	
	
</script>

下面是

servlet中的代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Province> provinces = new ArrayList<Province>();
		Province sd = new Province(37, "山东省");
		Province hb = new Province(42, "湖北省");
		Province hn = new Province(41, "河南省");
		
		sd.getCitys().add(new City(01, "济南市"));
		sd.getCitys().add(new City(02, "青岛市"));
		sd.getCitys().add(new City(03, "淄博市"));
		
		hb.getCitys().add(new City(01, "武汉市"));
		hb.getCitys().add(new City(02, "黄冈市"));
		hb.getCitys().add(new City(03, "襄阳市"));
		
		hn.getCitys().add(new City(01, "郑州市"));
		hn.getCitys().add(new City(02, "开封市"));
		hn.getCitys().add(new City(03, "洛阳市"));
		
		provinces.add(sd);
		provinces.add(hb);
		provinces.add(hn);
		
		XStream xs = new XStream();
		xs.autodetectAnnotations(true);//使用注解生成别名
		xs.alias("provinces", List.class);
		String xml = xs.toXML(provinces);
		
		//输出xml文件
		response.setContentType("text/xml;charset=UTF-8");
		response.getWriter().write(xml);
		
	}

还需要两个工具类：

<provinces>
  <province code="37" name="山东省">
    <city code="1" name="济南市"/>
    <city code="2" name="青岛市"/>
    <city code="3" name="淄博市"/>
  </province>
  <province code="42" name="湖北省">
    <city code="1" name="武汉市"/>
    <city code="2" name="黄冈市"/>
    <city code="3" name="襄阳市"/>
  </province>
  <province code="41" name="河南省">
    <city code="1" name="郑州市"/>
    <city code="2" name="开封市"/>
    <city code="3" name="洛阳市"/>
  </province>
</provinces>

Province 类:
@XStreamAlias("province")
public class Province {
	@XStreamAsAttribute
	private int code;  // 10 37 42
	@XStreamAsAttribute
	private String name;
	
	@XStreamImplicit(itemFieldName="city")
	private List<City> citys = new ArrayList<City>();
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public List<City> getCitys() {
		return citys;
	}
	public void setCitys(List<City> citys) {
		this.citys = citys;
	}
	@Override
	public String toString() {
		return "Province [code=" + code + ", name=" + name + ", citys=" + citys + "]";
	}
	public Province(int code, String name) {
		super();
		this.code = code;
		this.name = name;
		
	}
	public Province() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	
	
}



City 类
@XStreamAlias("city")
public class City {
	@XStreamAsAttribute
	private int code;
	@XStreamAsAttribute
	private String name;
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public City(int code, String name) {
		super();
		this.code = code;
		this.name = name;
	}
	public City() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	
}

这种方式比较复杂，所以了解一下就可以。