利用ASP和XML实现客户端多表单域数据动态更新

在基于Internet 的学校学籍管理系统开发过程中，遇到这么个问题：如何实现客户端多个表单域之间的数据动态更新？如下图所示，在同一个客户端页面有三个下拉列表表单域 ListCollege、ListDepart、ListClass，分别从SQL Server数据库服务器端获得学校名称、系部名称、班级名称，其中前两项数据量较小，而班级名称这一项有上百个记录。

<v:shapetype o:spt="75" coordsize="21600,21600" filled="f" stroked="f" id="_x0000_t75" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:extrusionok="f" o:connecttype="rect" gradientshapeok="t"></v:path><o:lock v:ext="edit" aspectratio="t"></o:lock></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style="width: 414pt; height: 165.75pt;"><v:imagedata src="file:///C:%5CDOCUME%7E1%5CXUXIAN%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg" o:title="search"></v:imagedata></v:shape>

从数据查询速度和程序易用性角度考虑，本页面载入时应该有尽量少的数据量，而且要能在一个查询页面中完成查询条件的选择。简单地说，就是要实现在同一个客户端页面中，在前两个下拉列表中选择了相应的学校名称和系部名称后，在第三个下拉列表（班级）中只有符合前两项条件的若干个记录以供客户选择。但是在不刷新本页面的情况下，由于在客户端必须通过Submit才能和服务器端取得联系并获得数据，所以很难实现。

可行的方法至少有如下三种：

1、利用数组来实现

在页面载入时将全部数据（如班级名称）通过记录集全部放到相应的数组ArrClass中。当用户选择了相应的学校或系部后，将其值放到相应变量College或Department中，同时通过前两个下拉列表框的onChange事件调用客户端函数 SelectClass。这个函数的功能就是根据变量的值在数组中依次查找到符合条件的数组元素，将其作为下拉列表ListClass的Option项。通过这个方法，可以在不刷新页面、不重复传递大量数据的情况下实现客户端动态数据更新。但是，其缺点是显然的，那就是当打开页面时用户得有足够的耐心去忍受通过缓慢的网络从服务器获得大量查询数据（如有上百条以上记录）。

2、利用asp.net来实现

微软已经推出了其asp.net技术，通过其能很方便的实现这个功能。但是asp.net的运行解释基础不再是asp.dll,而是.net平台（测试版），111M的asp.net平台相信还不是客户的首选。

3、通过ASP和XML来实现

通过ASP和XML组件的结合，可以很方便的实现这个功能。特点就是页面不用刷新，数据传输实时动态，数据量少，不用把大量的数据传到客户端，速度相对较快。

下面就通过实例介绍实现客户端多表单域动态数据更新的第三种方法。

开发环境如下,经调试成功通过：

WWW 服务器 <o:p> </o:p>	windows 2000 server(IIS 5)<o:p> </o:p>	数据库 <o:p> </o:p>	SQL Server 7.0<o:p> </o:p>
浏览器 <o:p> </o:p>	Internet Explore 5.5<o:p> </o:p>	数据库名称 <o:p> </o:p>	gzz_back<o:p> </o:p>
<o:p> </o:p> 数据库结构 <o:p> </o:p>	table 名称 <o:p> </o:p>	字段 1<o:p> </o:p>	字段 2<o:p> </o:p>	字段 3<o:p> </o:p>	字段 4<o:p> </o:p>
pcollege<o:p> </o:p>	college_name<o:p> </o:p>	college_code<o:p> </o:p>	<o:p> </o:p>	<o:p> </o:p>
pdepartment<o:p> </o:p>	department_name<o:p> </o:p>	department_code<o:p> </o:p>	<o:p> </o:p>	<o:p> </o:p>
pspecialty <o:p></o:p>	specialty_name<o:p> </o:p>	specialty_code<o:p> </o:p>	college_code<o:p> </o:p>	department_code<o:p> </o:p>
pclass<o:p> </o:p>	specialty_code<o:p> </o:p>	class_name<o:p> </o:p>	class_code <o:p></o:p>	<o:p> </o:p>

文件1：index.asp(主页面)

<%@ LANGUAGE="VBSCRIPT"%>

strPathInfo=Request.ServerVariables("PATH_INFO")

strPathInfo="http://"&Request.ServerVariables("SERVER_NAME")&

left(strPathInfo,InstrRev(strPathInfo,"/"))

set conn=Server.CreateObject("ADODB.connection")

conn.open"driver={SQL Server};server=JYZD-WMG;uid=sa;pwd=;

database=gzz_back;"

set Rscollege= Server.CreateObject("ADODB.Recordset")

Rscollege.Source ="SELECT DISTINCT college_name FROM dbo.pcollege"

Rscollege.activeconnection=conn

