省市聯動
1、頁面
    <select name="province">
        <option>選擇省份</option>
    </select>
    <select name="city">
        <option>選擇城市</option>
    </select>

2、Servlet
    ProvinceServlet:當頁面載入完畢後馬上請求這個Servlet
        需要載入china.xml檔案，把所有的省的名稱使用字串傳送給客戶端
3、頁面的工作
    獲取這個字串，使用逗號分隔，得到陣列
    迴圈遍歷每個字串（省份的名稱），使用每個字串建立一個<option>新增到<select name="province">這個元素中

4、CityServlet
    CityServlet：當頁面選擇某個省時，傳送請求
    得到省份的名稱，載入china.xml檔案，查詢出該省份對應的元素物件。把這個元素轉換成xml字串，傳送給客戶端

5、頁面的工作
    把<select name="city">中所有子元素刪除，但不要刪除<option>選擇城市</option>
    得到伺服器的響應結果：doc
    獲取所有的<city>子元素，迴圈遍歷，得到<city>的內容
    使用每個<city>的內容建立一個<option>元素，新增到<select name="city">
 

public class CityServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/xml;charset=utf-8");// 傳送xml時這裡要修改
        /*
         * 獲取省份名稱，載入該省對應的<province>元素 把元素轉換成字串傳送給客戶端
         */
        /*
         * 1、獲取省份名稱 2、使用省份名稱查詢到對應的<province>元素 3、把<province>元素轉換成字串，傳送
         */
        try {
            /*
             * 得到Document物件
             */
            SAXReader reader = new SAXReader();
            InputStream input = this.getClass().getResourceAsStream(
                    "/china.xml");
            Document doc = reader.read(input);
            /*
             * 獲取引數
             */
            String pname = request.getParameter("pname");// 獲取省份名稱
            Element proEle = (Element) doc
                    .selectSingleNode("//province[@name='" + pname + "']");// province[@name='a']
            String xmlStr = proEle.asXML();// 把元素轉換成字串
            response.getWriter().print(xmlStr);
        } catch (DocumentException e) {
            throw new RuntimeException(e);
        }
    }

}
 

public class ProvinceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @SuppressWarnings("unchecked")
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        /*
         * 響應所有省份名稱，使用逗號分隔
         */
        /*
         * 1、得到Document物件 建立解析器物件 呼叫解析器的讀方法，傳遞一個流物件，得到Document
         */
        try {
            SAXReader reader = new SAXReader();
            InputStream input = this.getClass().getResourceAsStream(
                    "/china.xml");
            Document doc = reader.read(input);
            /*
             * 查詢所有province的name屬性，得到一堆的屬性物件 迴圈遍歷，把所有的屬性值連線成一個字串，傳送給客戶端
             */
            List<Attribute> arrList = doc.selectNodes("//province/@name");// xpath查詢
                                                                          // [//]沒有深度查詢province
                                                                          // 查詢它的name屬性
            StringBuilder sb = new StringBuilder();
            for (int i = 0; i < arrList.size(); i++) {
                sb.append(arrList.get(i).getValue());// 把每個屬性的值存放到sb中
                if (i < arrList.size() - 1) {
                    sb.append(",");
                }
            }
            response.getWriter().print(sb);
        } catch (DocumentException e) {
            throw new RuntimeException(e);
        }
    }

}
 

 .jsp

