XMLHttpResquest之用xml作返回值

<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);
%>
效果如圖:點第一個顯示第一個的,點第二個顯示第二個的






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章