1

2

3

4

5

6

7

8

My JSP \'ajax5.jsp\' starting page

9

10

11

12

13

14

15

18

19 functioncreateXMLHttpRequest() {20 try{21 return newXMLHttpRequest();//大多数浏览器

22 }catch(e) {23 try{24 returnActvieXObject("Msxml2.XMLHTTP");//IE6.0

25 }catch(e) {26 try{27 returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

28 }catch(e) {29 alert("用的是什么浏览器啊？");30 throwe;31 }32 }33 }34 }35 /*

36 * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在中37 * 2. 在选择了新的省份时，发送请求(参数为省名称)，得到xml文档，即元素38 * 解析xml文档，得到其中所有的，再得到每个元素的内容，即市名，使用市名生成，插入到元素中39 */

40

41 window.οnlοad= function() {42 /*

43 ajax四步，请求ProvinceServlet，得到所有省份名称44 使用每个省份名称创建一个元素，添加到中45 */

46 varxmlHttp=createXMLHttpRequest();47 xmlHttp.open("GET","",true);48 xmlHttp.send(null);49 xmlHttp.onreadystatechange= function() {50 if(xmlHttp.readyState== 4 &&xmlHttp.status== 200) {51 //获取服务器的响应

52 vartext=xmlHttp.responseText;53 //使用逗号分隔它，得到数组

54 vararr=text.split(",");55 //循环遍历每个省份名称，每个名称生成一个option对象，添加到中

56 for(vari= 0; i

58 op.value=arr[i];//设置op的实际值为当前的省份名称

59 vartextNode=document.createTextNode(arr[i]);//创建文本节点

60 op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值

61

62 document.getElementById("p").appendChild(op);63 }64 }65 };66

67

68 /*

69 第二件事情：给添加改变监听70 使用选择的省份名称请求CityServlet，得到元素(xml元素)！！！71 获取元素中所有的元素，遍历之！获取每个的文本内容，即市名称72 使用每个市名称创建元素添加到73 */

74 varproSelect=document.getElementById("p");75 proSelect.οnchange= function() {76 varxmlHttp=createXMLHttpRequest();77 xmlHttp.open("POST","",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 varcitySelect=document.getElementById("c");86 //获取其所有子元素

87 varoptionEleList=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 vardoc=xmlHttp.responseXML;95 //得到所有名为city的元素

96 varcityEleList=doc.getElementsByTagName("city");97 //循环遍历每个city元素

98 for(vari= 0; i

100 varcityName;101 //获取市名称

102 if(window.addEventListener) {//处理浏览器的差异

103 cityName=cityEle.textContent;//支持FireFox等浏览器

104 }else{105 cityName=cityEle.text;//支持IE

106 }107

108 //使用市名称创建option元素，添加到中

109 varop=document.createElement("option");110 op.value=cityName;111 //创建文本节点

112 vartextNode=document.createTextNode(cityName);113 op.appendChild(textNode);//把文本节点追加到op元素中

114

115 //把op添加到元素中

116 citySelect.appendChild(op);117 }118 }119 };120 };121 };122

123

124

125

126

省市联动

127

128 ===请选择省===

129

130

131

132 ===请选择市===

133

134

135

总结

以上是生活随笔为你收集整理的ajax省市联动案例,AJAX案例四：省市联动(示例代码)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。