<body><!-- 支持多選的列表框 -->
<select name="first" id="first"
style="width:80px" size="3" multiple="multiple">
<option value="1" selected="selected">中國</option>
<option value="2">美國</option>
<option value="3">日本</option>
</select>
<!-- 用於發送Ajax請求的按鈕 -->
<input type="button" value="發送" onClick="send();" />
<!-- 被級聯改變的列表框 -->
<select name="second" id="second" style="width:100px" size="5" />
</select>
<script type="text/javascript">
//保存XMLHttpRequest對象的變量
var xmlrequest;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
//DOM 2瀏覽器
xmlrequest = new XMLHttpRequest();
}
// IE瀏覽器
else if (window.ActiveXObject)
{
try
{
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
}
//定義創建XML文檔的函數
function createXML()
{
//開始創建XML文檔，countrys是根元素
var xml = "<countrys>" ;
//獲取first元素的，並獲取起所有的子節點（選項）
var options = document.getElementById("first").childNodes;
var option = null ;
//遍歷國家下拉列表的所有選項
for (var i = 0 ; i < options.length; i ++)
{
option = options[i];
//如果某個選項被選中
if (option.selected)
{
//在countrys的根節點下增加一個country的子節點
xml = xml + "<country>" + option.value + "<\/country>";
}
}
//結束XML文檔的根節點
xml = xml + "<\/countrys>" ;
//返回XML文檔
return xml;
}
//定義發送XML請求的函數
function send()
{
createXMLHttpRequest();
//定義請求發送的URL
var uri = "second.jsp";
//打開與服務器連接
xmlrequest.open("POST", uri, true);
//設置請求頭
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
//指定當XMLHttpRequest對象狀態發生改變時觸發processResponse函數
xmlrequest.onreadystatechange = processResponse;
//發送XML請求
xmlrequest.send(createXML());
}
//處理服務器響應
function processResponse()
{
if(xmlrequest.readyState == 4)
{
if(xmlrequest.status == 200)
{
//獲取服務器響應字符串，並以$作爲分隔符分割成多個字符串
var cityList = xmlrequest.responseText.split("$");
var displaySelect = document.getElementById("second");
//清空second下拉列表的選項
displaySelect.innerHTML = null;
for (var i = 0 ; i < cityList.length ; i++)
{
//依次創建多個option元素
option = document.createElement("option");
option.innerHTML = cityList[i];
//將創建的option元素添加到下拉列表最後
displaySelect.appendChild(option);
}
}
}
}
</script>
</body>second.jsp
<%@ page contentType="text/html; charset=GBK" language="java" %>
<%@ page import="java.io.*,org.dom4j.*,org.dom4j.io.XPPReader,java.util.*"%>
<%
//定義一個StringBuffer對象，用於接收請求參數
StringBuffer xmlBuffer = new StringBuffer();
String line = null;
//通過request對象獲取輸入流
BufferedReader reader = request.getReader();
//依次讀取請求輸入流的數據
while((line = reader.readLine()) != null )
{
xmlBuffer.append(line);
}
//將從輸入流中讀取到的內容轉換爲字符串
String xml = xmlBuffer.toString();
//以Dom4J開始解析XML字串串
Document xmlDoc = new XPPReader().read(
new ByteArrayInputStream(xml.getBytes()));
//獲得countrys節點的所有子節點
List countryList = xmlDoc.getRootElement().elements();
//定義服務器響應的結果
String result = "";
//遍歷countrys節點的所有子節點
for(Iterator it = countryList.iterator(); it.hasNext();)
{
Element country = (Element)it.next();
//如果發送的該節點的值爲1，表明選中了中國
if (country.getText().equals("1"))
{
result += "上海$廣州$北京";
}
//如果發送的該節點的值爲1，表明選中了美國
else if(country.getText().equals("2"))
{
result += "$華盛頓$紐約$加洲";
}
//如果發送的該節點的值爲1，表明選中了日本
else if(country.getText().equals("3"))
{
result += "$東京$大板$福岡";
}
}
//向客戶端發送響應
out.println(result);
%>