使用Ajax與後臺服務器進行交互時，返回的數據並不是都是文本類型，也有xml類型、Jason類型等。
本篇文章主要講解對返回的xml類型數據進行解析。
示例解析：
我們要做到示例是，有兩個下拉選框，第一個下拉框是省份，第二個是所選省下相對應的市。當省份改變時，相對應的市也應改變。例如，當選擇廣東省時，地區項應包括：廣州、深圳、佛山、汕頭。
示例圖示：
源代碼：
jsp頁面文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'select.jsp' starting page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
<!--
var xmlHttp;
function createXmlHttp() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function updateSelect() {
var selected = document.getElementById("slt1").value;
createXmlHttp();
xmlHttp.onreadystatechange = processor;
var url = "createXml?selected=" + selected;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}
function processor() {
var result;
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//注意此處是xmlHttp.responseXML而不是xmlHttp.responseText
//獲取節點名爲city的所有節點
result = xmlHttp.responseXML.getElementsByTagName("city");
var slt2 = document.getElementById("slt2");
//將二級下拉框中的所有選項清空
while(slt2.options.length>0) {
slt2.removeChild(slt2.childNodes[0]);
}
//根據返回節點數目構造下拉選項
for(var i=0; i<result.length; i++) {
var option = document.createElement("option");
//根據節點名稱獲取城市名稱，並賦值
option.text = result[i].getElementsByTagName("cityname")[0].firstChild.nodeValue;
//根據節點名稱獲取城市值，並賦值
option.value = result[i].getElementsByTagName("cityvalue")[0].firstChild.nodeValue;
//千萬不要忘記將該節點加入到下拉框父節點中
slt2.options.add(option);
}
}
}
}
-->
</script>
</head>
<body>
<form>
省份：
<select id="slt1" onChange="updateSelect()">
<option value="1">河南省</option>
<option value="2">廣東省</option>
</select>
地區：
<select id="slt2">
<option>請選擇地方</option>
<option value="1">濮陽</option>
<option value="2">安陽</option>
<option value="3">南陽</option>
<option value="4">鄭州</option>
</select>
</form>
</body>
</html>
Servlet源代碼：
package com.zyh.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CreateXml extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//這裏一定要設置爲xml類型的文件，而不是text/html
response.setContentType("text/xml;charset=utf-8");
response.setCharacterEncoding("utf-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
out.println("<response>");
if(selected.equals("1")) {
out.println("<city>");
out.println("<cityname>濮陽</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>安陽</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>南陽</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>鄭州</cityname>");
out.println("<cityvalue>4</cityvalue>");
out.println("</city>");
} else {
out.println("<city>");
out.println("<cityname>廣州</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>深圳</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>佛山</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>汕頭</cityname>");
out.println("<cityvalue>4</cityvalue>");
out.println("</city>");
}
out.println("</response>");
out.flush();
out.close();
}
}
