XML解析实现AJAX省市联动
AJAX
Asynchronous JavaScript And XML 异步JavaScript和XML
浏览器是把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器，实现局部刷新效果。
Ajax简要使用步骤
1.得到XMLHttpRequest：
<script type="text/javascript">
var httpRequest;
if(window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
2.打开与服务器的连接
xmlHttp.open( )：
>请求方式：GET/POST
>请求的URL：指定服务器资源，提交的地址
>请求是否异步：true发送异步请求，否则为同步请求
xmlHttp.open("GET", "/xxx/xxServlet", true);
3.发送请求
xmlHttp.send(null)
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //POST
>参数：就是请求体的内容，如果是GET则必须给出null，否则可能部分浏览器无法发送
如果发送请求时需要带有参数，一般都用POST请求xmlHttp.send (key=value&key=value)
4.注册监听器：onreadystatechange
xmlHttp对象一共有5个状态：
>0：刚创建，未调用open()方法
>1：请求开始，调用了open()，未调用send()
>2：调完send()
>3：服务器开始响应，不代表结束
>4：服务器响应结束
得到xmlHttp对象的状态：
var state = xnlHttp.readyState;/0,1,2,3,4
得到服务器响应的状态：
var status = xmlHttp.status //200,404,500…
得到服务器响应的内容：
var content = xmlHttp.responseText;//得到服务器文本格式的内容
var content = xmlHttp.responseXML;//得到服务器xml格式响应，是Document对象
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readystate ==4 && xmlHttp.status== 200) {
var text = xmlHttp.responseText;
}
}
XML
Extensiable markup language 可扩展标记语言
>可扩展：标签可自定义
>版本：1.0 1.1 一般使用1.0 (1.1不可向下兼容)
>用途：主要为了存储数据
>应用：不同系统间数据传输 表示有关系的数据 配置文件
XML文档声明
<?xml version="1.0" encoding="UTF-8"?>
XML的解析方式
>DOM：树形结构，方便增删改，文件过大易造成内存溢出。
>SAX：事件驱动，从上到下，边读边解析，实现查询，不可增删改。
SAX与DOM解析器：JAXP DOM4J(开发多) JDOM
省市联动
个人实现思路
province.Jsp在加载时，请求ProvinceServlet，对存有省市数据的XML使用DOM4J解析得到各个省名，用逗号拼接返回至JSP，
JSP对返回的字符串分片得到省名列表，遍历列表依次创建元素(option)添加至省的选择框(select),完成省名的加载后，
根据使用者的选择，JSP根据省份对应的value请求CityServlet，解析XML通过XPATH得到value对应的省份信息，以XML格式返回至JSP，最后根据(City标签)得到对应的值，添加至城市的select。
由于每选择一次省名，城市的选项中会添加该省对应的城市，所以在得到城市名之前删除之前生成的结点。
ProvinceServlet
@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
try {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
SAXReader saxReader = new SAXReader();
Document document = saxReader.read("C:\\Users\\MajorTom\\IdeaProjects\\TomcatServlet\\web\\province.xml");
List<Attribute> nodes = document.selectNodes("//Province/@Name");
StringBuilder provinces = new StringBuilder();
for (int i = 0; i < nodes.size(); i++) {
provinces.append(nodes.get(i).getValue());
System.out.println(nodes.get(i).getValue());
if (i < nodes.size() - 1) {
provinces.append(",");
}
}
resp.getWriter().write(String.valueOf(provinces));
} catch (Exception e) {
e.printStackTrace();
}
}
}
CityServlet
@WebServlet("/cityServlet")
public class CityServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/xml;charset=UTF-8");
try {
SAXReader saxReader = new SAXReader();
Document document = saxReader.read("C:\\Users\\MajorTom\\IdeaProjects\\TomcatServlet\\web\\province.xml");
String pname = req.getParameter("pname");
Element pro = (Element) document.selectSingleNode("//Province[@Name='" + pname + "']");
String proEle = pro.asXML();
resp.getWriter().write(proEle);
} catch (Exception e) {
e.printStackTrace();
}
}
province.Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AjaxTest</title>
<script type="text/javascript">
window.onload = function () {
var xmlHttp;
if (window.XMLHttpRequest) {//浏览器兼容
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", "/provinceServlet", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {//状态判断
var text = xmlHttp.responseText;
var arr = text.split(",");//分隔得到各省名
for (var i = 0; i < arr.length; i++) {
var optionElement = document.createElement("option");//创建标签
optionElement.value = arr[i];//标签值
var node = document.createTextNode(arr[i]);//创建文本
optionElement.appendChild(node);//标签添加文本
document.getElementById("p").appendChild(optionElement);//添加至省份select
}
}
}
var proSelect = document.getElementById("p");//省份select
proSelect.onchange = function () {//省份改变监听
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("POST", "/cityServlet", true);
xmlHttp.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("pname=" + proSelect.value);//下拉列表值
xmlHttp.onreadystatechange = function () {
if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
var citySelect = document.getElementById("c");//城市select
var optionEleList = citySelect.getElementsByTagName("option");//城市option
while (optionEleList.length > 1) {
citySelect.removeChild(optionEleList[1]);//更改省份时移除之前添加的option
}
var doc = xmlHttp.responseXML;//得到CityServlet传值
var cityEleList = doc.getElementsByTagName("City");//得到city元素列表
for (var i = 0; i < cityEleList.length; i++) {
var cityELe = cityEleList[i];//得到单个元素
var cityName;
if (window.addEventListener) {//浏览器兼容
cityName = cityELe.textContent;
} else {
cityName = cityELe.text;
}
var option = document.createElement("option");
option.value = cityName;
var text = document.createTextNode(cityName);
option.appendChild(text);
document.getElementById("c").appendChild(option);
}
}
}
}
}
</script>
</head>
<body>
<h1>TestAjax</h1>
<select name="province" id="p">
<option>===请选择省份===</option>
</select>
<select name="city" id="c">
<option>===请选择城市===</option>
</select>
</body>
</html>
XML文件及效果
