基于AJAX的銀行內部員工考核系統的設計與實現

摘要:隨著Internet的發展，B/S模式的應用系統也逐漸發展起來并成為時代的要求。AJAX技術作為目前流行的技術，在B/S模式系統中得到了廣泛的應用。該文先對AJAX技術進行簡單介紹，然后對現實情況進行分析、系統設計和系統實現進行探討和總結。

關鍵詞:AJAX技術;考核系統;B/S模式考試系統

中圖分類號:TP311文獻標識碼: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技術

1.1 AJAX簡介

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

1.2 AJAX工作原理

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

2 銀行內部員工考核系統的設計與實現

2.1 系統開發背景

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

2.2 系統功能需求

本系統有兩種用戶角色，考生(參加考核的銀行員工)和管理者(銀行管理人員)，其中“管理者”操作系統的“后臺”。根據用戶角色劃分如下幾大模塊，“考生”部分包含理論測試、翻打傳票和打字測試模塊，其中理論測試的題目均是客觀題。“管理者”部分包含題庫管理、試卷管理、用戶管理和成績查詢模塊。“考生”成功登錄系統后先進行翻打傳票，然后進行打字測試，最后進行理論測試。系統的“用例圖”如圖2所示。

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

2.3 系統設計實現

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

function createAjaxObj()

{

var ajax=1;

if(window.ActiveXObject)//根據瀏覽器的類型創建XMLHttpRequest對象實例

{

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

}

else if(window.XMLHttpRequest)

{

ajax=new XMLHttpRequest();

}

return ajax;

}

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

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

圖3是“理論測試”模塊的界面布局圖，下面主要從三個方面探討“理論測試”部分的實現方式。

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

2)題目導航欄的實現。題目導航欄以“樹形菜單”形式呈現給“考生”。將每種題型包含的題目放在div容器中，在此使用Javascript結合CSS通過控制div容器的顯示與隱藏來實現“樹形菜單”的展開與折疊，以方便導航。考生每做一題，就將該題號所在的容器的背景設置為另外一種顏色，已與未作的題目區分開。

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

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

{

xmlHttp.onreadystatechange=getQuestion; //當請求狀態變化時調用getQuestion

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

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

}

function getQuestion()

{

var content=1;

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

{

content =xmlHttp.responseText;

//從服務器端獲取的題目內容用content變量存放

}

return content;

}

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

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));

}

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

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創建，該類封裝了對數據庫操作的常用方法和相關屬性

while(dr.Read())

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

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

}}

dr.Close();

return result;

}

3 安全性分析

從本質上基于AJAX的Web應用程序與傳統的Web應用程序在安全上面臨的問題是相同的，他們都是通過Http協議與服務器交互，主要由Session保持狀態。但由于Ajax程序中更多的控制被帶到了客戶端，由此帶來的安全隱患也就更大。可以對傳輸的數據進行加密來保證傳輸數據的安全，一種方法是使用Javascript提供的加密函數，另外一種方法就是使用SSL規范安全的Http連接來保證安全。

參考文獻:

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

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

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

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

[5] 黃桂金，宋強，王占中. ASP.NET AJAX網站開發[M].北京:清華大學出版社，2008.