阅读完需：约 5 分钟
这个是Ajax与xml的数据交互！
jsp页面：
<body>
<h1>省市联动</h1>
<select name="province" id="p">
<option>===请选择省===</option>
</select>
<select name="city" id="c">
<option>===请选择市===</option>
</select>
</body>jsp里的常规第一步：
function createXMLHttpRequest(){
try {
return new XMLHttpRequest();//大多数游览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5以及更早
} catch (e) {
alert("错误");
throw e;
}
}
}
}第一件事情：
//1.在文档加载完毕时得到请求，得到所有的省份显示<select name="province">
//2.在选择了新的省份时，发送请求（省份的名字）得到xml文档，即<province>元素
//解析xml文档，得到其中所有的<city>,再得到<city>元素的内容,生成<option>,插入到<select>里
window.onload=function(){
/*
ajax四步骤
*/
var xmlHttp= createXMLHttpRequest();
xmlHttp.open("GET","oop",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//获取服务器的响应
var text=xmlHttp.responseText;
//得到数组
var arr=text.split(",");
alert(arr);
//循环遍历每个省份的名称，每个名称生成一个option对象，添加<select>中
for(var i=0;i<arr.length;i++){
var op=document.createElement("option");//创建一个指定名称的元素
op.value=arr[i]; //设置op的实际值为省份
var textNode=document.createTextNode(arr[i]);//创建文本节点
op.appendChild(textNode);
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
document.getElementById("p").appendChild(op);
}
}
};
第二件事情：
给添加改变监听 使用选择省份的名字请求city，得到元素 获得元素中所有的元素，遍历之，获得每个的文本内容，即市名 使用每个市名创建元素添加到里
var pro=document.getElementById("p");
pro.onchange=function(){
var xmlHttp= createXMLHttpRequest();
xmlHttp.open("POST","city",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("pname="+pro.value);//把列表的值给服务器
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
/*
清空select中的元素
*/
var cityslect=document.getElementById("c");
//获取子元素
var option=cityslect.getElementsByTagName("option");
while(option.length>1){
cityslect.removeChild(option[1]);//总是删除第一个下标
}
var doc=xmlHttp.responseXML;
var citylist=doc.getElementsByTagName("city");
for(var i=0;i<citylist.length;i++){
var cityele=citylist[i];//得到每个city
var cityName;
//获取市的名称
if(window.addEventListener){//识别游览器的差异
cityName=cityele.textContent;
}else{
cityName=cityele.text;//支持IE
}
//用市名称创建元素，添加到<select>
var op=document.createElement("option");
op.value=cityName;
//创建文本节点
var textNode=document.createTextNode(cityName);
op.appendChild(textNode);//把文本节点追加到op中
//把op添加到<select>中
cityslect.appendChild(op);
}
}
};
};
oop.java——servlet文件
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//省的信息
/*
* 1.得到domcunt对象
* 创建解析器
* 调用解析器，传递一个流对象，到底是domcunt
*
* */
try {
SAXReader reader=new SAXReader();
InputStream input=this.getClass().getResourceAsStream("/china.xml");
Document doc=reader.read(input);
/*
* 查询所有的province的name属性，得到一堆字符串
* 遍历循环，把所有的属性连接成一共字符串，发送给客户端
*
* */
List <Attribute> arrList=doc.selectNodes("//province/@name");
StringBuilder sb=new StringBuilder();
for(int i=0;i<arrList.size();i++){
sb.append(arrList.get(i).getValue());//把每个属性的值放在sb中
if(i<arrList.size()-1){
sb.append(",");
}
}
response.getWriter().print(sb);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
city.java——servlet文件
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
/*
* 获取省份名称，加载该省对应的<province>元素
* 把元素转化成字符串发送给客户端
*
* 获取省份的名称
* 使用省份名称查找对应的<provice>元素
* 把<provice>元素转换成字符串，发送！
*
* */
try {
SAXReader reader=new SAXReader();
InputStream inputStream=this.getClass().getResourceAsStream("/china." +
"xml");
Document document=reader.read(inputStream);
String pname=request.getParameter("pname");
Element pElement=(Element) document.selectSingleNode("//province[@name='"+pname+"']");
String xmlString=pElement.asXML();//把元素转换成字符串
//如Document 对象的document.asXML()就是将整个文件组成一个String了,
//而Element对象的element.asXML();指的是这个节点(元素)的开始到结束包含的内容组成String
response.getWriter().print(xmlString);
} catch (Exception e) {
throw new RuntimeException(e);
}
}最后是xml数据的配置
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="北京">
<city>东城区</city>
<city>西城区</city>
<city>南城区</city>
<city>北城区</city>
<city>房山区</city>
<city>平谷区</city>
<city>通州区</city>
<city>阿瑟区</city>
<city>掉风区</city>
<city>身份区</city>
<city>分割区</city>
<city>考恐区</city>
</province>
<province name="天津">
<city>和平区</city>
<city>汉沽区</city>
<city>北城区</city>
<city>境内区</city>
<city>大纲区</city>
<city>河东区</city>
<city>动力区</city>
<city>虹桥区</city>
<city>阿萨区</city>
<city>发广区</city>
<city>乱伦区</city>
<city>品牌区</city>
</province>
</china>运行结果：
