基于JSP技術(shù)的在線考試系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

1、基于JSP技術(shù)的在線考試系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) -高成珍071202006摘要：隨著Internet的迅速發(fā)展和廣泛普及，數(shù)字化教學(xué)作為新型的辦學(xué)模式已逐步走進(jìn)了高校，它們具有對(duì)于教育、教學(xué)過程來說極為寶貴的特性，可以為新型辦學(xué)模式的建構(gòu)提供理想的環(huán)境。基于Web網(wǎng)絡(luò)考試與無紙化辦公一樣已成為大勢(shì)所趨。本文在分析了考試系統(tǒng)的各個(gè)環(huán)節(jié)后，利用當(dāng)今流行的程序開發(fā)集成工具M(jìn)yEclipse 開發(fā)基于JSP技術(shù)的在線考試系統(tǒng)。該考試系統(tǒng)采用JSP + Servlet + JDBC +SqlServer2000方式實(shí)現(xiàn)。關(guān)鍵詞：JSP JDBC 在線考試 登錄系統(tǒng) MVC模式一、引言傳統(tǒng)的考試方式是教師出題,

2、學(xué)生在指定的時(shí)間和地點(diǎn)答題,然后教師改卷的模式,教師負(fù)擔(dān)重,考試成本高。隨著Internet技術(shù)的發(fā)展使得考試的手段和方式發(fā)生了根本性的變化。Internet的開放性和分布性的特點(diǎn)以及基于Internet的巨大計(jì)算能力使得考試突破了時(shí)間和空間的限制，它不僅為老師減輕了評(píng)卷，監(jiān)考之苦，也為學(xué)生提供了輕松的考試環(huán)境，便于學(xué)生發(fā)揮出最佳的水平并通過網(wǎng)上評(píng)卷能及時(shí)反饋學(xué)生的掌握情況。二、需求分析網(wǎng)絡(luò)考試系統(tǒng)是以網(wǎng)絡(luò)為載體，為學(xué)生提供考試服務(wù)，并能自動(dòng)判卷為老師提供考試成績(jī)作為教學(xué)參考的軟件系統(tǒng)。本考試系統(tǒng)設(shè)計(jì)為在高校中使用，系統(tǒng)主要針對(duì)教學(xué)秘書（管理員）、任課教師及學(xué)生，能結(jié)合高校的院系、專業(yè)科目等考

3、試屬性進(jìn)行管理。主要包含三種登錄角色即管理員、教師和學(xué)生。1、管理員可以進(jìn)行系統(tǒng)維護(hù)，主要用來設(shè)置系統(tǒng)的一些初始化信息，如添加課程，教師，學(xué)生，班級(jí)，為老師分配課程等。維護(hù)包括添加、刪除、修改三種基本的操作。管理員還兼有老師和學(xué)生的功能，可以查詢有關(guān)學(xué)生和老師的相關(guān)信息是最大權(quán)限的用戶，擁有系統(tǒng)的所有功能的權(quán)限。 2、教師教師登錄系統(tǒng)后，教師可以從自己所教課程中選擇一門進(jìn)行考試試題錄入，并可以對(duì)自己錄入的試題進(jìn)行修改和刪除等操作，但不能修改其他老師關(guān)于同一門課程的相關(guān)試題。并可以添加所教課程的學(xué)生和查詢自己所教班級(jí)學(xué)生的考試成績(jī)信息。3、學(xué)生學(xué)生登錄后可以參加考試，選擇一門課程后，系統(tǒng)會(huì)自動(dòng)的

