AJAX案例四：省市联动 

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 
  4 
  5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  6 <html>
  7   <head>
  8     <title>My JSP 'ajax5.jsp' starting page</title>
  9     
 10     <meta http-equiv="pragma" content="no-cache">
 11     <meta http-equiv="cache-control" content="no-cache">
 12     <meta http-equiv="expires" content="0">    
 13     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 14     <meta http-equiv="description" content="This is my page">
 15     <!--
 16     <link rel="stylesheet" type="text/css" href="styles.css">
 17     -->
 18 <script type="text/javascript">
 19 function createXMLHttpRequest() {
 20     try {
 21         return new XMLHttpRequest();//大多数浏览器
 22     } catch (e) {
 23         try {
 24             return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
 25         } catch (e) {
 26             try {
 27                 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
 28             } catch (e) {
 29                 alert("用的是什么浏览器啊？");
 30                 throw e;
 31             }
 32         }
 33     }
 34 }
 35 /*
 36  * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中
 37  * 2. 在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素
 38  *   解析xml文档，得到其中所有的<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中
 39  */
 40 
 41 window.onload = function() {
 42     /*
 43     ajax四步，请求ProvinceServlet，得到所有省份名称
 44     使用每个省份名称创建一个<option>元素，添加到<select name="province">中
 45     */
 46     var xmlHttp = createXMLHttpRequest();
 47     xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);
 48     xmlHttp.send(null);
 49     xmlHttp.onreadystatechange = function() {
 50         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 51             // 获取服务器的响应
 52             var text = xmlHttp.responseText;
 53             // 使用逗号分隔它，得到数组
 54             var arr = text.split(",");
 55             // 循环遍历每个省份名称，每个名称生成一个option对象，添加到<select>中
 56             for(var i = 0; i < arr.length; i++) {
 57                 var op = document.createElement("option");//创建一个指名名称元素
 58                 op.value = arr[i];//设置op的实际值为当前的省份名称
 59                 var textNode = document.createTextNode(arr[i]);//创建文本节点
 60                 op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
 61                 
 62                 document.getElementById("p").appendChild(op);
 63             }
 64         }
 65     };
 66     
 67     
 68     /*
 69     第二件事情：给<select name="province">添加改变监听
 70     使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！
 71     获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称
 72     使用每个市名称创建<option>元素添加到<select name="city">
 73     */
 74     var proSelect = document.getElementById("p");
 75     proSelect.onchange = function() {
 76         var xmlHttp = createXMLHttpRequest();
 77         xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);
 78         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 79         xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！
 80         xmlHttp.onreadystatechange = function() {
 81             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 82                 /*
 83                 把select中的所有option移除（除了请选择）
 84                 */
 85                 var citySelect = document.getElementById("c");
 86                 // 获取其所有子元素
 87                 var optionEleList = citySelect.getElementsByTagName("option");
 88                 // 循环遍历每个option元素，然后在citySelect中移除
 89                 while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
 90                     citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
 91                 }
 92                 
 93                 
 94                 var doc = xmlHttp.responseXML;
 95                 // 得到所有名为city的元素
 96                 var cityEleList = doc.getElementsByTagName("city");
 97                 // 循环遍历每个city元素
 98                 for(var i = 0; i < cityEleList.length; i++) {
 99                     var cityEle = cityEleList[i];//得到每个city元素
100                     var cityName;
101                     // 获取市名称
102                     if(window.addEventListener) {//处理浏览器的差异
103                         cityName = cityEle.textContent;//支持FireFox等浏览器
104                     } else {
105                         cityName = cityEle.text;//支持IE
106                     }
107                     
108                     // 使用市名称创建option元素，添加到<select name="city">中
109                     var op = document.createElement("option");
110                     op.value = cityName;
111                     // 创建文本节点
112                     var textNode = document.createTextNode(cityName);
113                     op.appendChild(textNode);//把文本节点追加到op元素中
114                     
115                     //把op添加到<select>元素中
116                     citySelect.appendChild(op);
117                 }
118             }
119         };        
120     };
121 };
122 </script>
123   </head>
124   
125   <body>
126 <h1>省市联动</h1>
127 <select name="province" id="p">
128   <option>===请选择省===</option>
129 </select>
130 　　　
131 <select name="city" id="c">
132   <option>===请选择市===</option>
133 </select>
134   </body>
135 </html>
index.jsp
 1 import java.io.IOException;
 2 import java.io.InputStream;
 3 
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 import org.dom4j.Document;
10 import org.dom4j.Element;
11 import org.dom4j.io.SAXReader;
12 
13 public class CityServlet extends HttpServlet {
14 
15     public void doPost(HttpServletRequest request, HttpServletResponse response)
16             throws ServletException, IOException {
17         request.setCharacterEncoding("utf-8");
18         response.setContentType("text/xml;charset=utf-8");//注意：发送xml这里要修改！！！
19         
20         /*
21          * 获取省份名称，加载该省对应的<province>元素！
22          * 把元素转换成字符串发送给客户端
23          */
24         /*
25          * 1. 获取省份的名称
26          * 2. 使用省份名称查找到对应的<province>元素
27          * 3. 把<province>元素转换成字符串，发送！
28          */
29         try {
30             /*
31              * 得到Document
32              */
33             SAXReader reader = new SAXReader();
34             InputStream input = this.getClass().getResourceAsStream("/china.xml");
35             Document doc = reader.read(input);
36             
37             /*
38              * 获取参数
39              */
40             String pname = request.getParameter("pname");//获取省份名称
41             Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']");
42             String xmlStr = proEle.asXML();//把元素转换成字符串
43             response.getWriter().print(xmlStr);
44         } catch(Exception e) {
45             throw new RuntimeException(e);
46         }
47     }
48 }
CityServlet
 1 import java.io.IOException;
 2 import java.io.InputStream;
 3 import java.util.List;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 import org.dom4j.Attribute;
