<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基於XML的二級菜單聯動</title>
</head>
<body>
<select id="province">
<option>選擇省份</option>
<option>安徽省</option>
<option>江蘇省</option>
<option>廣東省</option>
<option>四川省</option>
</select>
<select id="city">
<option>選擇城市</option>
</select>
<script type="text/javascript">
//對省份綁定改變事件
document.getElementById("province").onchange = function(){
//獲取時將城市獲取進行清空一次
//獲取city節點
var selectElement = document.getElementById("city");
var index = selectElement.length;
//保留第一個選項
if(index>0){
for(var i=index-1;i>0;i--){
//刪除之前的節點
selectElement.removeChild(selectElement.options[i]);
}
}
//創建AJAX引擎
var xhr = createAjax();
//設置請求方式
method = "POST";
//請求路徑
url = " ${pageContext.request.contextPath}/XmlProcinceCityServlet?time="+new Date().getTime();
//獲取當前選擇的內容
var province = this[this.selectedIndex].value;
var content = "province="+province;
xhr.open(method,url);
//設置瀏覽器自動編碼
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(content);
//獲取服務器的響應
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//獲取服務器返回的XML
var xmlString = xhr.responseXML;
//解析XML文檔
//獲取city節點
var cityElement = xmlString.getElementsByTagName("city");
var size = cityElement.length;
for(var i=0;i<size;i++){
//獲取節點的內容
var value = cityElement[i].firstChild.nodeValue;
//創建option節點
var optionElement = document.createElement("option");
//爲節點設置值
optionElement.innerHTML = value;
//獲取城市下拉
var selectElement = document.getElementById("city");
//添加節點
selectElement.appendChild(optionElement);
}
}
}
}
}
//創建AJAX引擎對象
function createAjax(){
var xhr = null;
try {
//針對IE
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e) {
try {
//針對非IE
xhr = new XMLHttpRequest();
} catch (e) {
alert("請使用支持AJAX主流瀏覽器.");
}
}
return xhr;
}
</script>
</body>
</html>
Serlvet內容如下：
<span style="white-space:pre"> </span>