4、抽出一套試題，開始考試后，系統(tǒng)進(jìn)行倒計(jì)時(shí)，在規(guī)定的時(shí)間內(nèi)考生如果沒有交卷，系統(tǒng)會(huì)自動(dòng)幫他交卷，并在考試結(jié)束、自動(dòng)評(píng)卷后，學(xué)生能及時(shí)的查看到自己的考試成績(jī)和答題情況，并可以查詢自己以往的考試成績(jī)信息。二、總體設(shè)計(jì)目前,用于生成動(dòng)態(tài)網(wǎng)頁(yè)較為流行的技術(shù)有Microsoft的ASP、Text的PHP和Sun 公司的JSP。ASP只能工作在微軟的IIS和PWS服務(wù)器上,一些天生的缺陷使得它們的使用受到了一定的制約,PHP沒有提供統(tǒng)一的數(shù)據(jù)庫(kù)連接的接口標(biāo)準(zhǔn)而且它的運(yùn)行環(huán)境相對(duì)復(fù)雜,同時(shí)PHP支持的平臺(tái)也非常有限。而JSP是一種完全與平臺(tái)無關(guān)的新技術(shù),它集極高的運(yùn)行效率,較短的開發(fā)周期,超強(qiáng)的擴(kuò)展能力,完全

5、開放的技術(shù)標(biāo)準(zhǔn)等眾多特性于一身,同時(shí)它能實(shí)現(xiàn)WEB 的動(dòng)態(tài)內(nèi)容與顯示相分離。故本考試系統(tǒng)采用了JSP + Servlet + JDBC +SqlServer2000的方式實(shí)現(xiàn),即MVC模式（Model+View+Controller）。其中SqlServer2000 用于數(shù)據(jù)存儲(chǔ), JDBC用于連接數(shù)據(jù)庫(kù)并對(duì)數(shù)據(jù)庫(kù)實(shí)現(xiàn)各種操作, Servlet作為控制器用于處理過程控制, JSP作為界面層用于頁(yè)面顯示部分。相對(duì)于傳統(tǒng)的C/S（Client/Server客戶端/服務(wù)器）模式的考試系統(tǒng)，B/S（Browser/Server瀏覽器/服務(wù)器）模式具有更高的安全性和便捷性，Web網(wǎng)絡(luò)考試即可以在本地進(jìn)行

6、，也可以在異地進(jìn)行，因此本系統(tǒng)采用B /S模式。主要采用了如下的開發(fā)工具：Web服務(wù)器中間件：Apache-Tomcat6.0Java JDK: J2SDK 1.5數(shù)據(jù)庫(kù)：SqlServer2000集成開發(fā)工具：MyEclipse 7.0網(wǎng)頁(yè)制作工具：DreamWeaver CS4瀏覽器：Internet Explore7.0其總體軟件體系結(jié)構(gòu)如下圖所示： Internet ExplorerJavaBeanServletDBConnJSPSqlServer 2000 客戶端 中間層 數(shù)據(jù)層 在線考試系統(tǒng)的軟件體系結(jié)構(gòu)圖客戶端通過瀏覽器向Tomcat服務(wù)器發(fā)送請(qǐng)求，無論是JSP，還是JavaBe

7、an、Servlet，當(dāng)需要訪問數(shù)據(jù)庫(kù)時(shí)，都通過一個(gè)統(tǒng)一的接口組件DBConn來訪問。這樣的結(jié)構(gòu)程序?qū)哟涡员容^清晰，比用純JSP實(shí)現(xiàn)的程序可讀性和可復(fù)用性都會(huì)更好。在線考試系統(tǒng)教師修改密碼試題管理查詢系統(tǒng)學(xué)生管理學(xué)生修改密碼查詢系統(tǒng)在線考試網(wǎng)上評(píng)卷各角色的功能圖如下： 管理員教師管理課程管理學(xué)生管理查詢系統(tǒng)為教師分配課程為班級(jí)開設(shè)課程班級(jí)管理修改密碼在線考試系統(tǒng)各角色功能圖雖然各個(gè)角色都有查詢系統(tǒng)功能，但不同的角色的人查詢的權(quán)限不同！當(dāng)然各系統(tǒng)都有登陸模塊四、詳細(xì)設(shè)計(jì)41數(shù)據(jù)庫(kù)設(shè)計(jì)41.1 ER圖在線考試系統(tǒng)ER圖具體分析如下圖所示： 試題教師課程教師教師教師管理員教師 班級(jí)教師學(xué)生教師在線考