<script type="text/javascript">
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();//大多數瀏覽器
		} catch (e) {
			try {
				return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
			} catch (e) {
				try {
					return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
				} catch (e) {
					alert("什麼瀏覽器？");
					throw e;
				}
			}
		}
	}
	/*
	 1、在文件載入完畢時傳送請求，得到所有省份名稱，顯示在<select name="province"/>中
	 2、在選擇了新的省份時，傳送請求(引數為省名稱)，得到xml文件，即<province>元素
	 解析xml文件，得到其中所有的<city>,再得到每個<city>元素的內容，即市名，使用市名生成<option>，插入到<select name="city">元素中
	 */
	window.onload = function() {
		/*
		    ajax四步，請求ProvinceServlet,得到所有省份名稱
		    使用每個省份名稱建立一個<option>元素，新增到<select name="province">中
		 */
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);
		xmlHttp.send(null);
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//獲取伺服器響應
				var text = xmlHttp.responseText;
				//使用逗號分隔，得到陣列
				var arr = text.split(",");
				//迴圈遍歷每個省份名稱，每個名稱生成一個option物件，新增到<select>中
				for (var i = 0; i < arr.length; i++) {
					var op = document.createElement("option");//建立一個指定名稱的元素
					op.value = arr[i];//設定op的實際值為當前的省份名稱
					var textNode = document.createTextNode(arr[i]);//建立文字節點
					op.appendChild(textNode);//把文字子節點新增到op元素中，指定其顯示值

					document.getElementById("p").appendChild(op);
				}
			}
		};
		/*
		    給<select name="province">新增改變監聽
		    使用選擇的省份名稱請求CityServlet，得到<province>元素（xml元素）
		    獲取<province>元素中所有的<city>元素，遍歷之。獲取每個<city>的文字內容，即市名稱
		    使用每個市名稱建立<option>元素新增到<select name="city">
		 */
		var proSelect = document.getElementById("p");
		proSelect.onchange = function() {
			var xmlHttp = createXMLHttpRequest();
			xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);
			xmlHttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			xmlHttp.send("pname=" + proSelect.value); //把下拉列表中選擇的值傳送給伺服器 
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					/*
					    把select中的所有option移除（除了第一個）
					 */
					var citySelect = document.getElementById("c");
					//獲取其所有子元素
					var optionEleList = citySelect
							.getElementsByTagName("option");
					//迴圈遍歷每個option元素，然後在citySelect中移除
					while (optionEleList.length > 1) {//子元素的個數如果大於就迴圈，等於1就不迴圈
						citySelect.removeChild(optionEleList[1]);//總是刪除1下標，因為1刪除了，2就變成1了
					}
					var doc = xmlHttp.responseXML;
					//得到所有名為city的元素
					var cityEleList = doc.getElementsByTagName("item");
					//迴圈遍歷每個city元素
					for (var i = 0; i < cityEleList.length; i++) {
						var cityEle = cityEleList[i];//得到每個city元素
						var cityName;
						if (window.addEventListener) {//處理瀏覽器的差異
							cityName = cityEle.textContent;//支援FireFox等瀏覽器
						} else {
							cityName = cityEle.text;//支援老版IE
						}
						//使用市名稱建立option元素.新增到<select name ="city">中
						var op = document.createElement("option");
						op.value = cityName;
						//建立文字節點
						var textNode = document.createTextNode(cityName);
						op.appendChild(textNode);//把文字節點追加到op元素中
						//把op新增到<select>元素中

						citySelect.appendChild(op);
					}
				}
			};
		};
	};
</script>
</head>

<body>
	<h1>省市聯動</h1>
	<select name="province" id="p">
		<option>選擇省</option>
	</select>

	<select name="item" ID="c">
		<option>選擇市</option>
	</select>
</body>

china.xml 

