在上一个项目中，需要实现下拉框联动的动态实现时，我使用的是在页面中一次将所有联动数据装载，然后再由js实现。具体如下：
js代码：
1
<
script language
=
"
JavaScript
"
>
2
var
onecount;
3
onecount
=
0
;
4
subcat
=
new
Array();
5
<%
6
int
count
=
0
;
7
Iterator itr
=
schoolList.iterator();
8
while
(itr.hasNext())
9
{
10
MaxSchoolView msv
=
(MaxSchoolView) itr.next();
11
%>
12
subcat[
<%=
count
%>
]
=
new
Array(
"
<%=msv.getSchoolName()%>
"
,
"
<%=Integer.parseInt(msv.getSchoolClass())%>
"
,
"
<%=Integer.parseInt(msv.getSchoolNO())%>
"
);
//
产生数组
13
<%
14
count
=
count
+
1
;
15
}
16
%>
17
onecount
=<%=
count
%>
;
18
19
function
changelocation(id)
20
{
21
document.maxSearchForm.smallsortselect.length
=
0
;
22
23
var
idto
=
id;
24
var
i;
25
document.maxSearchForm.smallsortselect.options[
0
]
=
new
Option('请选择学校','');
26
for
(i
=
0
;i
<
onecount;i
++
)
27
{
28
if
(subcat[i][
1
]
==
idto)
29
{
30
document.maxSearchForm.smallsortselect.options[document.maxSearchForm.smallsortselect.length]
=
new
Option(subcat[i][
0
],subcat[i][
2
]);
31
}
32
}
33
34
35
36
}
37
38
</
script
>
页面中的下拉框代码：
<
select
id
=bigsortselect"
name
="bigsortselect"
onChange
="changelocation(document.maxSearchForm.bigsortselect.options[document.maxSearchForm.bigsortselect.selectedIndex].value)"
size
="1"
>
<
option
value
="3"
>
请选择学校分类
</
option
>
<
option
value
="0"
>
本科学校
</
option
>
<
option
value
="1"
>
专科学校
</
option
>
<
option
value
="2"
>
独立学院
</
option
>
</
select
>
<
select
name
="smallsortselect"
id
=smallsortselect"
>
<
option
value
="0"
selected
>
请选择学校
</
option
>
</
select
>
这种实现方式过去比较普遍，不过有了AJAX以后，我们可以大量精减我们的页面代码，同时配合taglib，可以完全消除以上实现方式页面中的java代码。
如下：
<script type="text/javascript">
function getResult(stateVal) {
var url = "select?type=login®ionNO="+stateVal;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var xmlDoc=req.responseXML.documentElement;
var xSel=xmlDoc.getElementsByTagName('select');
var select_root=document.getElementById('schoolNO');
select_root.options.length=0;
var option=new Option('--请选择用户--','0');
select_root.add(option);
for(var i=0;i<xSel.length;i++)
{
var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].childNodes[1].firstChild.nodeValue;
var option=new Option(xText,xValue);
try{
select_root.add(option);
}catch(e){
}
}
}
}
}
</script> 下拉框代码：
<TR>
<TD>
<label for="name">
用户：
</label>
<twy:sportsitem regionNO="topAdmin" />
</TD>
</TR>
<TR>
<TD>
<select id="schoolNO" name="schoolNO">
<option value="0">
--请选择用户--
</option>
</select>
</TD>
</TR> 这里结合了自定义taglib，可以对比前后两种下拉框联动的实现方式，可以发现第二种消灭了原来jsp中的java代码，实现了我一直所追求的页面和代码解耦。
那么，这个AJAX的使用，究竟是怎么一回事呢？其实道理非常简单，不用说太多原理，通过代码就可以体会。上面贴出来的js代码，就是一个传统的AJAX使用方式，通过建立与服务器的异步XML通信，取得数据后，对页面中的下拉框进行渲染。与这段代码通信的是一个servlet，代码如下：
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.context.support.WebApplicationContextUtils;
import org.twy.dao.SchoolDAO;
import org.twy.dao.ibatis.helper.SchoolQueryHelperBean;
import org.twy.model.School;
import org.twy.sys.Constants;
import org.twy.utils.StringUtils;
/** *//**
*
* @author lanluquan
*
*/
@SuppressWarnings("serial")
public class SelectSchoolServlet extends HttpServlet {
public SelectSchoolServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
//需要设置utf-8 在客户端的javascript才可以正确识别
response.setCharacterEncoding("utf-8");
String regionNO = request.getParameter("regionNO");
String type = request.getParameter("type");
SchoolDAO sdao = (SchoolDAO) WebApplicationContextUtils
.getRequiredWebApplicationContext(getServletContext()).getBean(
"schoolDAO");
SchoolQueryHelperBean sqhb = new SchoolQueryHelperBean(null,
StringUtils.strTOLong(regionNO), null, null, null);
List schools = sdao.getSchools(sqhb, 0, Constants.MAXNUM);
StringBuffer sb = new StringBuffer("<selects>");
if(type!=null && type.equals("login")){
sb.append("<select><value>1</value><text>地级市管理员</text></select>");
}
School s = null;
for (Object o : schools) {
s = (School) o;
sb.append("<select><value>"+s.getSchoolNO()+"</value><text>"+s.getSchoolName()+"</text></select>");
}
sb.append("</selects>");
//String xml = sb.toString();
//new String(xml.getBytes("GBK"), "UTF-8");//ISO-8859-1
//System.out.println(sb);
PrintWriter out = response.getWriter();
out.write(sb.toString());
out.close();
}
在这个servlet中，将得到的数据list，组装成xml，返回给页面，以此来实现动态刷新下拉框的效果。