8、試系統(tǒng)ER圖ER圖中幾點(diǎn)說明：一個(gè)教師可以較多門課程，一門課程也可以由多位老師來教，課程和老師之間是多對(duì)多的關(guān)系；同一專業(yè)不同方向的學(xué)生所在班級(jí)不同，所開設(shè)的課程也有所不同；一個(gè)老師可以教多個(gè)班級(jí)，一個(gè)班級(jí)由多位老師來教；一個(gè)班級(jí)每學(xué)期開設(shè)多門課程，一門課程可由多個(gè)班級(jí)來上，因此課程和班級(jí)之間也存在存在多對(duì)多的關(guān)系；41 2 數(shù)據(jù)庫(kù)中表的設(shè)計(jì)：數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)中ER模型向關(guān)系模型轉(zhuǎn)換的規(guī)則：一個(gè)實(shí)體類型轉(zhuǎn)換成一個(gè)關(guān)系模式，實(shí)體的屬性就是關(guān)系的屬性，實(shí)體的碼就是關(guān)系的碼。一個(gè)1:1聯(lián)系可以轉(zhuǎn)化為一個(gè)獨(dú)立的關(guān)系模式，也可以與聯(lián)系的任意一端實(shí)體所對(duì)應(yīng)的關(guān)系模式合并。一個(gè)1:n聯(lián)系可以轉(zhuǎn)換為一個(gè)獨(dú)立

9、的關(guān)系模式，也可以與聯(lián)系的n端實(shí)體所對(duì)應(yīng)的關(guān)系模式合并。一個(gè)n:m聯(lián)系轉(zhuǎn)化為一個(gè)關(guān)系模式。與該聯(lián)系相連的各實(shí)體的碼以及聯(lián)系本身的屬性均轉(zhuǎn)換為關(guān)系的屬性，而關(guān)系的碼為各實(shí)體碼的組合。根據(jù)上述轉(zhuǎn)換規(guī)則，可得到如下數(shù)據(jù)表：管理員表（Adminstrator）字段名類型說明備注AIDINT管理員ID號(hào)主鍵，自增，非空A_NameVARCHAR管理員姓名A_PsdVARCHAR管理員密碼教師表（Teacher）字段名類型說明備注T_NOVARCHAR教工號(hào)主鍵，非空T_NameVARCHAR教師姓名T_PsdVARCHAR教師密碼T_MajorVARCHAR教師專業(yè)課程表（Course）字段名類型說明備

10、注C_NOVARCHAR課程號(hào)主鍵，非空C_NameVARCHAR課程名教師課程關(guān)系表（Course_Teacher）字段名類型說明備注T_NOVARCHAE教工號(hào)外鍵，非空C_NOVARCHAE課程號(hào)外鍵，非空班級(jí)表（Class）字段名類型說明備注Class_NOVARCHAR班級(jí)號(hào)主鍵，非空Class_NameVARCHAR班級(jí)名Class_MajorVARCHAR所屬專業(yè)班級(jí)課程表（Class_Course）字段名類型說明備注Class_NOVARCHAR班級(jí)號(hào)外鍵，非空C_NOVARCHAR課程號(hào)外鍵，非空試題表（Test01）（以選擇題為例）字段名類型說明備注Test01_NOINT

11、題號(hào)主鍵，遞增，非空Test01_ContentVARCHAR題干Test01_PointVARCHAR知識(shí)點(diǎn)Test01_ScoreVARCHAR分值Option_AVARCHAR選項(xiàng)AOption_BVARCHAR選項(xiàng)BOption_CVARCHAR選項(xiàng)COption_DVARCHAR選項(xiàng)DTest01_AnswerVARCHAR答案C_NOVARCHAR所屬課程號(hào)說明：為了使系統(tǒng)評(píng)卷方便，準(zhǔn)確，快速，本系統(tǒng)所包含的試題類型僅為單選，判斷，填空。由于不同題型的試題選項(xiàng)個(gè)數(shù)不同，因此，將不同類型的試題放在不同的表中。學(xué)生表字段名類型說明備注S_NOVARCHAR學(xué)號(hào)主鍵，非空S_NameVA

