AJAX_省城联动(2)

Servlet_City:

package com.sxjyatc.Demo;

import java.io.IOException;
import java.io.InputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;


public class City extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/xml;charset=utf-8");
		/**
		 * 1,获取省份名称
		 * 2.加载到对应的<province》元素
		 * 3,把元素转换成字符串送给客户端
		 */
		/*
		 *1，获取省份名称
		 *2，使用省份名称查找对应的<province>元素
		 *3,把<province>元素转换策划那个字符串 
		 */
		try {
			//得到Document对象
			SAXReader reader = new SAXReader();
			InputStream in = this.getClass().getResourceAsStream("/china.xml");
			Document document = reader.read(in);
			//获取参数
			String pname = req.getParameter("pname");
			Element proEle = (Element) document.selectSingleNode("//province[@name='"+pname+"']");
			String xmlStr = proEle.asXML();//把元素转换成字符串
			resp.getWriter().print(xmlStr);
			System.out.println(xmlStr);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
	}
}	

JSP_2:

 

  <script type="text/javascript">
//创建异步对象
  function createXMLHttpRequest(){
  	try {
  		return new XMLHttpRequest();
  	} catch (e) {
  		try {
  			return ActvieXObject("Msxm12.XMLHTTP");
  		} catch (e) {
  			try {
  				return ActvieXObject("Microsoft.XMLHTTP");
  			} catch (e) {
  				alert("浏览器不匹配");
  			}
  		}
  	}
  };
    window.onload = function(){
	 /*
	 	ajax4步 请求Province ，得到所有省份的名称
	 	使用每个省份名称创建一个<option>元素
	 */
	 var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("get","<c:url value='/province'/>",true);
		/*
			3，发送请求
			//如果是get请求 就写null,如果是post 就请响应体
		*/
		xmlHttp.send(null);
	 xmlHttp.onreadystatechange =function(){
		 if(xmlHttp.readyState ==4&&xmlHttp.status ==200){
			 //获取服务器的乡音g
			 var text = xmlHttp.responseText;
			 //使用逗号，分割得到数组
			 var arr = text.split(",");
			 //循环遍历每一个省份名称，每个名称生成一个option对象，添加到<selec>对象中
			 for(var i =0;i<arr.length;i++){
				 //创建一个指定元素
				 var op = document.createElement("option");
				 op.value=arr[i];
				 //创建节点
				 var textNode = document.createTextNode(arr[i]);
				 op.appendChild(textNode);
				 document.getElementById("p").appendChild(op);
			 }
		 }
		 
		 /*
		 	第二件事情：给<select name="province">添加改变监听器
		 	使用选择的省份名称请求CityServlet 得到<province>元素xml元素
		 	获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即是名称
		 	使用每个市名创建<option》元素添加到<select name="city">
		 */
		 var pro = document.getElementById("p");
		 pro.onchange = function(){
			 var xmlHttp=createXMLHttpRequest();
			 xmlHttp.open("post","<c:url value='/city'/>",true);
			 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			 xmlHttp.send("pname="+pro.value);//将下拉列表中选择的省份发送到服务器中
			 xmlHttp.onreadystatechange = function(){
				 if(xmlHttp.readyState ==4&&xmlHttp.status ==200){
					 //得到一个xml响应
					 var doc = xmlHttp.responseXML;
					 //得到所有名为city的元素
					  
					 var cityE = doc.getElementsByTagName("city");
					 
					 /*
					 	因为每次都会累加，所以每次都必须都要清空city元素中的东西
					 */
					 /*-------------------*/
					 
					 var citySelect = document.getElementById("c");
					 
					 //获取所有元素
					 
					 var optionE = citySelect.getElementsByTagName("option");
					 //循环遍历每个元素，然后一处每次的第二个
					
					 
					 while(optionE.length>1){
						 citySelect.removeChild(optionE[0]);
					 }
					 /*-------------------*/
					 
					 for(var i=0;i<cityE.length;i++){
						
						
						 
						 var cityEle = cityE[i];
						
						 //alert(cityEle.text);
						 var cityName;
						 
						 if(window.addEventListener){//处理浏览器的差异
							 cityName = cityEle.textContent;//支持火狐等浏览器
							 //alert("chorm");
						 }else{
							 //alert("IE");
							 cityName = cityEle.text;//支持IE
							
						 }
						 //使用市名创建option 元素 添加到city》元素中
						 var op = document.createElement("option");
						 op.value=cityName;
						//创建文本节点
						var textNode = document.createTextNode(cityName);
						
						op.appendChild(textNode);//把文本节点追加到op元素中
						//把op元素添加到<select>中
						var citySelect = document.getElementById("c");
						citySelect.appendChild(op);
						
					 }
					 
					 
				 }
			 }
		 };
		 
	 };
	 
 };
  	
  </script>
  <body>
  <h1>省</h1>
  <select name="province" id="p">
  	<option>==请选择省份==</option>
  </select>
  <br/>
  <select name="city" id="c">
  	<option>==请选择市==</option>
  </select>
  </body>