11 import org.dom4j.Document;
12 import org.dom4j.io.SAXReader;
13 
14 public class ProvinceServlet extends HttpServlet {
15 
16     public void doGet(HttpServletRequest request, HttpServletResponse response)
17             throws ServletException, IOException {
18         response.setContentType("text/html;charset=utf-8");
19         /*
20          * 响应所有省份名称，使用逗号分隔！
21          */
22         /*
23          * 1. Document对象
24          *   * 创建解析器对象
25          *   * 调用解析器的读方法，传递一个流对象，得到Document
26          */
27         try {
28             SAXReader reader = new SAXReader();
29             InputStream input = this.getClass().getResourceAsStream("/china.xml");
30             Document doc = reader.read(input);
31             
32             /*
33              * 查询所有province的name属性，得到一堆的属性对象
34              * 循环遍历，把所有的属性值连接成一个字符串，发送给客户端
35              */
36             List<Attribute> arrList = doc.selectNodes("//province/@name");
37             StringBuilder sb = new StringBuilder();
38             for(int i = 0; i < arrList.size(); i++) {
39                 sb.append(arrList.get(i).getValue());//把每个属性的值存放到sb中。
40                 if(i < arrList.size() - 1) {
41                     sb.append(",");
42                 }
43             }
44             response.getWriter().print(sb);
45         } catch(Exception e) {
46             throw new RuntimeException(e);
47         }
48     }
49 }
ProvinceServlet 
  1 <?xml version="1.0" encoding="utf-8"?>
  2 <china>
  3     <province name="北京">
  4         <city>东城区</city>
  5         <city>西城区</city>
  6         <city>崇文区</city>
  7         <city>宣武区</city>
  8         <city>朝阳区</city>
  9         <city>丰台区</city>
 10         <city>石景山区</city>
 11         <city>海淀区</city>
 12         <city>门头沟区</city>
 13         <city>房山区</city>
 14         <city>通州区</city>
 15         <city>顺义区</city>
 16         <city>昌平区</city>
 17         <city>大兴区</city>
 18         <city>怀柔区</city>
 19         <city>平谷区</city>
 20         <city>密云县</city>
 21         <city>延庆县</city>
 22     </province>
 23     <province name="天津">
 24         <city>和平区</city>
 25         <city>河东区</city>
 26         <city>河西区</city>
 27         <city>南开区</city>
 28         <city>河北区</city>
 29         <city>红桥区</city>
 30         <city>塘沽区</city>
 31         <city>汉沽区</city>
 32         <city>大港区</city>
 33         <city>东丽区</city>
 34         <city>西青区</city>
 35         <city>津南区</city>
 36         <city>北辰区</city>
 37         <city>武清区</city>
 38         <city>宝坻区</city>
 39         <city>宁河县</city>
 40         <city>静海县</city>
 41         <city>蓟县</city>
 42     </province>
 43     <province name="河北">
 44         <city>石家庄</city>
 45         <city>唐山</city>
 46         <city>秦皇岛</city>
 47         <city>邯郸</city>
 48         <city>邢台</city>
 49         <city>保定</city>
 50         <city>张家口</city>
 51         <city>承德</city>
 52         <city>沧州</city>
 53         <city>廊坊</city>
 54         <city>衡水</city>
 55     </province>
 56     <province name="山西">
 57         <city>太原</city>
 58         <city>大同</city>
 59         <city>阳泉</city>
 60         <city>长治</city>
 61         <city>晋城</city>
 62         <city>朔州</city>
 63         <city>晋中</city>
 64         <city>运城</city>
 65         <city>忻州</city>
 66         <city>临汾</city>
 67         <city>吕梁</city>
 68     </province>
 69     <province name="内蒙古">
 70         <city>呼和浩特</city>
 71         <city>包头</city>
 72         <city>乌海</city>
 73         <city>赤峰</city>
 74         <city>通辽</city>
 75         <city>鄂尔多斯</city>
 76         <city>呼伦贝尔</city>
 77         <city>巴彦淖尔</city>
 78         <city>乌兰察布</city>
 79         <city>兴安盟</city>
 80         <city>锡林郭勒盟</city>
 81         <city>阿拉善盟</city>
 82     </province>
 83     <province name="辽宁">
 84         <city>沈阳</city>
 85         <city>大连</city>
 86         <city>鞍山</city>
 87         <city>抚顺</city>
 88         <city>本溪</city>
 89         <city>丹东</city>
 90         <city>锦州</city>
 91         <city>营口</city>
 92         <city>阜新</city>
 93         <city>辽阳</city>
 94         <city>盘锦</city>
 95         <city>铁岭</city>
 96         <city>朝阳</city>
 97         <city>葫芦岛</city>
 98     </province>
 99     <province name="吉林">