12、RCHAR學(xué)生姓名S_PsdVARCHAR學(xué)生密碼S_MajorVARCHAR學(xué)生專業(yè)S_ClassVARCHAR學(xué)生班級(jí)學(xué)生成績(jī)表（Student_Score）字段名類型說明備注S_NOVARCHAR學(xué)號(hào)外鍵，非空C_NOVARCHAR課程號(hào)外鍵，非空MarkFLOAT成績(jī)4.2 模塊算法4.2.1登陸模塊該模塊包括index.jsp文件。如果用戶要使用為注冊(cè)用戶提供的功能，用戶只要輸入用戶名、密碼、學(xué)者登陸類型（管理員、教師、學(xué)生）就可以了。若用戶輸入的以上兩項(xiàng)與數(shù)據(jù)庫(kù)中相應(yīng)表保存的相符，則表明用戶登錄成功，可以開放全部前相應(yīng)的模塊；如果不符，則登錄失敗。模塊執(zhí)行流程如下圖4-2-1所示。

13、原代碼參見附錄B。YesYesNoNoNo按照用戶名查詢NoYes提示密碼錯(cuò)誤登錄信息錄入接收登錄信息用戶名、密碼為空？提示用戶不存在已 登 錄用戶已存在嗎口令正確嗎？圖4-2-1 用戶登錄模塊執(zhí)行流程提示用戶名或密碼不能為空注：在錄入登陸信息是可以登陸類型，有教師。4.2.2 在線考試模塊（學(xué)生使用） 該模塊模塊在以學(xué)生方式登陸后跳轉(zhuǎn)：在此模塊中包含查詢成績(jī)、考試、自動(dòng)判卷等模塊。進(jìn)入在線考試系統(tǒng)。在線考試試是有時(shí)間限定的,學(xué)生要先登入自己的用戶，用戶可以查詢成績(jī)、修改密碼，再進(jìn)行在線考試。一旦開始在線考試后，系統(tǒng)就自動(dòng)開始計(jì)時(shí)。時(shí)間到會(huì)自動(dòng)交卷，然后進(jìn)入判卷系統(tǒng)。考試過程中學(xué)生可以不按題目

14、順序答題。具體流程如4-2-2所示返回NoNoYesNo學(xué)生登錄進(jìn)入考場(chǎng)自動(dòng)交卷時(shí)間結(jié)束？考試退出考場(chǎng)自動(dòng)閱卷顯示成績(jī)交卷？交卷？圖4-2-2在線考試流程圖查詢成績(jī)4.2.3 出題模塊（教師使用）1試卷管理模塊 教師登陸后，可以進(jìn)行，學(xué)生管理，查詢所有參考學(xué)生成績(jī)，教師用戶密碼試卷管理模塊主要是對(duì)試卷進(jìn)行添加、刪除、修改。添加了試卷后可以從題庫(kù)中加入各種題型。1試卷管理功能模塊圖試 卷 管 理添 加 試 卷刪 除 試 卷修 改 試 卷 2、題庫(kù)管理模塊2.1題庫(kù)管理功能模塊圖題庫(kù)管理包括判斷題管理、填空題管理、選擇題管理。授課教師可以通過題庫(kù)管理對(duì)各種類型的試題進(jìn)行添加、刪除、修改以及查詢。題

15、庫(kù)管理功能模塊圖如圖4-2所示，由于各種類型試題的管理功能均類似，這里僅以判斷題管理為例進(jìn)行介紹。判斷題管理模塊包括的操作有：添加判斷題、刪除判斷題、修改判斷題和查找判斷題,有關(guān)判斷題管理模塊操作的主要源代碼參見附錄C。判斷題管理多選題管理填空題管理題庫(kù)管理圖4-2-3-1 題庫(kù)管理功能模塊圖 2判斷題管理模塊頁(yè)面流程(圖4-2-3-2)返回圖4-2-3-2判斷題管理頁(yè)面流程typ.asp type_1.aspType-1-dell.aspPtype1.asp查找判斷題學(xué)生信息管理模塊學(xué)生管理模塊主要是對(duì)學(xué)生進(jìn)行查詢、刪除，可以對(duì)學(xué)生的成績(jī)情況進(jìn)行查看。學(xué)生信息管理模塊圖4.2.4 系統(tǒng)維護(hù)模