Rscollege.CursorType = 0

Rscollege.CursorLocation = 2

Rscollege.LockType = 3

Rscollege.Open()

arrcollege=rscollege.GetRows()

Rscollege.numRows = 0

set Recordset3 = Server.CreateObject("ADODB.Recordset")

Rsdepartment.Source ="SELECT department_name FROM dbo.pdepartment"

Rsdepartment.activeconnection=conn

Rsdepartment.CursorType = 0

Rsdepartment.CursorLocation = 2

Rsdepartment.LockType = 3

Rsdepartment.Open()

arrdepartment=Rsdepartment.GetRows()

Rsdepartment.numRows = 0

Rscollege.Close()

Rsdepartment.Close()

conn.close()

set Rscollege=nothing

set Rsdepartment=nothing

<!--

sub beginyear_onclick()

classfrm.endyear.value=classfrm.beginyear.value+1

end sub

-->

</script>

<html>

<head>

<title>用ASP和XML实现多表单域数据动态更新示例</title>

<!--

function SelectClass()

{

//清空班级表单

for(var i=classfrm.listclass.options.length-1;i>=0;--i)

{

classfrm.Listclass.options.remove(i);

}

var collegename=classfrm.listschool.options(classfrm.listschool.selectedIndex).value;

var departname=classfrm.listdepart.options(classfrm.listdepart.selectedIndex).value;

var oXMLDoc=new ActiveXObject('MSXML');

sURL='<%=strPathInfo%>XMLclass.asp?college='+collegename+'&

depart='+departname;

oXMLDoc.url=sURL;

var oRoot=oXMLDoc.root;

if(oRoot.children!=null)

{

for(var i=0;i<oRoot.children.length;++i)

{

oItem=oRoot.children.item(i);

sName=oItem.text;

var oOption=document.createElement('OPTION');

oOption.text=sName;

oOption.value=sName;

classfrm.listclass.options.add(oOption);

}

-->

</script>

</head>

<table width="80%" border="1" bordercolordark=darkgray bordercolorlight=aliceblue

height="210" align="center" >

<tr>

</td>

</tr>

<tr>

</td>

<%dim sumyear %>

<%sumyear=year(date)+1%>

<%sumyear=sumyear-1%>

<option value="<%=sumyear%>" selected><%=sumyear%></option>

<%for i=1 to 18 %>

<%sumyear=sumyear-1%>

<%next%>

</select>

至

<%sumyear=year(date)%>

<input name="classendyear" value="<%=sumyear+1%>" readonly >

年度

</select>

学期<br>

<br>

<%for i=lbound(arrpr1,2) to ubound(arrpr1,2)%>

<%next%>

</select>

学校

<%for i=lbound(arrpr3,2) to ubound(arrpr3,2)%>

<%next%>

</select>

系部<br> <br>

<!--

call chooseclass()

-->

</script>

班级</div>

</form>

</td>

</tr>

</table>

</div>

</body>

</html>

文件2：xmlclass.asp（动态数据查询，由主页面获得查询值）

<%@ LANGUAGE="VBSCRIPT" %>

collegename=trim(Request.QueryString("college"))

departmentname=trim(Request.QueryString("depart"))

set conn=Server.CreateObject("ADODB.connection")

conn.open "driver={SQL Server};server=JYZD-WMG;uid=sa;pwd=;

database=gzz_back;"

changstr="select class_name from pclass where specialty_code in ( select specialty_code

from pspecialty where college_code in ( select college_code from pcollege

where college_name='"&collegename&"') and department_code in ( select

department_code from pdepartment where department_name

='"&departmentname&"')) "

set Rsclass = Server.CreateObject("ADODB.Recordset")

Rsclass.Source =changstr

Rsclass.activeconnection=conn

Rsclass.CursorType = 0

Rsclass.CursorLocation = 2

Rsclass.LockType = 3

Rsclass.Open()

arrclass=recordset2.GetRows()

Rsclass.numRows = 0

<? xml version="1.0" encoding="gb2312" ?>

<%For i =LBound(arrclass,2) To UBound(arrclass,2)%>

<class>

<%=arrclass(0,i)%>

</class>

<%Next%>

</classes>

在index.asp中，当在listcollege或listdepart两个下拉列表中选择了相应的学校和系部后，触发selectclass函数，在此函数中通过ASP文件传值方式（如xmlclass?college=江阴高等技术学院&depart=电子工程系）向xmlclass.asp传递查询条件，然后由Rsclass记录集从服务器端获得符合条件的班级记录，并通过数组返送到客户端 listclass下拉列表。通过这种方式，从而在不刷新页面、只传递少量数据的情况下实现了客户端多表单域的数据动态更新。

利用ASP和XML实现客户端多表单域数据动态更新

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义