<?xml version="1.0" encoding="utf-8"?>
        <china>
            <province name="北京">
                <item>東城區</item>
                <item>西城區</item>
                <item>崇文區</item>
                <item>宣武區</item>
                <item>朝陽區</item>
                <item>豐臺區</item>
                <item>石景山區</item>
                <item>海淀區</item>
                <item>門頭溝區</item>
                <item>房山區</item>
                <item>通州區</item>
                <item>順義區</item>
                <item>昌平區</item>
                <item>大興區</item>
                <item>懷柔區</item>
                <item>平谷區</item>
                <item>密雲縣</item>
                <item>延慶縣</item>
            </province>
            <province name="天津">
                <item>和平區</item>
                <item>河東區</item>
                <item>河西區</item>
                <item>南開區</item>
                <item>河北區</item>
                <item>紅橋區</item>
                <item>塘沽區</item>
                <item>漢沽區</item>
                <item>大港區</item>
                <item>東麗區</item>
                <item>西青區</item>
                <item>津南區</item>
                <item>北辰區</item>
                <item>武清區</item>
                <item>寶坻區</item>
                <item>寧河縣</item>
                <item>靜海縣</item>
                <item>薊縣</item>
            </province>
            <province name="河北">
                <item>石家莊</item>
                <item>唐山</item>
                <item>秦皇島</item>
                <item>邯鄲</item>
                <item>邢臺</item>
                <item>保定</item>
                <item>張家口</item>
                <item>承德</item>
                <item>滄州</item>
                <item>廊坊</item>
                <item>衡水</item>
            </province>
            <province name="山西">
                <item>太原</item>
                <item>大同</item>
                <item>陽泉</item>
                <item>長治</item>
                <item>晉城</item>
                <item>朔州</item>
                <item>晉中</item>
                <item>運城</item>
                <item>忻州</item>
                <item>臨汾</item>
                <item>呂梁</item>
            </province>
            <province name="內蒙古">
                <item>呼和浩特</item>
                <item>包頭</item>
                <item>烏海</item>
                <item>赤峰</item>
                <item>通遼</item>
                <item>鄂爾多斯</item>
                <item>呼倫貝爾</item>
                <item>巴彥淖爾</item>
                <item>烏蘭察布</item>
                <item>興安盟</item>
                <item>錫林郭勒盟</item>
                <item>阿拉善盟</item>
            </province>
            <province name="遼寧">
                <item>瀋陽</item>
                <item>大連</item>
                <item>鞍山</item>
                <item>撫順</item>
                <item>本溪</item>
                <item>丹東</item>
                <item>錦州</item>
                <item>營口</item>
                <item>阜新</item>
                <item>遼陽</item>
                <item>盤錦</item>
                <item>鐵嶺</item>
                <item>朝陽</item>
                <item>葫蘆島</item>
            </province>
            <province name="吉林">
                <item>長春</item>
                <item>吉林</item>
                <item>四平</item>
                <item>遼源</item>
                <item>通化</item>
                <item>白山</item>
                <item>松原</item>
                <item>白城</item>
                <item>延邊</item>
            </province>
            <province name="黑龍江">
                <item>哈爾濱</item>
                <item>齊齊哈爾</item>
                <item>雞西</item>
                <item>鶴崗</item>
                <item>雙鴨山</item>
                <item>大慶</item>
                <item>伊春</item>
                <item>佳木斯</item>
                <item>七臺河</item>
                <item>牡丹江</item>
                <item>黑河</item>
                <item>綏化</item>
                <item>大興安嶺</item>
            </province>
            <province name="上海">
                <item>黃浦區</item>
                <item>盧灣區</item>
                <item>徐彙區</item>
                <item>長寧區</item>
                <item>靜安區</item>
                <item>普陀區</item>
                <item>閘北區</item>
                <item>虹口區</item>
                <item>楊浦區</item>
                <item>閔行區</item>
                <item>寶山區</item>
                <item>嘉定區</item>
                <item>浦東新區</item>
                <item>金山區</item>
                <item>松江區</item>
                <item>青浦區</item>
                <item>南匯區</item>
                <item>奉賢區</item>
                <item>崇明縣</item>
            </province>
            <province name="江蘇">
                <item>南京</item>
                <item>無錫</item>
                <item>徐州</item>
                <item>常州</item>
                <item>蘇州</item>
                <item>南通</item>
                <item>連雲港</item>
                <item>淮安</item>
                <item>鹽城</item>
                <item>揚州</item>
                <item>鎮江</item>
                <item>泰州</item>
                <item>宿遷</item>
            </province>
            <province name="浙江">
                <item>杭州</item>
                <item>寧波</item>
                <item>溫州</item>
                <item>嘉興</item>
                <item>湖州</item>
                <item>紹興</item>
                <item>金華</item>
                <item>衢州</item>
                <item>舟山</item>
                <item>台州</item>
                <item>麗水</item>
            </province>
            <province name="安徽">
                <item>合肥</item>
                <item>蕪湖</item>
                <item>蚌埠</item>
                <item>淮南</item>
                <item>馬鞍山</item>
                <item>淮北</item>
                <item>銅陵</item>
                <item>安慶</item>
                <item>黃山</item>
                <item>滁州</item>
                <item>阜陽</item>
                <item>宿州</item>
                <item>巢湖</item>
                <item>六安</item>
                <item>亳州</item>
                <item>池州</item>
                <item>宣城</item>
            </province>
            <province name="福建">
                <item>福州</item>
                <item>廈門</item>
                <item>莆田</item>
                <item>三明</item>
                <item>泉州</item>
                <item>漳州</item>
                <item>南平</item>
                <item>龍巖</item>
                <item>寧德</item>
            </province>
            <province name="江西">
                <item>南昌</item>
                <item>景德鎮</item>
                <item>萍鄉</item>
                <item>九江</item>
                <item>新餘</item>
                <item>鷹潭</item>
                <item>贛州</item>
                <item>吉安</item>
                <item>宜春</item>
                <item>撫州</item>
                <item>上饒</item>
            </province>
            <province name="山東">
                <item>濟南</item>
                <item>青島</item>
                <item>淄博</item>
                <item>棗莊</item>
                <item>東營</item>
                <item>煙臺</item>
                <item>濰坊</item>
                <item>濟寧</item>
                <item>泰安</item>
                <item>威海</item>
                <item>日照</item>
                <item>萊蕪</item>
                <item>臨沂</item>
                <item>德州</item>
                <item>聊城</item>
                <item>濱州</item>
                <item>荷澤</item>
            </province>
            <province name="河南">
                <item>鄭州</item>
                <item>開封</item>
                <item>洛陽</item>
                <item>平頂山</item>
                <item>安陽</item>
                <item>鶴壁</item>
                <item>新鄉</item>
                <item>焦作</item>
                <item>濮陽</item>
                <item>許昌</item>
                <item>漯河</item>
                <item>三門峽</item>
                <item>南陽</item>
                <item>商丘</item>
                <item>信陽</item>
                <item>周口</item>
                <item>駐馬店</item>
            </province>
            <province name="湖北">
                <item>武漢</item>
                <item>黃石</item>
                <item>十堰</item>
                <item>宜昌</item>
                <item>襄樊</item>
                <item>鄂州</item>
                <item>荊門</item>
                <item>孝感</item>
                <item>荊州</item>
                <item>黃岡</item>
                <item>咸寧</item>
                <item>隨州</item>
                <item>恩施</item>
                <item>神農架</item>
            </province>
            <province name="湖南">
                <item>長沙</item>
                <item>株洲</item>
                <item>湘潭</item>
                <item>衡陽</item>
                <item>邵陽</item>
                <item>岳陽</item>
                <item>常德</item>
                <item>張家界</item>
                <item>益陽</item>
                <item>郴州</item>
                <item>永州</item>
                <item>懷化</item>
                <item>婁底</item>
                <item>湘西</item>
            </province>
            <province name="廣東">
                <item>廣州</item>
                <item>韶關</item>
                <item>深圳</item>
                <item>珠海</item>
                <item>汕頭</item>
                <item>佛山</item>
                <item>江門</item>
                <item>湛江</item>
                <item>茂名</item>
                <item>肇慶</item>
                <item>惠州</item>
                <item>梅州</item>
                <item>汕尾</item>
                <item>河源</item>
                <item>陽江</item>
                <item>清遠</item>
                <item>東莞</item>
                <item>中山</item>
                <item>潮州</item>
                <item>揭陽</item>
                <item>雲浮</item>
            </province>
            <province name="廣西">
                <item>南寧</item>
                <item>柳州</item>
                <item>桂林</item>
                <item>梧州</item>
                <item>北海</item>
                <item>防城港</item>
                <item>欽州</item>
                <item>貴港</item>
                <item>玉林</item>
                <item>百色</item>
                <item>賀州</item>
                <item>河池</item>
                <item>來賓</item>
                <item>崇左</item>
            </province>
            <province name="海南">
                <item>海口</item>
                <item>三亞</item>
            </province>
            <province name="重慶">
                <item>重慶</item>
                <item>萬州區</item>
                <item>涪陵區</item>
                <item>渝中區</item>
                <item>大渡口區</item>
                <item>江北區</item>
                <item>沙坪壩區</item>
                <item>九龍坡區</item>
                <item>南岸區</item>
                <item>北碚區</item>
                <item>萬盛區</item>
                <item>雙橋區</item>
                <item>渝北區</item>
                <item>巴南區</item>
                <item>黔江區</item>
                <item>長壽區</item>
                <item>綦江縣</item>
                <item>潼南縣</item>
                <item>銅梁縣</item>
                <item>大足縣</item>
                <item>榮昌縣</item>
                <item>璧山縣</item>
                <item>梁平縣</item>
                <item>城口縣</item>
                <item>豐都縣</item>
                <item>墊江縣</item>
                <item>武隆縣</item>
                <item>忠縣</item>
                <item>開縣</item>
                <item>雲陽縣</item>
                <item>奉節縣</item>
                <item>巫山縣</item>
                <item>巫溪縣</item>
                <item>石柱土家族自治縣</item>
                <item>秀山土家族苗族自治縣</item>
                <item>酉陽土家族苗族自治縣</item>
                <item>彭水苗族土家族自治縣</item>
                <item>江津</item>
                <item>合川</item>
                <item>永川</item>
                <item>南川</item>
            </province>
            <province name="四川">
                <item>成都</item>
                <item>自貢</item>
                <item>攀枝花</item>
                <item>瀘州</item>
                <item>德陽</item>
                <item>綿陽</item>
                <item>廣元</item>
                <item>遂寧</item>
                <item>內江</item>
                <item>樂山</item>
                <item>南充</item>
                <item>眉山</item>
                <item>宜賓</item>
                <item>廣安</item>
                <item>達州</item>
                <item>雅安</item>
                <item>巴中</item>
                <item>資陽</item>
                <item>阿壩</item>
                <item>甘孜</item>
                <item>涼山</item>
            </province>
            <province name="貴州">
                <item>貴陽</item>
                <item>六盤水</item>
                <item>遵義</item>
                <item>安順</item>
                <item>銅仁</item>
                <item>黔西南</item>
                <item>畢節</item>
                <item>黔東南</item>
                <item>黔南</item>
            </province>
            <province name="雲南">
                <item>昆明</item>
                <item>曲靖</item>
                <item>玉溪</item>
                <item>保山</item>
                <item>昭通</item>
                <item>麗江</item>
                <item>思茅</item>
                <item>臨滄</item>
                <item>楚雄</item>
                <item>紅河</item>
                <item>文山</item>
                <item>西雙版納</item>
                <item>大理</item>
                <item>德巨集</item>
                <item>怒江</item>
                <item>迪慶</item>
            </province>
            <province name="西藏">
                <item>拉薩</item>
                <item>昌都</item>
                <item>山南</item>
                <item>日喀則</item>
                <item>那曲</item>
                <item>阿里</item>
                <item>林芝</item>
            </province>
            <province name="陝西">
                <item>西安</item>
                <item>銅川</item>
                <item>寶雞</item>
                <item>咸陽</item>
                <item>渭南</item>
                <item>延安</item>
                <item>漢中</item>
                <item>榆林</item>
                <item>安康</item>
                <item>商洛</item>
            </province>
            <province name="甘肅">
                <item>蘭州</item>
                <item>嘉峪關</item>
                <item>金昌</item>
                <item>白銀</item>
                <item>天水</item>
                <item>武威</item>
                <item>張掖</item>
                <item>平涼</item>
                <item>酒泉</item>
                <item>慶陽</item>
                <item>定西</item>
                <item>隴南</item>
                <item>臨夏</item>
                <item>甘南</item>
            </province>
            <province name="青海">
                <item>西寧</item>
                <item>海東</item>
                <item>海北</item>
                <item>黃南</item>
                <item>海南</item>
                <item>果洛</item>
                <item>玉樹</item>
                <item>海西</item>
            </province>
            <province name="寧夏">
                <item>銀川</item>
                <item>石嘴山</item>
                <item>吳忠</item>
                <item>固原</item>
                <item>中衛</item>
            </province>
            <province name="新疆">
                <item>烏魯木齊</item>
                <item>克拉瑪依</item>
                <item>吐魯番</item>
                <item>哈密</item>
                <item>昌吉</item>
                <item>博爾塔拉</item>
                <item>巴音郭楞</item>
                <item>阿克蘇</item>
                <item>克孜勒蘇</item>
                <item>喀什</item>
                <item>和田</item>
                <item>伊犁</item>
                <item>塔城</item>
                <item>阿勒泰</item>
                <item>石河子</item>
                <item>阿拉爾</item>
                <item>圖木舒克</item>
                <item>五家渠</item>
            </province>
            <province name="香港">
                <item>香港</item>
            </province>
            <province name="澳門">
                <item>澳門</item>
            </province>
            <province name="臺灣">
                <item>臺灣</item>
            </province>
        </china>