頁面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
alert("您的瀏覽器不支持");
throw e;
}
}
window.onload = function() {
//ajax四步，請求ProvinceServlet，得到所有的省份名稱
//使用每個省份名稱創建一個<option>元素，添加到<select name="province">中
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/Web/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的實際值爲當前的省份名稱
op.value = arr[i];
//創建文本節點
var textNode = document.createTextNode(arr[i]);
//把文本子節點添加到op元素中，指定其顯示值
op.appendChild(textNode);
document.getElementById("p").appendChild(op);
}
}
};
//給<select name="province">添加改變監聽
//使用選擇的省份名稱請求CityServlet，得到<province>元素（xml元素）
//獲取<province>元素中的所有的<city>元素，遍歷，獲取每個<city>的文本內容，即市名
//使用每個市名創建<option>元素添加到<select name="province">中
var proSelect = document.getElementById("p");
proSelect,onchange = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/Web/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就循環，等於1就不循環了！
//總是刪除1下標，因爲1刪除了，2就變成1了！
citySelect.removeChild(optionEleList[1]);
}
var doc = xmlHttp.responseXML;
// 得到所有名爲city的元素
var cityEleList = doc.getElementsByTagName("city");
// 循環遍歷每個city元素
for(var i = 0; i < cityEleList.length; i++) {
//得到每個city元素
var cityEle = cityEleList[i];
var cityName;
// 獲取市名稱
if(window.addEventListener) {//處理瀏覽器的差異
//支持FireFox等瀏覽器
cityName = cityEle.textContent;
} 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="city" id="c">
<option>==請選擇市==</option>
</select>
</body>
</html>package com.java.servlet;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.io.SAXReader;
public class ProvinceServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//相應所有省份名稱，使用逗號隔開
//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");
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
//把每個屬性的值存放到sb中
sb.append(arrList.get(i).getValue());
if(i < arrList.size()-1) {
sb.append(",");
}
}
response.getWriter().print(sb);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
CityServlet
package com.java.servlet;
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 CityServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=utf-8");
//獲取省份名稱，加載該省對應的<province>元素
//把元素轉換成字符串發送給客戶端
//
//獲取省份名稱
//使用省份名稱查找到對應的<province>元素
//把<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 + "']");
//把元素轉換成字符串
String xmlStr = proEle.asXML();
response.getWriter().print(xmlStr);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}