基于AJAX的銀行內(nèi)部員工考核系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

摘要:隨著Internet的發(fā)展，B/S模式的應(yīng)用系統(tǒng)也逐漸發(fā)展起來并成為時(shí)代的要求。AJAX技術(shù)作為目前流行的技術(shù)，在B/S模式系統(tǒng)中得到了廣泛的應(yīng)用。該文先對AJAX技術(shù)進(jìn)行簡單介紹，然后對現(xiàn)實(shí)情況進(jìn)行分析、系統(tǒng)設(shè)計(jì)和系統(tǒng)實(shí)現(xiàn)進(jìn)行探討和總結(jié)。

關(guān)鍵詞:AJAX技術(shù);考核系統(tǒng);B/S模式考試系統(tǒng)

中圖分類號:TP311文獻(xiàn)標(biāo)識碼:A文章編號:1009-3044(2009)14-3691-02

Design and Implementation of Bank Staff Appraisal System Based on AJAX

CAO Shou-fu

(Hunan Network Engineering Vocational College， Changsha 410004， China)

Abstract: With the development of Internet， application systems based on B/S have developed and become the requirements of the times gradually. AJAX technology as the current popular technology has been widely used in the B/S model system. First， the paper introduces the AJAX technology; second analyses the actual situation; last， describes the design and implementation of the system.

Key words: AJAX; Examination System; B/S model test system

1 AJAX技術(shù)

1.1 AJAX簡介

AJAX(Asynchronous JavaScript And XML)是一種以異步的方式與服務(wù)器端進(jìn)行交互的Web開發(fā)技術(shù)，是JavaScript、XML和DOM等現(xiàn)有技術(shù)的組合應(yīng)用。在客戶端的瀏覽器和服務(wù)器之間，它可以進(jìn)行異步通信，并允許客戶端向服務(wù)器索取少量信息而非整個(gè)網(wǎng)頁。通過使用AJAX技術(shù)，可以對網(wǎng)頁的局部進(jìn)行更新而不用更新整個(gè)頁面，從而節(jié)省網(wǎng)絡(luò)帶寬，提高響應(yīng)速度和用戶良好體驗(yàn)。

1.2 AJAX工作原理

AJAX使用HTML和CSS進(jìn)行標(biāo)準(zhǔn)化顯示，使用DOM實(shí)現(xiàn)頁面層次結(jié)構(gòu)的動態(tài)變化，使用XML和XTSL進(jìn)行數(shù)據(jù)處理和交換，使用XMLHttpRequest對象進(jìn)行實(shí)現(xiàn)數(shù)據(jù)的異步傳輸。首先，客戶端使用JavaScript的XMLHttpRequest對象來向服務(wù)器端發(fā)起請求。然后，服務(wù)器端對請求的內(nèi)容進(jìn)行處理并返回，返回的內(nèi)容可以是一段HTML代碼，甚至是一個(gè)簡單的字符串，也可以是一個(gè)XML文檔對象。接下來，客戶端使用XMLHttpReques對象獲取服務(wù)器端返回來的內(nèi)容，此時(shí)并不是直接將數(shù)據(jù)顯示在頁面上，而是由客戶端的JavaScript腳本處理后再通過HTML/DOM/CSS將信息格式化顯示在頁面上。其中的XMLHttpRequest對象和JavaScript處理程序一般被封裝在客戶端AJAX引擎中。其工作原理圖如圖1。

2 銀行內(nèi)部員工考核系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)開發(fā)背景

現(xiàn)代銀行業(yè)競爭日益激烈，國內(nèi)各種銀行在服務(wù)、業(yè)務(wù)技能等方面對員工的要求越來越高，日常的考核也更加頻繁。而銀行系統(tǒng)全國范圍人員眾多，傳統(tǒng)的考核方式效率低下，遠(yuǎn)遠(yuǎn)不能不適應(yīng)現(xiàn)代銀行的發(fā)展。若構(gòu)建一個(gè)適合現(xiàn)代銀行業(yè)發(fā)展的網(wǎng)絡(luò)考核平臺，則可以提高銀行管理效率，解決國內(nèi)大多數(shù)銀行目前所面臨的難題。采用C/S模式可以實(shí)現(xiàn)這樣的方案，但復(fù)雜度相對較高，成本大，還需要客戶端安裝相應(yīng)的軟件才能實(shí)現(xiàn)，也不易于維護(hù)。如果使用傳統(tǒng)的B/S模式，在使用的時(shí)候就方便得多，但用戶體驗(yàn)效果及互動能力較差，此時(shí)可采用AJAX技術(shù)進(jìn)行彌補(bǔ)，最后確定使用基于AJAX技術(shù)的B/S模式來實(shí)現(xiàn)這個(gè)系統(tǒng)。

