JQuery实现AJAX异步请求实现省市联动（数据传输格式为xml）

AJAX的响应的数据格式：

　　文本，一段HTML的数据，XML，JSON。

使用工具生成xml的文件：

　　通常使用XStream工具，将集合，数组，对象转化成XML格式。

　　　　步骤一：导入XStream工具包：xpp3_min-1.1.4c.jar；xstream-1.4.4.jar;

　　　　步骤二：XStream的使用：

            List<City> list = ps.searchCityByPid(pid);
            XStream xStream =  new XStream();//创建XStream对象
            xStream.alias("city", City.class);//设置将对象的全路径替换为你指定的字符串
            //如果不做下面的设置，那么转换为xml后，对象和对象成员变量的关系如同xml中父标签和子标签的关系；
            //如下设置为转换为xml后，对象和对象成员变量的关系如果xml中一个标签中有多个属性的关系；
            //xStream.useAttributeFor(City.class, "cname");//设置对象目标成员变量转换后为xml中标签属性。
            //xStream.useAttributeFor(City.class, "cid");
            String xmlStr = xStream.toXML(list);
            //这里设置为text/xml;那么前端页面回响的数据类型就为[object XMLDocument]
            //倘若这里设置为text/html,那么前端就是html标签即字符串
            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().print(xmlStr);

在客户端解析xml文件：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>Hello Miss Dang</title>
 5 </head>
 6 <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $("#province").change(function(){
10             var pid = $(this).val();
11             $.post("${pageContext.request.contextPath}/CitysServlet",{"pid":pid},function(data){
12                 alert(data);
13                 $("#city").html("<option>-请选择市-</option>");
14                 $(data).find("city").each(function(){
15                     var cid = $(this).children("cid").text();
16                     var cname = $(this).children("cname").text();
17                     $("#city").append("<option value = '"+cid+"'>"+cname+"</option>");
18                 });
19             });
20         });
21     });
22     
23 </script>
24 <body>
25     <form>
26         <select id="province">
27             <option>-请选择省-</option>
28             <c:forEach var="i" items="${ list }">
29                 <option value="${ i.pid }">${ i.pname }</option>
30             </c:forEach>
31         </select>
32         <select id = "city">
33             
34         </select>
35     </form>
36 </body>
37 </html>