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數組的屬性

length                                       長度

selectedIndex                           當前被選中文本的索引號，此索引值是記憶體自動分配的(0,1,2,3.......)對應(第一個標籤，第二個標籤，第三個標籤.......)

◆單個option的屬性

text                                            返回指定文本value                                         返回指定值index                                         返回下標selected                                    返回指定對象是否被選中，指定true反之false，可動態改變選中項

defaultSelected                         返回該對象預設是否被選中，選中true反之false

◆option的方法

增加一個<option>標籤               obj.options.add(new("文本", "值"))刪除一個<option>標籤               obj.options.remove(obj.selectedIndex);擷取一個<option>標籤               obj.options[obj.selectedIndex].text;修改一個<option>標籤               obj.options[obj.selectedIndex] = new Option("新文本", "值");刪除所有<option>標籤               obj.options.length = 0;

擷取一個<option>標籤的值        obj.options[obj.selectedIndex].value;

◆注意

obj.option中的option不需要大寫new Option中的option一定要大寫

本例共寫了 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   城市:
   <select id="city" style="width:150">
   </select>
</center>
</body>
</html>