100         <city>长春</city>
101         <city>吉林</city>
102         <city>四平</city>
103         <city>辽源</city>
104         <city>通化</city>
105         <city>白山</city>
106         <city>松原</city>
107         <city>白城</city>
108         <city>延边</city>
109     </province>
110     <province name="黑龙江">
111         <city>哈尔滨</city>
112         <city>齐齐哈尔</city>
113         <city>鸡西</city>
114         <city>鹤岗</city>
115         <city>双鸭山</city>
116         <city>大庆</city>
117         <city>伊春</city>
118         <city>佳木斯</city>
119         <city>七台河</city>
120         <city>牡丹江</city>
121         <city>黑河</city>
122         <city>绥化</city>
123         <city>大兴安岭</city>
124     </province>
125     <province name="上海">
126         <city>黄浦区</city>
127         <city>卢湾区</city>
128         <city>徐汇区</city>
129         <city>长宁区</city>
130         <city>静安区</city>
131         <city>普陀区</city>
132         <city>闸北区</city>
133         <city>虹口区</city>
134         <city>杨浦区</city>
135         <city>闵行区</city>
136         <city>宝山区</city>
137         <city>嘉定区</city>
138         <city>浦东新区</city>
139         <city>金山区</city>
140         <city>松江区</city>
141         <city>青浦区</city>
142         <city>南汇区</city>
143         <city>奉贤区</city>
144         <city>崇明县</city>
145     </province>
146     <province name="江苏">
147         <city>南京</city>
148         <city>无锡</city>
149         <city>徐州</city>
150         <city>常州</city>
151         <city>苏州</city>
152         <city>南通</city>
153         <city>连云港</city>
154         <city>淮安</city>
155         <city>盐城</city>
156         <city>扬州</city>
157         <city>镇江</city>
158         <city>泰州</city>
159         <city>宿迁</city>
160     </province>
161     <province name="浙江">
162         <city>杭州</city>
163         <city>宁波</city>
164         <city>温州</city>
165         <city>嘉兴</city>
166         <city>湖州</city>
167         <city>绍兴</city>
168         <city>金华</city>
169         <city>衢州</city>
170         <city>舟山</city>
171         <city>台州</city>
172         <city>丽水</city>
173     </province>
174     <province name="安徽">
175         <city>合肥</city>
176         <city>芜湖</city>
177         <city>蚌埠</city>
178         <city>淮南</city>
179         <city>马鞍山</city>
180         <city>淮北</city>
181         <city>铜陵</city>
182         <city>安庆</city>
183         <city>黄山</city>
184         <city>滁州</city>
185         <city>阜阳</city>
186         <city>宿州</city>
187         <city>巢湖</city>
188         <city>六安</city>
189         <city>亳州</city>
190         <city>池州</city>
191         <city>宣城</city>
192     </province>
193     <province name="福建">
194         <city>福州</city>
195         <city>厦门</city>
196         <city>莆田</city>
197         <city>三明</city>
198         <city>泉州</city>
199         <city>漳州</city>
200         <city>南平</city>
201         <city>龙岩</city>
202         <city>宁德</city>
203     </province>
204     <province name="江西">
205         <city>南昌</city>
206         <city>景德镇</city>
207         <city>萍乡</city>
208         <city>九江</city>
209         <city>新余</city>
210         <city>鹰潭</city>
211         <city>赣州</city>
212         <city>吉安</city>
213         <city>宜春</city>
214         <city>抚州</city>
215         <city>上饶</city>
216     </province>
217     <province name="山东">
218         <city>济南</city>
219         <city>青岛</city>
220         <city>淄博</city>
221         <city>枣庄</city>
222         <city>东营</city>
223         <city>烟台</city>
224         <city>潍坊</city>
225         <city>济宁</city>
226         <city>泰安</city>
227         <city>威海</city>
228         <city>日照</city>
229         <city>莱芜</city>
230         <city>临沂</city>
231         <city>德州</city>
232         <city>聊城</city>
233         <city>滨州</city>
234         <city>荷泽</city>
235     </province>
236     <province name="河南">
237         <city>郑州</city>
238         <city>开封</city>
239         <city>洛阳</city>
240         <city>平顶山</city>
241         <city>安阳</city>
242         <city>鹤壁</city>
243         <city>新乡</city>
244         <city>焦作</city>
245         <city>濮阳</city>
246         <city>许昌</city>
247         <city>漯河</city>
248         <city>三门峡</city>
249         <city>南阳</city>
250         <city>商丘</city>
251         <city>信阳</city>
252         <city>周口</city>
253         <city>驻马店</city>
254     </province>
255     <province name="湖北">
256         <city>武汉</city>
257         <city>黄石</city>
258         <city>十堰</city>
259         <city>宜昌</city>
260         <city>襄樊</city>
261         <city>鄂州</city>
262         <city>荆门</city>
263         <city>孝感</city>
264         <city>荆州</city>
265         <city>黄冈</city>
266         <city>咸宁</city>
267         <city>随州</city>
268         <city>恩施</city>
269         <city>神农架</city>
270     </province>
271     <province name="湖南">
272         <city>长沙</city>
273         <city>株洲</city>
274         <city>湘潭</city>
275         <city>衡阳</city>
276         <city>邵阳</city>
277         <city>岳阳</city>
278         <city>常德</city>
279         <city>张家界</city>
280         <city>益阳</city>
281         <city>郴州</city>
282         <city>永州</city>
283         <city>怀化</city>
284         <city>娄底</city>
285         <city>湘西</city>
286     </province>
287     <province name="广东">
288         <city>广州</city>
289         <city>韶关</city>
290         <city>深圳</city>
291         <city>珠海</city>
292         <city>汕头</city>
293         <city>佛山</city>
294         <city>江门</city>
295         <city>湛江</city>
296         <city>茂名</city>
297         <city>肇庆</city>
298         <city>惠州</city>
299         <city>梅州</city>
300         <city>汕尾</city>
301         <city>河源</city>
302         <city>阳江</city>
303         <city>清远</city>
304         <city>东莞</city>
305         <city>中山</city>
306         <city>潮州</city>
307         <city>揭阳</city>
308         <city>云浮</city>
309     </province>
310     <province name="广西">
311         <city>南宁</city>
312         <city>柳州</city>
313         <city>桂林</city>
314         <city>梧州</city>
315         <city>北海</city>
316         <city>防城港</city>
317         <city>钦州</city>
318         <city>贵港</city>
319         <city>玉林</city>
320         <city>百色</city>
321         <city>贺州</city>
322         <city>河池</city>
323         <city>来宾</city>
324         <city>崇左</city>
325     </province>
326     <province name="海南">
327         <city>海口</city>
328         <city>三亚</city>
329     </province>
330     <province name="重庆">
331         <city>重庆</city>
332         <city>万州区</city>
333         <city>涪陵区</city>
334         <city>渝中区</city>
335         <city>大渡口区</city>
336         <city>江北区</city>
337         <city>沙坪坝区</city>
338         <city>九龙坡区</city>
339         <city>南岸区</city>
340         <city>北碚区</city>
341         <city>万盛区</city>
342         <city>双桥区</city>
343         <city>渝北区</city>
344         <city>巴南区</city>
345         <city>黔江区</city>
346         <city>长寿区</city>
347         <city>綦江县</city>
348         <city>潼南县</city>
349         <city>铜梁县</city>
350         <city>大足县</city>
351         <city>荣昌县</city>
352         <city>璧山县</city>
353         <city>梁平县</city>
354         <city>城口县</city>
355         <city>丰都县</city>
356         <city>垫江县</city>
357         <city>武隆县</city>
358         <city>忠县</city>
359         <city>开县</city>
360         <city>云阳县</city>
361         <city>奉节县</city>
362         <city>巫山县</city>
363         <city>巫溪县</city>
364         <city>石柱土家族自治县</city>
365         <city>秀山土家族苗族自治县</city>
366         <city>酉阳土家族苗族自治县</city>
367         <city>彭水苗族土家族自治县</city>
368         <city>江津</city>
369         <city>合川</city>
370         <city>永川</city>
371         <city>南川</city>
372     </province>
373     <province name="四川">
374         <city>成都</city>
375         <city>自贡</city>
376         <city>攀枝花</city>
377         <city>泸州</city>
378         <city>德阳</city>
379         <city>绵阳</city>
380         <city>广元</city>
381         <city>遂宁</city>
382         <city>内江</city>
383         <city>乐山</city>
384         <city>南充</city>
385         <city>眉山</city>
386         <city>宜宾</city>
387         <city>广安</city>
388         <city>达州</city>
389         <city>雅安</city>
390         <city>巴中</city>
391         <city>资阳</city>
392         <city>阿坝</city>
393         <city>甘孜</city>
394         <city>凉山</city>
395     </province>
396     <province name="贵州">
397         <city>贵阳</city>
398         <city>六盘水</city>
399         <city>遵义</city>
400         <city>安顺</city>
401         <city>铜仁</city>
402         <city>黔西南</city>
403         <city>毕节</city>
404         <city>黔东南</city>
405         <city>黔南</city>
406     </province>
407     <province name="云南">
408         <city>昆明</city>
409         <city>曲靖</city>
410         <city>玉溪</city>
411         <city>保山</city>
412         <city>昭通</city>
413         <city>丽江</city>
414         <city>思茅</city>
415         <city>临沧</city>
416         <city>楚雄</city>
417         <city>红河</city>
418         <city>文山</city>
419         <city>西双版纳</city>
420         <city>大理</city>
421         <city>德宏</city>
422         <city>怒江</city>
423         <city>迪庆</city>
424     </province>
425     <province name="西藏">
426         <city>拉萨</city>
427         <city>昌都</city>
428         <city>山南</city>
429         <city>日喀则</city>
430         <city>那曲</city>
431         <city>阿里</city>
432         <city>林芝</city>
433     </province>
434     <province name="陕西">
435         <city>西安</city>
436         <city>铜川</city>
437         <city>宝鸡</city>
438         <city>咸阳</city>
439         <city>渭南</city>
440         <city>延安</city>
441         <city>汉中</city>
442         <city>榆林</city>
443         <city>安康</city>
444         <city>商洛</city>
445     </province>
446     <province name="甘肃">
447         <city>兰州</city>
448         <city>嘉峪关</city>
449         <city>金昌</city>
450         <city>白银</city>
451         <city>天水</city>
452         <city>武威</city>
453         <city>张掖</city>
454         <city>平凉</city>
455         <city>酒泉</city>
456         <city>庆阳</city>
457         <city>定西</city>
458         <city>陇南</city>
459         <city>临夏</city>
460         <city>甘南</city>
461     </province>
462     <province name="青海">
463         <city>西宁</city>
464         <city>海东</city>
465         <city>海北</city>
466         <city>黄南</city>
467         <city>海南</city>
468         <city>果洛</city>
469         <city>玉树</city>
470         <city>海西</city>
471     </province>
472     <province name="宁夏">
473         <city>银川</city>
474         <city>石嘴山</city>
475         <city>吴忠</city>
476         <city>固原</city>
477         <city>中卫</city>
478     </province>
479     <province name="新疆">
480         <city>乌鲁木齐</city>
481         <city>克拉玛依</city>
482         <city>吐鲁番</city>
483         <city>哈密</city>
484         <city>昌吉</city>
485         <city>博尔塔拉</city>
486         <city>巴音郭楞</city>
487         <city>阿克苏</city>
488         <city>克孜勒苏</city>
489         <city>喀什</city>
490         <city>和田</city>
491         <city>伊犁</city>
492         <city>塔城</city>
493         <city>阿勒泰</city>
494         <city>石河子</city>
495         <city>阿拉尔</city>
496         <city>图木舒克</city>
497         <city>五家渠</city>
498     </province>
499     <province name="香港">
500         <city>香港</city>
501     </province>
502     <province name="澳门">
503         <city>澳门</city>
504     </province>
505     <province name="台湾">
506         <city>台湾</city>
507     </province>
508 </china>
china.xml

 

posted @ 2016-11-20 23:23  凌晨。。。三点  阅读(266)  评论(0)  编辑  收藏  举报