这是前台的页面的代码:
<
html
>
< head >
</ head >
< script language ="javascript" type ="text/javascript" > ...
var xmlHttp;
function createXMLHttpRequest()
...{
if(window.ActiveXObject)
...{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
...{
xmlHttp=new XMLHttpRequest();
}
}
function select_change()
...{
var depart=document.getElementById("depart").value;
if(depart!=null)...{
createXMLHttpRequest();
var url="deal.jsp?depart="+depart;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=showMember;
xmlHttp.send(null);
}
}
function showMember()
...{
if(xmlHttp.readyState==4)
...{
if(xmlHttp.status==200)
...{
var membersData=xmlHttp.responseXML.getElementsByTagName("member");
var membersSelect=document.getElementById("member");
var option=null;
membersSelect.options.length=0;
for(var i=0;i<membersData.length;i++)
...{
var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue;
var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
var option=new Option(mvalue,mdisplay);
try
...{
membersSelect.appendChild(option);
}
catch(e)
...{
alert(e);
}
}
}
else
...{
alert("您请求的页面有异常!");
}
}
else
...{
}
}
</ script >
< body > 部门: < select id ="depart" onChange ="select_change()" >
< option value ="null" > --请选择-- </ option >
< option value ="d1" > 部门1 </ option >
< option value ="d2" > 部门2 </ option >
< option value ="d3" > 部门3 </ option >
< option value ="d4" > 部门4 </ option >
</ select >
职员: < select id ="member" multiple ="true" width =20 ></ select >
</ body >
</ html >
< head >
</ head >
< script language ="javascript" type ="text/javascript" > ...
var xmlHttp;
function createXMLHttpRequest()
...{
if(window.ActiveXObject)
...{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
...{
xmlHttp=new XMLHttpRequest();
}
}
function select_change()
...{
var depart=document.getElementById("depart").value;
if(depart!=null)...{
createXMLHttpRequest();
var url="deal.jsp?depart="+depart;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=showMember;
xmlHttp.send(null);
}
}
function showMember()
...{
if(xmlHttp.readyState==4)
...{
if(xmlHttp.status==200)
...{
var membersData=xmlHttp.responseXML.getElementsByTagName("member");
var membersSelect=document.getElementById("member");
var option=null;
membersSelect.options.length=0;
for(var i=0;i<membersData.length;i++)
...{
var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue;
var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
var option=new Option(mvalue,mdisplay);
try
...{
membersSelect.appendChild(option);
}
catch(e)
...{
alert(e);
}
}
}
else
...{
alert("您请求的页面有异常!");
}
}
else
...{
}
}
</ script >
< body > 部门: < select id ="depart" onChange ="select_change()" >
< option value ="null" > --请选择-- </ option >
< option value ="d1" > 部门1 </ option >
< option value ="d2" > 部门2 </ option >
< option value ="d3" > 部门3 </ option >
< option value ="d4" > 部门4 </ option >
</ select >
职员: < select id ="member" multiple ="true" width =20 ></ select >
</ body >
</ html >
这是后台处理页面的代码:
<%
@ page language
=
"
java
"
contentType
=
"
text/heml;charset=gb2312
"
%>
<% @ page import = " java.util.* " %>
<%
String depart = request.getParameter( " depart " );
if (depart == null ) depart = " d1 " ;
StringBuffer sb = new StringBuffer();
sb.append( " <member> " );
Map map = new HashMap();
String d1 = " <member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member> " ;
String d2 = " <member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member> " ;
String d3 = " <member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member> " ;
String d4 = " <member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member> " ;
map.put( " d1 " ,d1);
map.put( " d2 " ,d2);
map.put( " d3 " ,d3);
map.put( " d4 " ,d4);
sb.append(map.get(depart).toString());
sb.append( " </member> " );
response.setContentType( " text/xml " );
out.write(sb.toString());
%>
<% @ page import = " java.util.* " %>
<%
String depart = request.getParameter( " depart " );
if (depart == null ) depart = " d1 " ;
StringBuffer sb = new StringBuffer();
sb.append( " <member> " );
Map map = new HashMap();
String d1 = " <member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member> " ;
String d2 = " <member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member> " ;
String d3 = " <member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member> " ;
String d4 = " <member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member> " ;
map.put( " d1 " ,d1);
map.put( " d2 " ,d2);
map.put( " d3 " ,d3);
map.put( " d4 " ,d4);
sb.append(map.get(depart).toString());
sb.append( " </member> " );
response.setContentType( " text/xml " );
out.write(sb.toString());
%>
该简单的实例是用一个哈希表模拟了服务器端的数据库。将事先定义好的XML数据直接以部门值为主键存入数据
库中,再从客户端接收到部门值时,再查询哈希表取得对应的值,然后封装好后添加到要显示的列表框中;