使用ajax实现菜单联动
通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。
需求：选择第一个下拉框的值，根据第一个下拉框的值显示第二个下拉框的值
- 首先使用GET方式。
客户端HTML页面显示第一个下拉选择框，给当前下拉选择框选择某个选项后，通过XMLHttpRequest向服务器发送请求，请求动态显示第二个下拉选择框。下面是对应的HTML页面的代码。
程序清单：Ajax02request/get/first.html
1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6
7 <meta name="author" content="silvan" />
8
9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
10
11 <title>发送GET请求</title>
12
13 <!-- 给select标签添加样式 -->
14
15 <style type="text/css">
16
17 select {
18
19 width: 160px;
20
21 font-size: 11pt;
22
23 }
24
25 </style>
26
27 </head>
28
29 <body>
30
31 <select name="first" id="first" onchange="change(this.value);">
32
33 <option value="0">---请选择---</option>
34
35 <option value="1" >中国</option>
36
37 <option value="2">美国</option>
38
39 <option value="3">日本</option>
40
41 </select>
42
43 <select name="second" id="second"></select>
44
45 <script type="text/javascript">
46
47 // 定义了XMLHttpRequest对象
48
49 var xmlrequest;
50
51 // 完成XMLHttpRequest对象的初始化
52
53 function createXMLHttpRequest(){
54
55 if(window.XMLHttpRequest){
56
57 // DOM 2浏览器
58
59 xmlrequest = new XMLHttpRequest();
60
61 }else if (window.ActiveXObject){
62
63 // IE浏览器
64
65 try{
66
67 xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
68
69 }catch (e){
70
71 try{
72
73 xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
74
75 }catch (e){
76
77 }
78
79 }
80
81 }
82
83 }
84
85 // 事件处理函数，当下拉列表选择改变时，触发该事件
86
87 function change(id){
88
89 // 初始化XMLHttpRequest对象
90
91 createXMLHttpRequest();
92
93 // 设置请求响应的URL
94
95 var uri = "second.jsp?id=" + id;
96
97 // 设置处理响应的回调函数
98
99 xmlrequest.onreadystatechange = processResponse;
100
101 // 打开与服务器响应地址的连接
102
103 xmlrequest.open("GET", uri, true);
104
105 // 发送请求
106
107 xmlrequest.send(null);
108
109 }
110
111 // 定义处理响应的回调函数
112
113 function processResponse(){
114
115 //响应完成且响应正常
116
117 if (xmlrequest.readyState == 4){
118
119 if (xmlrequest.status == 200){
120
121 // 将服务器响应以$符号分隔成字符串数组
122
123 var cityList = xmlrequest.responseText.split("$");
124
125 // 获取用于显示菜单的下拉列表
126
127 var displaySelect = document.getElementById("second");
128
129 // 将目标下拉列表清空
130
131 displaySelect.innerHTML = null;
132
133 // 以字符串数组的每个元素创建option，
134
135 // 并将这些选项添加到下拉列表中
136
137 for (var i = 0 ; i < cityList.length ; i++){
138
139 // 创建一个<option.../>元素
140
141 var op = document.createElement("option");
142
143 op.innerHTML = cityList[i];
144
145 // 将新的选项添加到列表框的最后
146
147 displaySelect.appendChild(op);
148
149 }
150
151 }else{
152
153 //页面不正常
154
155 window.alert("您所请求的页面有异常。");
156
157 }
158
159 }
160
161 }
162
163 // 指定页面加载完成后指定change(id)函数
164
165 document.body.onload = change(document.getElementById("first").value);
166
167 </script>
168
169 </body>
170
171 </html>采用GET请求将父菜单的ID作为参数发送，根据ID显示第二个下拉框的值。服务器响应页面的代码如下。
程序清单：Ajax02request/get/second.jsp
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%
String idStr = (String)request.getParameter("id");
int id = idStr == null ? 1 : Integer.parseInt(idStr);
switch(id){
case 1:
out.println("上海$广州$北京");
break;
case 2:
out.println("华盛顿$纽约$加州");
break;
case 3:
out.println("东京$大板$福冈");
break;
}
%>上面jsp页面作为服务器响应非常简单：先读取请求参数，当请求id为1时，返回三个中国城市；当请求id为2时，返回三个美国城市；当请求id为3时，返回三个日本城市。
在浏览器中浏览该页面，并改变左边下拉列表的选中项，将看到下图效果：
2. 使用POST方式
POST请求的适应性更广，可使用更大的请求参数。而且POST请求的请求参数在页面跳转时，不能在链接地址中直接看到，保密性更好。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下三个步骤：
- 使用open方法打开连接时，指定使用POST方式发送请求。
- 设置正确的请求头，POST请求通常应设置Content-Type请求头。
- 发送请求，把请求参数转为查询字符串，将该字符串作为send（）方法的参数。
对于上面的应用，使用POST方式实现，只需要改一个请求的发送方法，如下所示：
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求响应的URL
var uri = "second.jsp";
// 设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 设置以POST方式发送请求，并打开连接
xmlrequest.open("POST", uri, true);
// 设置POST请求的请求头,表示数据被编码为名称/值对
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
// 发送请求
xmlrequest.send("id="+id);
}其余的部分则无须改变，应用的执行效果与采用GET方式发送请求的效果完全一样。事实上，即使采用POST方式发送请求，一样可以将请求参数附加在请求的URL之后。如果send方法没有请求参数，应传入null，因为有些浏览器规定了send方法必须传入参数。代码如下：
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求响应的URL
var uri = "second.jsp?id="+id;
// 设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 设置以POST方式发送请求，并打开连接
xmlrequest.open("POST", uri, true);
// 设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
// 发送请求
xmlrequest.send(null);
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
