客戶端和服務器端語言混合使用兩例

隨著全球信息網應用的普及，越來越多的公司、個人希望通過此傳播媒介發展業務。同時，對于系統的智能化、人性化設計要求也與日上升，JavaScript和動態頁面語言的混合應用也因此得以廣泛推廣。

JavaScript 是一種腳本語言，此語言可以被嵌入 HTML 的文件之中。透過JavaScript 回應用戶所觸發的事件 (如：form對象的輸入和檢測) 而不用任何的網絡來回傳輸資料。當使用者輸入一項資料時，它不用經過傳給服務器端 (server) 處理，再傳回來的過程，便可直接被客戶端 (client) 的應用程序處理。

運行JavaScript的載體是客戶端，不但可以讓系統實時的與用戶進行交互，而且因為避免了網絡的傳輸，大大地加快運行速度和減輕服務器的負擔。而JavaScript令人著迷的地方是：通過語言的編寫，控制整個頁面當中的所有對象。它可以控制包括表單對象、頁面字體內容、圖片位置等屬性，使得頁面更為絢麗。

Web網頁具備強大的功能，在短短的幾年之間得以迅速的發展，動態網頁可以通過鏈接數據庫，使頁面內容根據用戶信息和數據庫內容，對其進行內容控制。但由于動態頁面語言是屬于服務器端（server）語言，每一次數據交換都必須經過網絡傳送、服務器計算、數據回傳三個步驟。因此，經常會出現由于網絡的關系導致數據傳送的延誤、出錯等現象。

為了使頁面的智能化得以進一步提高，頁面能夠根據用戶事件進行實時回應，將客戶端和服務器端的語言相結合成為了網絡語言編寫的新動向。

方法如下圖：

首先由服務器端動態頁面語言，如ASP、JSP等對數據進行記錄集的綁定，調出所有相關數據庫的內容。數據經過傳送后，暫存在JavaScript動態生成的數組當中。JavaScript根據用戶觸發的事件和信息，對數組中內容進行篩選后通過語言控制顯示在頁面中。

下面，筆者就以兩個例子說明JavaScript與ASP（VBScript）相結合的使用方法。

1 檢測網絡新用戶

在網絡應用中，用戶經常使用“注冊”這一功能，如電子郵箱、論壇用戶名等。如何使新注冊的用戶名不與已有的用戶名相沖突，并且實時地對用戶進行提示，避免提交后方可檢測的麻煩呢？這就需要將兩種語言相結合，相互補足。

具體操作步驟：

(1) 綁定記錄集，將數據庫中的所有用戶名進行調出

建立數據庫鏈接類型，通過SQL語句對數據中的“nname”（用戶名）字段內容進行綁定。綁定記錄集名為“R1”。

＜%set obj=server.CreateObject(\"ADODB.Connection\")

obj.ConnectionString=\"provider=Microsoft.jet.oledb.4.0;data source=\"server.mappath(\"/book.mdb\")

obj.open

set R1=server.CreateObject(\"ADODB.Recordset\")

ms=\"SELECT nnameFROM bpass \"

R1.open ms，obj，1%＞

(2) 建立JavaScript中的數組

由于用戶名的數量未知，因此建立動態數組“k”。

接下來，使用ASP語句對記錄集R1進行遍歷，將所有記錄集字段nname內容存放在數組當中。

以t作為標識，使新建一個數組單元便存放一個用戶名。

＜script language=\"javascript\"＞

var k = new Array();

＜%t=0

while (not R1.eof) %＞

k[＜%= t %＞] = new Array('＜%= R1(\"nname\") %＞')

＜% t=t+1

R1.movenext

wend%＞

(3) 檢測新用戶名

由用戶觸發事件，調用自定義函數。

把注冊新用戶名，即頁面中用戶名輸入框中的值（form1.textfield.value），跟所有數組單元中內容進行匹對。

若用戶名已存在，退出循環，并在指定位置當中顯示出錯提示，否則提示用戶名可用。

function s()

{for(i=1;i＜=＜%= R1.recordcount %＞;i++)

{

if (k[i-1]==form1.textfield.value)

{

document.getElementById(\"kk\").innerHTML=\"出錯，該用戶名已經被占用\"

break;}else{

document.getElementById(\"kk\").innerHTML=\"可用\"

}}}＜/script＞

2 二級級聯的下拉列表

表單中的下拉列表，可以讓用戶直觀、準確地選擇所需要的信息。可是，一旦數量較多時，逐一拉選檢查并非一個明智之舉。不但效率較低，而且用戶使用起來也顯得比較笨拙。

二級級聯的方法就是把所有的選項進行分類，讓用戶先選擇類型，然后再選擇具體目標。如對學校各位老師的姓名進行選擇時，因為人數較多，即使按姓名排列的方法也較費時間。使用二級級聯方法，可先按照各人所屬科室進行分組。用戶在使用的時候，首先在第一個下拉列表中選擇科室，第二個列表中立即刷新為所屬人員列表。這樣，使系統的利用效率得以大大地增強，對于用戶的使用也更具人性化。

由于所有人員資料已經全部綁定在記錄集并存放在JavaScript的動態數組中，當用戶重選所屬科組，瀏覽器也不需再經過服務器的數據傳輸，而直接在客戶端里便可以完成人員列表的更新，用戶能更加直觀、迅速、準確地選擇目標選項，這也是ASP和腳本語言相結合的優勢體現。

具體操作步驟：

(1) 綁定記錄集

將所有教師的姓名、科室取出，并綁定為記錄集。綁定方法與上例中的記錄集綁定方法一致，先建立數據庫的鏈接，再定義記錄集對象，最后執行SQL查詢語言“SELECT * from teachers”。

(2) 建立JavaScript中的二維動態數組

動態數組的建立方法與例一相同，不同之處在于本例中需要利用記錄集中的數據建立二維數組。如屬于筆者資料的二維數組內容為：subcat[177]=new Array(“計算機”，”李志宏”)。其一維內容“計算機”作為后面列表顯示內容的匹配條件，二維內容“李志宏”是作為第二列表的內容標簽和值。其中關鍵語句為二維數組的建立：

subcat[＜%= t %＞] = new Array('＜%= R2(\"tkeshi\") %＞'，'＜%= R2(\"teaname\") %＞')

(3) 人員列表更新函數

當用戶在列表一中選擇了科組后，觸發以下函數對人員列表內容進行更新：

function changeselect1(locationid)

{ document.form1.s2.length = 0;

document.form1.s2.options[0] = new Option('==請選擇=='，'');

for (i=0; i＜subcat.length; i++)

{if (subcat[i][0] == locationid)

{document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1]， subcat[i][1]);}

}

}

循環動態數組，將一維內容與列表一傳送的參數locationid進行匹配，利用“new Option”命令把二維內容添加至列表二中，并設為當前選項的值。這樣，通過用戶所選取的科組內容，經過循環，腳本函數可以自動地給列表二更新內容。而這一切，完全由客戶端完成，免去了對數據庫的多次調用。

由服務器端語言負責數據庫的調用，客戶端語言負責與用戶交互。因此系統可以自動地根據用戶的事件進行即時的反應或提醒，使系統顯得更加“人性化”。而現今網絡使用管理中，“智能化”、“高效率”是今后網絡編程發展的大趨勢。因此怎樣通過結合各種不同的網絡編程語言來進行優化網頁的使用管理已成為我們共同關注的話題，而JavaScript與ASP(VBScript)相結合的使用亦成為我們解決實際難題的主要方法。

——————————

作者簡介：李志宏(1981-)，廣州市人，于廣州第一商業中專學校任教師。主要研究方向：網頁制作、網站建設。