2.2 系統(tǒng)功能需求

本系統(tǒng)有兩種用戶角色，考生(參加考核的銀行員工)和管理者(銀行管理人員)，其中“管理者”操作系統(tǒng)的“后臺”。根據(jù)用戶角色劃分如下幾大模塊，“考生”部分包含理論測試、翻打傳票和打字測試模塊，其中理論測試的題目均是客觀題。“管理者”部分包含題庫管理、試卷管理、用戶管理和成績查詢模塊?！翱忌背晒Φ卿浵到y(tǒng)后先進(jìn)行翻打傳票，然后進(jìn)行打字測試，最后進(jìn)行理論測試。系統(tǒng)的“用例圖”如圖2所示。

各模塊具有的主要功能如表1所示。

2.3 系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)

在考生進(jìn)行考試的過程中，大部分的數(shù)據(jù)處理與運(yùn)算工作都在客戶端瀏覽器上使用Javascript及相關(guān)技術(shù)實(shí)現(xiàn)，這樣設(shè)計(jì)一方面提高了系統(tǒng)的響應(yīng)速度，另一方面可以減輕服務(wù)器的負(fù)擔(dān)。客戶端使用XMLHttpRequest對象向服務(wù)器發(fā)送和獲取數(shù)據(jù)，在服務(wù)器端則使用ASP.NET技術(shù)對這些數(shù)據(jù)進(jìn)行處理。因此，在系統(tǒng)運(yùn)行過程中， XMLHttpRequest對象起著舉足輕重的作用。創(chuàng)建XMLHttpRequest對象的函數(shù)如下:

function createAjaxObj()

{

var ajax=1;

if(window.ActiveXObject)//根據(jù)瀏覽器的類型創(chuàng)建XMLHttpRequest對象實(shí)例

{

ajax=new ActiveXObject(\"Microsoft.XMLHTTP\");

}

else if(window.XMLHttpRequest)

{

ajax=new XMLHttpRequest();

}

return ajax;

}

假設(shè)，要創(chuàng)建一個(gè)名為xmlHttp的XMLHttpRequest對象，可用如下代碼:var xmlHttp= createAjaxObj();

“翻打傳票”和“打字測試”模塊所需要的數(shù)字?jǐn)?shù)據(jù)和文章素材由“管理者”預(yù)先錄入到系統(tǒng)中。考生完成這兩方面的考核后，由客戶端腳本Javascript統(tǒng)計(jì)傳票錄入的正確率和打字速度、打字正確率。統(tǒng)計(jì)完成后，使用XMLHttpRequest對象將統(tǒng)計(jì)結(jié)果異步提交到服務(wù)器端處理，然后保存到數(shù)據(jù)庫中。

圖3是“理論測試”模塊的界面布局圖，下面主要從三個(gè)方面探討“理論測試”部分的實(shí)現(xiàn)方式。

1)試卷的生成。首先由“管理者”組卷，組卷的過程就是將與本場考試的相關(guān)信息存儲到相應(yīng)的表中，這些信息包括開考時(shí)間，考試時(shí)長，每種題型的題量，分值等信息。組卷完成后開始發(fā)卷，根據(jù)組卷過程中設(shè)置的題量，為每位考生從題庫中隨機(jī)抽取題目，隨機(jī)抽取方式使用SQL語言中的“ order by newid()”子句實(shí)現(xiàn)。分配給考生的每個(gè)題目，在相應(yīng)的表中都有一條記錄與它對應(yīng)，這條記錄包含正確答案，考生所做的答案及分值等信息。

2)題目導(dǎo)航欄的實(shí)現(xiàn)。題目導(dǎo)航欄以“樹形菜單”形式呈現(xiàn)給“考生”。將每種題型包含的題目放在div容器中，在此使用Javascript結(jié)合CSS通過控制div容器的顯示與隱藏來實(shí)現(xiàn)“樹形菜單”的展開與折疊，以方便導(dǎo)航?？忌孔鲆活}，就將該題號所在的容器的背景設(shè)置為另外一種顏色，已與未作的題目區(qū)分開。