16、塊（管理員模塊）五、界面和代碼設(shè)計(jì)由于時(shí)間關(guān)系，這一部分還未開發(fā)，在此省略。六、論文總結(jié)在線考試系統(tǒng)是網(wǎng)絡(luò)教育的重要組成部分，隨著Internet的迅速發(fā)展，基于Web的網(wǎng)絡(luò)考試系統(tǒng)將是今后考試系統(tǒng)設(shè)計(jì)的必然趨勢(shì)，本系統(tǒng)是基于JSP+Servlet+JDBC+SqlServer2000技術(shù)，采用B/S模式開發(fā)的網(wǎng)絡(luò)考試系統(tǒng)，基本滿足了在線考試的需求，可以充分發(fā)揮網(wǎng)絡(luò)的優(yōu)勢(shì)，建立大型、安全、共享的題庫(kù)和實(shí)現(xiàn)隨時(shí)隨地地考試，從而減輕教師的負(fù)擔(dān)，提高課堂教學(xué)質(zhì)量，具有較好的擴(kuò)展性，跨平臺(tái)性和可重用性。但是在本文所設(shè)計(jì)的考試系統(tǒng)中，對(duì)部分題型能很好地實(shí)現(xiàn)，比如選擇題、填空題、判斷題，但是對(duì)其他題型還有

17、所欠缺，無法覆蓋所有題型。總之，需要改進(jìn)的地方可能在使用過程中會(huì)顯露更多，需要進(jìn)一步努力完善。參考文獻(xiàn) 1 吳其慶. JSP編程思想與實(shí)踐M . 北京:冶金工業(yè)出版社, 2003 2 鄧子云.張賜. JSP網(wǎng)路編程從基礎(chǔ)到實(shí)踐M . 北京:電子工業(yè)出版社, 2006 3 飛思科技產(chǎn)品研發(fā)中心. JSP應(yīng)用開發(fā)詳解M . 北京:電子工業(yè)出版社, 2000 4 劉曉華.陳亞強(qiáng)等編著.J2EE 應(yīng)用開發(fā)詳解.電子版.2000 年8 月. 5胡文生.基于JSP技術(shù)的在線考試系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn) D 貴州商業(yè)高等?？茖W(xué)校2008 6張愛文。.基于JSP的在線考試系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn) D 黑龍江工程學(xué)院2009.

18、5 7薩師煊。王珊。數(shù)據(jù)庫(kù)系統(tǒng)概論 M 黑龍江工程學(xué)院2009.5附錄資料：從 XML 生成可與 Ajax 共同使用的 JSON時(shí)下，非常流行使用 JavaScript 代碼為數(shù)據(jù)驅(qū)動(dòng)的 Web 應(yīng)用程序添加互動(dòng)性。若能將數(shù)據(jù)編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過 JavaScript 語(yǔ)言使用它。通過本文，發(fā)掘使用 XSLT V2 從 XML 數(shù)據(jù)生成 JSON 的幾種不同方法。幾年前，許多開發(fā)人員很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于標(biāo)記的語(yǔ)言?，F(xiàn)在，Asynchronous Ja

19、vaScript and XML（AJAX）成了新的熱點(diǎn)，人們又將目光轉(zhuǎn)向了使用 JavaScript 代碼的數(shù)據(jù)驅(qū)動(dòng)的富 Internet 應(yīng)用程序。但是開發(fā)人員是否已經(jīng)消除了 XML 和這一新技術(shù)之間的鴻溝呢？當(dāng)然，您可以在 Web 客戶機(jī)中使用 XML 解析器來讀取數(shù)據(jù)，但這種做法會(huì)帶來兩個(gè)問題。第一，出于安全方面的原因，XML 數(shù)據(jù)只能從與此頁(yè)面相同的那個(gè)域中讀取。這雖然不是什么大的限制因素，但它的確會(huì)引起部署方面的問題，還會(huì)阻礙 DHTML 小部件的創(chuàng)建。第二，讀取和解析 XML 會(huì)非常慢。另一種做法是讓服務(wù)器執(zhí)行 XML 的解析工作，方法是設(shè)置服務(wù)器，使之向?yàn)g覽器發(fā)送以 JavaS

