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案例四：省市联动(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。