下面贴出代码： 1.jsp页面，为方便观看，js文件直接写入jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
My JSP 'responseXML.jsp' starting page
<script type="text/java script">
window.onload = function() {
var data = false;
var xhr = createXmlHttpRequest();
//请求服务端的一个servlet，该servlet可以读取xml文件，并将结果作为字符串返回。
xhr.open("get","${pageContext.request.contextPath}/servlet/ResponseXMLServlet time="+new Date().getTime());
xhr.send(null);//由于是get请求所以发送数据为空
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200 || xhr.status == 304)
{
var xmlData = xhr.responseXML;//读取服务端返回的数据,是一个Object对象类型
//获取xmlData对象中所有的省份并添加到对应select节点里
var provinces = xmlData.getElementsByTagName("province");
for(var i = 0; i < provinces.length; i++)
{
//alert(provinces[i].getAttribute("name"));//取出xml文件中每个province节点的name属性值
var optionElement = document.createElement("option");//创建option节点
optionElement.setAttribute("value",provinces[i].getAttribute("name"));//设置option节点的value属性值
optionElement.innerText = provinces[i].getAttribute("name");//设置option标签的内部文本
document.getElementById("province").appendChild(optionElement);//加到select节点下
}
data = xmlData;//将服务端返回的数据赋值给全局变量data
}
}
}
document.getElementById("province").onchange = function()//为选择省份的select标签添加事件
{
//获取当前选择的省份
var province = document.getElementById("province").value;
//从xml数据中获取该省份下城市
var provinceElements = data.getElementsByTagName("province");
for(var i = 0; i < provinceElements.length; i++)
{
if(provinceElements[i].getAttribute("name") == province)
{
var cityElements = provinceElements[i].getElementsByTagName("city");
clearCitys();
for(var j = 0; j < cityElements.length;j++)
{
var optionElement = document.createElement("option");//生成option节点
optionElement.setAttribute("value",cityElements[j].firstChild.nodeva lue);
optionElement.innerText = cityElements[j].firstChild.nodeva lue;
document.getElementById("city").appendChild(optionElement);
}
}
}
}
}
function clearCitys(){ //清空城市信息
var city = document.getElementById('city');
city.options.length = 0;
city.options[0] = new Option('请选择城市...', 'null_city');
}
function createXmlHttpRequest() {//创建XMLHttpRequest对象
var xmlHttp;
try { //Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try { //Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
获取xml文件信息并返回的servlet：
注：这里使用了dom4j读取一个xml文件（需要导入jar包）,其实也可以用javaI/O,因为这个servlet只用读取文件并不用解析。
package cn.edu.chd.web;
import java.io.File;
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;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
public class ResponseXMLServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
resp.setCharacterEncoding("utf-8");
// 告诉浏览器接收的是xml数据
resp.setContentType("application/xml;charset=utf-8");
PrintWriter writer = resp.getWriter();
// 获取代表省份和城市信息的xml文件
String realPath = this.getServletContext().getRealPath("/data/data.xml");
SAXReader reader = null;
try
{
reader = new SAXReader();
Document doc = reader.read(new File(realPath));
writer.println(doc.asXML());//将文档对象作为字符串返回
} catch (DocumentException e)
{
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doGet(req, resp);
}
}
保存省份与城市的xml：
长春 吉林市 通化 四平 安庆 芜湖 合肥 六安 南京 无锡 镇江 连云港 青岛 烟台 济南 威海
package cn.edu.chd.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HandFormServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String province = req.getParameter("province");
String city = req.getParameter("city");
System.out.println("province = "+province+",city = "+city);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doGet(req, resp);
}
}