20、cript 代碼或時(shí)下流行的 JavaScript Object Notation（JSON）編碼的數(shù)據(jù)。本文將展示如下三種使用 XSLT V2 語(yǔ)言和 Saxon XSLT V2 處理器從 XML 數(shù)據(jù)生成 JSON 的技巧： 簡(jiǎn)單編碼 通過函數(shù)調(diào)用加載數(shù)據(jù) 編碼對(duì)象 JSON 簡(jiǎn)介要學(xué)習(xí)如何將數(shù)據(jù)編碼成 JSON（它只是 JavaScript 的一個(gè)子集），最好的方法是從數(shù)據(jù)開始。清單 1 顯示了書籍列表的一個(gè)示例 XML 數(shù)據(jù)集。清單 1. 基本的圖形化圖書館 Code Generation in Action JackHerrington Manning PHP Hacks JackH

21、errington OReilly Podcasting Hacks JackHerrington OReilly 這個(gè)數(shù)據(jù)集很簡(jiǎn)單，只包含三本書，每本書都具有惟一的 ID、書名、作者姓名及出版商的名字。（沒錯(cuò)，我只選擇了我自己的書作為數(shù)據(jù)集，但能怨我嗎？這些書實(shí)在是不可多得的節(jié)日和生日禮物。）清單 2 顯示了這些數(shù)據(jù)在 JSON 中的效果。清單 2. JSON 中的示例數(shù)據(jù)集 id: 1, title: Code Generation in Action, first: Jack, last: Herrington, publisher: Manning , . 方括號(hào) () 表明這是一個(gè)數(shù)

22、組。大括號(hào) () 則表明這是一個(gè)散列表，該散列表由一組名稱和值對(duì)組成。在本例中，我創(chuàng)建了一個(gè)散列表的數(shù)組 用來存儲(chǔ)這類結(jié)構(gòu)式數(shù)據(jù)的一種常見方法。另外一點(diǎn)值得注意的是字符串是通過單引號(hào)或雙引號(hào)被編碼的。所以，如果我想用單引號(hào)編碼 OReilly，我就必須使用反斜杠對(duì)它進(jìn)行轉(zhuǎn)義：OReilly。 這讓我編寫的這個(gè) XSLT 樣式表更為有趣了一些。我并未在本例中放上任何日期，但您也可以通過如下兩種方法來編碼日期。第一種方法是將日期作為字符串，該字符串必須在后面被解析。第二種方法是將日期作為一個(gè)對(duì)象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )這

23、段代碼將 publishdate 的值設(shè)置為6/16/2006 5:45:00 p.m.。簡(jiǎn)單編碼接下來我將陸續(xù)介紹 JSON 編碼的幾種技巧。第一種也是其中最簡(jiǎn)單的一種，此樣式表如 清單 3 所示。清單 3. simple.xsl 樣式表 var g_books = 1, id: ,name: ,first: ,last: ,publisher: ;要理解此樣式表，不妨先來看一下 清單 4 所示的輸出。清單 4. simple.xsl 的輸出var g_books = id: 1,name: Code Generation in Action,first: Jack,last: Herrin

24、gton,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly;這里，我將名為 g_books 的變量設(shè)置為一個(gè)包含三個(gè)散列表的數(shù)組，每個(gè)散列表包含關(guān)于該書的信息。再回過頭來看看 清單 3，您會(huì)發(fā)現(xiàn)第一個(gè)模板匹配 / 路徑，它也是首先應(yīng)用到輸入數(shù)據(jù)集的模板，該模板使用 for-each 循環(huán)來遍歷每本書。之后，它使用

