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

来源:互联网 发布:清歌五笔mac版 编辑:程序博客网 时间:2024/05/21 09:59
在基于Internet的学校学籍管理系统开发过程中,遇到这么个问题:如何实现客户端多个表单域之间的数据动态更新?如下图所示,在同一个客户端页面有三个下拉列表表单域ListCollege、ListDepart、ListClass,分别从SQLServer数据库服务器端获得学校名称、系部名称、班级名称,其中前两项数据量较小,而班级名称这一项有上百个记录。

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

windows 2000 server(IIS 5)

数据库

SQL Server 7.0

浏览器

Internet Explore 5.5

数据库名称

gzz_back

 





table名称

字段1

字段2

字段3

字段4

pcollege

college_name

college_code

 

 

pdepartment

department_name

department_code

 

 

pspecialty 

 specialty_name

specialty_code

college_code

department_code

pclass

specialty_code

class_name

class_code  

 

 文件1:index.asp(主页面)<!-- index.asp --><%@ LANGUAGE="VBSCRIPT"%><!--#include file="adovbs.inc" --><%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=connRscollege.CursorType = 0Rscollege.CursorLocation = 2Rscollege.LockType = 3Rscollege.Open()arrcollege=rscollege.GetRows()Rscollege.numRows = 0%><%set Recordset3 = Server.CreateObject("ADODB.Recordset")Rsdepartment.Source ="SELECT department_name FROM dbo.pdepartment"Rsdepartment.activeconnection=connRsdepartment.CursorType = 0Rsdepartment.CursorLocation = 2Rsdepartment.LockType = 3Rsdepartment.Open()arrdepartment=Rsdepartment.GetRows()Rsdepartment.numRows = 0%><%Rscollege.Close()Rsdepartment.Close()conn.close()set Rscollege=nothingset Rsdepartment=nothing%><script language="vbscript"><!--sub beginyear_onclick()classfrm.endyear.value=classfrm.beginyear.value+1end sub--></script><html><head><title>用ASP和XML实现多表单域数据动态更新示例</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script language="javascript"><!--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><body text="#000000" bgcolor="#FFFFD7"><div align="center"> <table width="80%" border="1" bordercolordark=darkgray bordercolorlight=aliceblue height="210" align="center" ><tr> <td colspan="2" height="4"> <div align="center"> <font size="5"><b>综合示例</b></font></div></td></tr><tr> <td width="145" height="186"> <div align="center"><font color="#000000">请选择 </font></div><p align="center"><font color="#000000">学年/学期/班级</font></p></td><td width="443" height="186" > <form name="classfrm" method="post" action="SearchPlan.asp"><div align="center"> <%dim sumyear %><%sumyear=year(date)+1%><select name="classbeginyear" size="1" ><option value="<%=sumyear%>" ><%=sumyear%></option><%sumyear=sumyear-1%><option value="<%=sumyear%>" selected><%=sumyear%></option><%for i=1 to 18 %><%sumyear=sumyear-1%><option value="<%=sumyear%>" ><%=sumyear%></option><%next%></select>至 <%sumyear=year(date)%><input name="classendyear" value="<%=sumyear+1%>" readonly >年度 <select name="classterm" size="1"><option value="1" selected>第一</option><option value="2">第二</option></select>学期<br><br><select name="classschool" id="classschool" onchange="chooseclass()"><%for i=lbound(arrpr1,2) to ubound(arrpr1,2)%><option value="<%=arrpr1(0,i)%>"><%=arrpr1(0,i)%></option><%next%></select>学校 <select name="classdepart" id="classdepart" onchange="chooseclass()"><%for i=lbound(arrpr3,2) to ubound(arrpr3,2)%><option value="<%=arrpr3(0,i)%>"><%=arrpr3(0,i)%></option><%next%></select>系部<br> <br><select name="classname" id="classname"> </select><script language="vbscript"><!--call chooseclass()--></script>班级</div><p align="center"> <input type="submit" name="Submit1" value="确定发送" onClick="searchclass"><input type="reset" name="reset1" value="重填"> </p></form></td></tr></table></div> </body></html>
文件2:xmlclass.asp(动态数据查询,由主页面获得查询值)<!-- 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 pcollegewhere college_name='"&collegename&"') and department_code in ( selectdepartment_code from pdepartment where department_name='"&departmentname&"')) "set Rsclass = Server.CreateObject("ADODB.Recordset")Rsclass.Source =changstrRsclass.activeconnection=connRsclass.CursorType = 0Rsclass.CursorLocation = 2Rsclass.LockType = 3Rsclass.Open()arrclass=recordset2.GetRows()Rsclass.numRows = 0%><? xml version="1.0" encoding="gb2312" ?><classes><%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下拉列表。通过这种方式,从而在不刷新页面、只传递少量数据的情况下实现了客户端多表单域的数据动态更新。