利用ASP和XML实现客户端多表单域数据动态更新
时间：2007-11-16 来源：xiang588
| 在基于Internet的学校学籍管理系统开发过程中，遇到这么个问题：如何实现客户端多个表单域之间的数据动态更新？如下图所示，在同一个客户端页面有三个下拉列表表单域ListCollege、ListDepart、ListClass，分别从SQL Server数据库服务器端获得学校名称、系部名称、班级名称，其中前两项数据量较小，而班级名称这一项有上百个记录。 |
| 从数据查询速度和程序易用性角度考虑，本页面载入时应该有尽量少的数据量，而且要能在一个查询页面中完成查询条件的选择。简单地说，就是要实现在同一个客户端页面中，在前两个下拉列表中选择了相应的学校名称和系部名称后，在第三个下拉列表（班级）中只有符合前两项条件的若干个记录以供客户选择。但是在不刷新本页面的情况下，由于在客户端必须通过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组件的结合，可以很方便的实现这个功能。特点就是页面不用刷新，数据传输实时动态，数据量少，不用把大量的数据传到客户端，速度相对较快。 |
| 下面就通过实例介绍实现客户端多表单域动态数据更新的第三种方法。 |
| 开发环境如下,经调试成功通过： |
|
| 文件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=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 |
| %> |
| <html> |
| <head> |
| <title>用ASP和XML实现多表单域数据动态更新示例</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> |
| </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> |
| 班级</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 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" ?> |
| <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下拉列表。通过这种方式，从而在不刷新页面、只传递少量数据的情况下实现了客户端多表单域的数据动态更新。 |
相关阅读 更多 +