25、 標(biāo)記來將文本從該數(shù)據(jù)輸出到 JavaScript 輸出代碼。對(duì)于字符串，我使用名為 js:escape() 的定制函數(shù)，它在模板之前定義。該函數(shù)使用一個(gè)正則表達(dá)式將一個(gè)單引號(hào)標(biāo)記更改為帶有反斜杠的單引號(hào)標(biāo)記。最后一個(gè)重要的元素是 標(biāo)記，它告知處理器要輸出的是文本而不是 XML。要檢驗(yàn)此過程是否可以正常工作，我加入了一個(gè) simple .html 文件，該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個(gè) HTML 文件如 清單 5 所示。清單 5. simple.html 文件Simple JS loaderdocument.write( Found +g_books.le

26、ngth+ books );.html 文件使用 標(biāo)記簡(jiǎn)單地加載已編碼了的 JavaScript 代碼。之后，第二個(gè) 標(biāo)記將數(shù)組的長(zhǎng)度寫出到瀏覽器頁(yè)面，如 圖 1 所示。圖 1. simple.html 的輸出好了！數(shù)據(jù)文件包含三本書，相應(yīng)的 JavaScript 文件也包含三本書。它真的可以工作！通過函數(shù)加載上述第一個(gè)示例很簡(jiǎn)單，而且在大多數(shù)情況下可以發(fā)揮其作用，但它存在一些問題。第一個(gè)問題是對(duì)于數(shù)據(jù)何時(shí)被加載沒有任何提示。如果數(shù)據(jù)是像頁(yè)面那樣被靜態(tài)加載的，這不成問題。但是如果頁(yè)面動(dòng)態(tài)創(chuàng)建了一個(gè) 標(biāo)記來按需加載數(shù)據(jù)，那么就很有必要知道 標(biāo)記是何時(shí)完成的。實(shí)現(xiàn)此功能的最好的方法是讓編碼了的數(shù)據(jù)

27、調(diào)用一個(gè) JavaScript 函數(shù)，而不是只設(shè)置數(shù)據(jù)。這個(gè)概念很重要，所以我將花一些時(shí)間來介紹一下為什么您必須要通過動(dòng)態(tài)生成的 標(biāo)記來加載數(shù)據(jù)。頁(yè)面加載后，從服務(wù)器獲得數(shù)據(jù)是 Web 2.0 的核心功能。一種方法是使用 AJAX 機(jī)制通過到服務(wù)器的調(diào)用來加載 XML。然而，出于安全性的原因，AJAX 機(jī)制只限于從單一域獲取數(shù)據(jù)。這在大多數(shù)情況下都沒有問題，但有時(shí)，您可能需要 JavaScript 代碼運(yùn)行在他人的頁(yè)面上（例如，Google Maps）。在這種情況下從服務(wù)器獲得數(shù)據(jù)的惟一方法是通過動(dòng)態(tài)加載 標(biāo)記。獲悉 標(biāo)記何時(shí)加載的最好的方法是讓 標(biāo)記返回的腳本調(diào)用函數(shù)而不是簡(jiǎn)單地加載數(shù)據(jù)。清

28、單 6 顯示了在函數(shù)調(diào)用中編碼的數(shù)據(jù)。清單 6. Function1.jsAddBooks( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly );清單 7 給出了相應(yīng)的 .htm

29、l 文件。清單 7. Function1.htmlFunction 1 JS loadervar g_books = ;function AddBooks( books ) g_books = books; drawbooks( g_books );稍后將詳細(xì)介紹 drawbooks 函數(shù)。這里重要的是了解一下頁(yè)面如何定義 AddBooks 函數(shù)，該函數(shù)隨后會(huì)由 function1.js 文件中的腳本調(diào)用。該 AddBooks 函數(shù)負(fù)責(zé)處理數(shù)據(jù)。而且被調(diào)用的 AddBooks 函數(shù)會(huì)向頁(yè)面指示 標(biāo)記被正確加載，并已加載完成。要?jiǎng)?chuàng)建 function1.js 文件，我只對(duì)樣式表稍微做了一點(diǎn)修改，

30、如 清單 8 所示。清單 8. function1.xsl 樣式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );這里，我調(diào)用了一個(gè)函數(shù)，而不是簡(jiǎn)單地設(shè)置一個(gè)變量。這就是我所做的惟一更改。回到頁(yè)面，我使用了 drawbooks 函數(shù)來構(gòu)建書的表格，這樣我就能夠確認(rèn)數(shù)據(jù)被正確編碼和正確顯示。此函數(shù)是在 drawbooks.js 內(nèi)定義的，如 清單 9 所示。清單 9. Drawbooks.jsfunction drawbooks( books ) var elTable = document.createElement( table );

