利用ASP和XML實現(xiàn)客戶端多表單域數(shù)據(jù)動態(tài)更新
系統(tǒng)
1681 0
|
在基于Internet 的學(xué)校學(xué)籍管理系統(tǒng)開發(fā)過程中，遇到這么個問題：如何實現(xiàn)客戶端多個表單域之間的數(shù)據(jù)動態(tài)更新？如下圖所示，在同一個客戶端頁面有三個下拉列表表單域 ListCollege、ListDepart、ListClass，分別從SQL Server數(shù)據(jù)庫服務(wù)器端獲得學(xué)校名稱、系部名稱、班級名稱，其中前兩項數(shù)據(jù)量較小，而班級名稱這一項有上百個記錄。
|
|
<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>
|
|
從數(shù)據(jù)查詢速度和程序易用性角度考慮，本頁面載入時應(yīng)該有盡量少的數(shù)據(jù)量，而且要能在一個查詢頁面中完成查詢條件的選 擇。簡單地說，就是要實現(xiàn)在同一個客戶端頁面中，在前兩個下拉列表中選擇了相應(yīng)的學(xué)校名稱和系部名稱后，在第三個下拉列表（班級）中只有符合前兩項條件的 若干個記錄以供客戶選擇。但是在不刷新本頁面的情況下，由于在客戶端必須通過Submit才能和服務(wù)器端取得聯(lián)系并獲得數(shù)據(jù)，所以很難實現(xiàn)。
|
|
在頁面載入時將全部數(shù)據(jù)（如班級名稱）通過記錄集全部放到相應(yīng)的數(shù)組ArrClass中。當(dāng)用戶選擇了相應(yīng)的學(xué)校或系部 后，將其值放到相應(yīng)變量College或Department中，同時通過前兩個下拉列表框的onChange事件調(diào)用客戶端函數(shù) SelectClass。這個函數(shù)的功能就是根據(jù)變量的值在數(shù)組中依次查找到符合條件的數(shù)組元素，將其作為下拉列表ListClass的Option項。 通過這個方法，可以在不刷新頁面、不重復(fù)傳遞大量數(shù)據(jù)的情況下實現(xiàn)客戶端動態(tài)數(shù)據(jù)更新。但是，其缺點是顯然的，那就是當(dāng)打開頁面時用戶得有足夠的耐心去忍 受通過緩慢的網(wǎng)絡(luò)從服務(wù)器獲得大量查詢數(shù)據(jù)（如有上百條以上記錄）。
|
|
微軟已經(jīng)推出了其asp.net技術(shù)，通過其能很方便的實現(xiàn)這個功能。但是asp.net的運(yùn)行解釋基礎(chǔ)不再是asp.dll,而是.net平臺（測試版），111M的asp.net平臺相信還不是客戶的首選。
|
|
通過ASP和XML組件的結(jié)合，可以很方便的實現(xiàn)這個功能。特點就是頁面不用刷新，數(shù)據(jù)傳輸實時動態(tài)，數(shù)據(jù)量少，不用把大量的數(shù)據(jù)傳到客戶端，速度相對較快。
|
|
下面就通過實例介紹實現(xiàn)客戶端多表單域動態(tài)數(shù)據(jù)更新的第三種方法。
|
|
開發(fā)環(huán)境如下,經(jīng)調(diào)試成功通過：
|
|
WWW
服務(wù)器
<o:p> </o:p>
|
windows 2000 server(IIS 5)<o:p> </o:p>
|
數(shù)據(jù)庫
<o:p> </o:p>
|
SQL Server 7.0<o:p> </o:p>
|
|
瀏覽器
<o:p> </o:p>
|
Internet Explore 5.5<o:p> </o:p>
|
數(shù)據(jù)庫名稱
<o:p> </o:p>
|
gzz_back<o:p> </o:p>
|
|
<o:p>?</o:p>
數(shù)
據(jù)
庫
結(jié)
構(gòu)
<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>
|
|
|
<%@ 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=;
|
|
set Rscollege= Server.CreateObject("ADODB.Recordset")
|
|
Rscollege.Source ="SELECT DISTINCT college_name FROM dbo.pcollege"
|
|
Rscollege.activeconnection=conn
|
|
Rscollege.CursorLocation = 2
|
|
arrcollege=rscollege.GetRows()
|
|
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
|
|
arrdepartment=Rsdepartment.GetRows()
|
|
<script language="vbscript">
|
|
classfrm.endyear.value=classfrm.beginyear.value+1
|
|
<title>用ASP和XML實現(xiàn)多表單域數(shù)據(jù)動態(tài)更新示例</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
|
|
<script language="javascript">
|
|
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+'&
|
|
for(var i=0;i<oRoot.children.length;++i)
|
|
oItem=oRoot.children.item(i);
|
|
var oOption=document.createElement('OPTION');
|
|
classfrm.listclass.options.add(oOption);
|
|
<body text="#000000" bgcolor="#FFFFD7">
|
|
<table width="80%" border="1" bordercolordark=darkgray bordercolorlight=aliceblue
|
|
height="210" align="center" >
|
|
<td colspan="2" height="4">
|
|
<div align="center"> <font size="5"><b>綜合示例</b></font></div>
|
|
<td width="145" height="186">
|
|
<div align="center"><font color="#000000">請選擇 </font></div>
|
|
<p align="center"><font color="#000000">學(xué)年/學(xué)期/班級</font></p>
|
|
<td width="443" height="186" >
|
|
<form name="classfrm" method="post" action="SearchPlan.asp">
|
|
<select name="classbeginyear" size="1" >
|
|
<option value="<%=sumyear%>" ><%=sumyear%></option>
|
|
<option value="<%=sumyear%>" selected><%=sumyear%></option>
|
|
<option value="<%=sumyear%>" ><%=sumyear%></option>
|
|
<input name="classendyear" value="<%=sumyear+1%>" readonly >
|
|
<select name="classterm" size="1">
|
|
<option value="1" selected>第一</option>
|
|
<option value="2">第二</option>
|
|
<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>
|
|
<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>
|
|
<select name="classname" id="classname"> </select>
|
|
<script language="vbscript">
|
|
<input type="submit" name="Submit1" value="確定發(fā)送" onClick="searchclass">
|
|
<input type="reset" name="reset1" value="重填"> </p>
|
|
文件2：xmlclass.asp（動態(tài)數(shù)據(jù)查詢，由主頁面獲得查詢值）
|
|
<%@ 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=;
|
|
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.activeconnection=conn
|
|
Rsclass.CursorLocation = 2
|
|
arrclass=recordset2.GetRows()
|
|
<? xml version="1.0" encoding="gb2312" ?>
|
|
<%For i =LBound(arrclass,2) To UBound(arrclass,2)%>
|
在index.asp中，當(dāng)在listcollege或listdepart兩個下拉列表中選擇了相應(yīng)的學(xué)校和系部后， 觸發(fā)selectclass函數(shù)，在此函數(shù)中通過ASP文件傳值方式（如xmlclass?college=江陰高等技術(shù)學(xué)院&depart=電 子工程系）向xmlclass.asp傳遞查詢條件，然后由Rsclass記錄集從服務(wù)器端獲得符合條件的班級記錄，并通過數(shù)組返送到客戶端 listclass下拉列表。通過這種方式，從而在不刷新頁面、只傳遞少量數(shù)據(jù)的情況下實現(xiàn)了客戶端多表單域的數(shù)據(jù)動態(tài)更新。
利用ASP和XML實現(xiàn)客戶端多表單域數(shù)據(jù)動態(tài)更新
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