3)考生答題及評分?？忌_考時(shí)，并不是一次性把所有題目都下載到客戶端，而是先下載第一個(gè)題目，由HTML結(jié)合CSS對其格式化后放在div容器中并顯示。以后，考生每選取一個(gè)題目，就從服務(wù)器端獲取一個(gè)，格式化后放到div容器中。div容器可以使用DOM技術(shù)生成。這樣，當(dāng)考生選完所有題目后，整個(gè)試卷中的題目也就下載到客戶端了，并且每個(gè)題目都被格式化后，放到了div容器中，為了對題目加以區(qū)分，設(shè)置div容器的id屬性為不同的值。這樣，考生在檢查已做過的題目時(shí)，就不用再次向服務(wù)器端發(fā)起請求。通過控制div容器的顯示和隱藏屬性，保證當(dāng)前窗口只顯示一道題目。獲取題目的核心代碼如下:

function sendRequest(question_id) // question_id為題目的編號(關(guān)鍵字)

{

xmlHttp.onreadystatechange=getQuestion; //當(dāng)請求狀態(tài)變化時(shí)調(diào)用getQuestion

xmlHttp.open('GET'，'getquestion.aspx?qid='+ question_id，true);

xmlHttp.send(1);//發(fā)送請求

}

function getQuestion()

{

var content=1;

if(xmlHttp.readyState==4xmlHttp.status==200)//請求完成

{

content =xmlHttp.responseText;

//從服務(wù)器端獲取的題目內(nèi)容用content變量存放

}

return content;

}

考生答卷時(shí)，可以通過點(diǎn)擊“上一題”，“下一題”按鈕或通過右側(cè)的“樹形菜單”在題目間切換。在切換時(shí)檢測當(dāng)前題目所做的答案是否有變動，若變動了則將最新的答案發(fā)送給服務(wù)器處理，與此同時(shí)將其存儲在客戶端頁面的隱藏域中，以便進(jìn)行下一次的檢測，這個(gè)檢測操作在客戶端由Javascript完成。因此，只有在考生第一次答題，或者對已作過的題目進(jìn)行更改時(shí)，才會向服務(wù)器端發(fā)送當(dāng)前所作答案和相關(guān)數(shù)據(jù)。提交答案核心代碼如下:

function submitAnswer(stu_ques_id，stu_ans)

{

xmlHttp.open('POST'，'handleanswer.aspx'，ture);

xmlHttp.setRequestHeader('Content-Type'，'application/x-www-form-urlencoded');

xmlHttp.send('stuid='+ stu_ques_id+'ans='+escape(stu_ans));

}

評分操作由“管理者”來完成。考試題目都是客觀題，系統(tǒng)進(jìn)行自動評分。評分的過程就是將考生所做答案與正確答案比對，相同則加分。方法ComputeScore()用來統(tǒng)計(jì)每位考生的總分，方法原型如下:

floatComputeScore(string studentNo，string examId)

{ float result=0;

string sql=\"select * from ExamStuAns where StuNo='\"+ studentNo

sql=sql+\"' and ExamID=\"+ examId;

SqlDataReader dr=db.GetReader(sql);//db對象由類DBOP創(chuàng)建，該類封裝了對數(shù)據(jù)庫操作的常用方法和相關(guān)屬性

while(dr.Read())

{ if(dr[\"StudentAnswer\"].ToString().Equals (dr[\"RightAnswer\"].ToString()))

{ float= float+ int.Parse(dr[\"StudentAnswer\"].ToString());

}}

dr.Close();

return result;

}

3 安全性分析

從本質(zhì)上基于AJAX的Web應(yīng)用程序與傳統(tǒng)的Web應(yīng)用程序在安全上面臨的問題是相同的，他們都是通過Http協(xié)議與服務(wù)器交互，主要由Session保持狀態(tài)。但由于Ajax程序中更多的控制被帶到了客戶端，由此帶來的安全隱患也就更大?？梢詫鬏?shù)臄?shù)據(jù)進(jìn)行加密來保證傳輸數(shù)據(jù)的安全，一種方法是使用Javascript提供的加密函數(shù)，另外一種方法就是使用SSL規(guī)范安全的Http連接來保證安全。

參考文獻(xiàn):

[1] 阿斯利森， 舒塔. Ajax基礎(chǔ)教程[M].北京:人民郵電出版社，2006.

[2] 曹衍龍， 葉達(dá)峰. Ajax編程技術(shù)與實(shí)例[M].北京:人民郵電出版社，2007.

[3] 柯自聰. AJAX開發(fā)精要[M].北京:電子工業(yè)出版社，2006.

[4] Zakas N C， McPeak J， Fawcett J. Ajax高級程序設(shè)計(jì)[M].北京:人民郵電出版社，2006.

[5] 黃桂金，宋強(qiáng)，王占中. ASP.NET AJAX網(wǎng)站開發(fā)[M].北京:清華大學(xué)出版社，2008.