31、 for( var b in books ) var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChil

32、d( document.createTextNode( booksb.first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( booksb.publisher ) ); document.body.appendChild( elTable );這個(gè)簡(jiǎn)單函數(shù)創(chuàng)建了一個(gè)表格節(jié)點(diǎn)，然后循環(huán)

33、訪問書的列表并為每本書創(chuàng)建一行，為每個(gè)數(shù)據(jù)元素分配一個(gè)單元格。此頁(yè)面上的代碼的結(jié)果如 圖 2 所示。圖 2. function1.html 的結(jié)果現(xiàn)在我就可以查看一下此頁(yè)面的輸出并確認(rèn)來自原始 .xml 文件的一切均已被正確轉(zhuǎn)換成 JavaScript 代碼，且數(shù)據(jù)被發(fā)送到 AddData 函數(shù)并被正確添加到頁(yè)面。細(xì)化函數(shù)調(diào)用技術(shù)我很喜歡函數(shù)調(diào)用這一技術(shù)，但我并不贊同將所有圖書數(shù)據(jù)都放入一個(gè)塊中。另一種方式是為每條記錄采用一個(gè)調(diào)用，如 清單 10 所示。清單 10. Function2.jsAddBook( id: 1,name: Code Generation in Action,first

34、: Jack,last: Herrington,publisher: Manning );AddBook( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly );.對(duì) .html 頁(yè)面只需做少許修改，如 清單 11 所示。清單 11. Function2.html.var g_books = ;function AddBook( book ) g_books.push( book ); .這里更改了 XSLT，以使函數(shù)調(diào)用駐留在 for-each 循環(huán)體內(nèi)。清單 12 顯示了更新后的樣式表。清單 12.

35、function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );.對(duì)這個(gè)給定示例來說，這種更改看起來有些隨意。但如果原始的 XML 數(shù)據(jù)集有多種數(shù)據(jù)類型，要為每種類型分配一個(gè)單獨(dú)的函數(shù)調(diào)用會(huì)使 XSL 和頁(yè)面上的 JavaScript 代碼更為簡(jiǎn)單、更易于維護(hù)。編碼對(duì)象對(duì)小的頁(yè)面來講，使用 JavaScript 函數(shù)沒有問題。但對(duì)于大型項(xiàng)目，就需要使用 JavaScript 語(yǔ)言的一些面向?qū)ο筇匦?。是的，JavaScript 語(yǔ)言可以處理對(duì)象而且可以處理得很好。清單 13 顯示了如何創(chuàng)建帶有數(shù)據(jù)的對(duì)象。清單 13. Object1.

36、jsg_books.push( new Book( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning ) );g_books.push( new Book( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly ) );在本例中，我只簡(jiǎn)單地向名為 g_books 的數(shù)組添加了 Book 對(duì)象。JavaScript 的對(duì)象創(chuàng)建與 Java、C# 或 C+ 編程語(yǔ)言的對(duì)象創(chuàng)建十分相似。都是一個(gè)

37、 new 操作符后跟一個(gè)類名。參數(shù)放到隨后的括號(hào)內(nèi)。在本例中，我傳入了一個(gè)帶值的單一散列表，并將其分割成單獨(dú)的一些參數(shù)。創(chuàng)建此對(duì)象的代碼如 清單 14 所示。清單 14. Object1.xslg_books.push( new Book( id: ,name: ,first: ,last: ,publisher: ) );此頁(yè)面內(nèi)最值得注意的是定義 Book 類的那部分代碼。清單 15 顯示了該頁(yè)面。清單 15. object1.html.var g_books = ;function Book( data ) for( var d in data ) thisd = datad; .Book 類的構(gòu)造函數(shù)循環(huán)訪問散列表的所有數(shù)據(jù)。對(duì)于每個(gè)鍵，會(huì)在對(duì)象上創(chuàng)建一個(gè)具有對(duì)象名稱和數(shù)據(jù)的實(shí)例變量。不需要對(duì) drawbooks 函數(shù)做任何