Ajax 实现动态加载联动列表框
下面我演示两个相关联的列表框，一个是“省份”列表框，另外一个是省份的“城市”列表框，当单击“省份”下拉框时，“城市”下拉框会随之改变，将显示所选择省份内的城市。服务器端在接收到页面传来的省份数据后，根据省份数据组织相应的城市数据，并将城市数据以 XML 文件的形式发送到客户端。该XML 文件格式很简单，格式清单：
<?xml version="1.0" encoding="gb2312" ?>
<citys>
<city>
<id></id>
<name></name>
</city>
</citys>
在这里我为了精简代码，所以用一个哈希表模拟了服务器端的数据库。将事先定义好的 XML 数据直接以省份值为主键存入数据库中，在从客户端接收到省份值时，再查询哈希表取得对应的值。Java 中的哈希表类似数学中的函数，比如：y = f(x) ，根据 x 就能确定 y 的值，在 map 里就是 map.put("x","y"); map.get("x") == y。其实就是一一映射关系，key <------> value ， 每个key对应一个value 知道了key也就知道了value 。另外还有一个JS的对象要向大家介绍：
一、Option 对象
var e = document.getElementById("selectId");
e.options = new Option("文本", "值"); //创建一个option对象，即在<select>标签中创建一个或多个<option value="值">文本</option>。options是一个数组，里面可存放多个<option value="值">文本</option>标签。
◆options数组的属性
selectedIndex 当前被选中文本的索引号，此索引值是内存自动分配的(0,1,2,3.......)对应(第一个标签，第二个标签，第三个标签.......)
◆单个option的属性
defaultSelected 返回该对象默认是否被选中，选中true反之false
◆option的方法
获取一个<option>标签的值 obj.options[obj.selectedIndex].value;
◆注意
本例共写了 AjaxJS.js 脚本、dropDownListServer.jsp 后台处理、index.jsp 客户端三个文件。
AjaxJS.js 脚本代码：
//==========================================================全局变量区开始(XMLHttpRequest对象)
var xmlHttp;
//==========================================================全局变量区结束
/*================================================================================
Function: 创建XMLHttpRequest对象函数
Description: 根据浏览器创建XMLHttpRequest对象
Calls: 无
Called By: selectChnge
Table Accessed: 无
Table Updated: 无
Table Deleted: 无
Input: 无
Output: xmlHttp
Return: 无
Create: 2009-05-21/YJ/创建函数
Modify: 无
Others: 无
================================================================================*/
<!--
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
}
//-->
/*================================================================================
Function: 提交函数
Description: 根据选择的省份向服务器提交
Calls: showcitys
Called By: 无
Table Accessed: 无
Table Updated: 无
Table Deleted: 无
Input: 控件的ID
Output: 无
Return: 无
Create: 2009-05-21/YJ/创建函数
Modify: 无
Others: 无
================================================================================*/
function selectChnge(controlID)
{
var city = document.getElementById(controlID).value;
if(city != "null")
{
createXMLHttpRequest();
var url = "dropDownListServer.jsp?city="+city;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = showcitys;
xmlHttp.send(null);
}
}
/*================================================================================
Function: 返回城市列表函数
Description: 根据提交的省份返回城市列表
Calls: 无
Called By: selectChnge
Table Accessed: 无
Table Updated: 无
Table Deleted: 无
Input: 无
Output: 无
Return: 无
Create: 2009-05-21/YJ/创建函数
Modify: 无
Others: 无
================================================================================*/
function showcitys()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var cityData = xmlHttp.responseXML.getElementsByTagName("city");
var citySelect = document.getElementById("city");
citySelect.options.length = 0;
for(var i = 0; i < cityData.length; i++)
{
var cityName = cityData[i].childNodes[0].firstChild.nodeValue;
var cityID = cityData[i].childNodes[1].firstChild.nodeValue;
var option = new Option(cityID, cityName);
try
{
citySelect.add(option);
}
catch(e)
{
alert(e);
}
}
}
else
{
alert("您请求的页面有异常！");
}
}
}
dropDownListServer.jsp 后台处理代码：
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.util.*" %>
<%
String stDepart = request.getParameter("city");
if(stDepart == null)
{
stDepart = "p1";
}
StringBuffer sb = new StringBuffer();
//解决中文乱码问题
sb.append("<?xml version='1.0' encoding='gb2312'?>");
sb.append("<citys>");
//创建哈希表模拟服务器端数据库
Map map = new HashMap();
String p1 = "<city><id>10001</id><name>成都</name></city><city><id>10002</id><name>达州</name></city><city><id>10003</id><name>绵阳</name></city><city><id>10004</id><name>乐山</name></city><city><id>10005</id><name>遂宁</name></city><city><id>10006</id><name>攀枝花</name></city>";
String p2 = "<city><id>20001</id><name>郑州</name></city><city><id>20002</id><name>洛阳</name></city><city><id>20003</id><name>开封</name></city><city><id>20004</id><name>安阳</name></city><city><id>20005</id><name>南阳</name></city>";
String p3 = "<city><id>30001</id><name>南京</name></city><city><id>30002</id><name>徐州</name></city><city><id>30003</id><name>苏州</name></city><city><id>30004</id><name>常州</name></city><city><id>30005</id><name>扬州</name></city>";
String p4 = "<city><id>40001</id><name>长沙</name></city><city><id>40002</id><name>株洲</name></city><city><id>40003</id><name>岳阳</name></city>";
String p5 = "<city><id>50001</id><name>荆州</name></city><city><id>50002</id><name>荆门</name></city><city><id>50003</id><name>黄石</name></city><city><id>50004</id><name>武汉</name></city>";
map.put("p1", p1);
map.put("p2", p2);
map.put("p3", p3);
map.put("p4", p4);
map.put("p5", p5);
//根据选择的省份查询对应的城市
sb.append((String)map.get(stDepart).toString());
sb.append("</citys>");
response.setContentType("text/xml");
out.write(sb.toString());
%>
index.jsp 客户端代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Ajax 动态加载列表框</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script language="javascript" type="text/javascript" src="./Resources/AjaxJS.js"></script>
</head>
<body>
<center>
省份:
<select id="province" onChange="selectChnge('province')">
<option value="null">---------请选择---------</option>
<option value="p1">四川省</option>
<option value="p2">海南省</option>
<option value="p3">江苏省</option>
<option value="p4">湖南省</option>
<option value="p5">湖北省</option>
</select>
城市:
<select id="city" style="width:150">
</select>
</center>
</body>
</html>
