AJAX技術(shù)在高校畢業(yè)生就業(yè)跟蹤管理系統(tǒng)中的應(yīng)用

姚碧玉

摘 ?要： 高校畢業(yè)生就業(yè)跟蹤管理信息化和網(wǎng)絡(luò)化是高校教育信息化工作的一項(xiàng)重要內(nèi)容。針對(duì)高校畢業(yè)生就業(yè)跟蹤管理系統(tǒng)運(yùn)行過(guò)程中交互多、讀取服務(wù)器數(shù)據(jù)量大的特點(diǎn)，提出了基于ASP.net AJAX技術(shù)的就業(yè)跟蹤管理系統(tǒng)B/S架構(gòu)設(shè)計(jì)方案，將AJAX技術(shù)應(yīng)用在用戶信息驗(yàn)證、數(shù)據(jù)更新、數(shù)據(jù)顯示動(dòng)態(tài)排列、多級(jí)選擇聯(lián)動(dòng)等交互操作頁(yè)面，極大程度地減少了系統(tǒng)交互的響應(yīng)時(shí)間，提高了系統(tǒng)運(yùn)行效率，增強(qiáng)了用戶的體驗(yàn)。

關(guān)鍵詞： AJAX技術(shù); ASP.net; B/S架構(gòu); 畢業(yè)生就業(yè)跟蹤管理系統(tǒng)

中圖分類(lèi)號(hào)：TP391 ? ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? 文章編號(hào)：1006-8228（2015）01-29-03

Application of AJAX technology in tracking management system of college graduates' employment

Yao Biyu

（Xishuangbanna Vocational and Technical Institute， Jinghong， Yunnan 666100， China）

Abstract： The informanization and web-based work in the tracking management of college graduates' employment is an important part of higher education informatization. According to the characteristics of college graduates' employment tracking management system in the operation process， such as much interactions， reading a large amount of data on the server， the B/S structure design scheme of the employment tracking management system based on the ASP.net AJAX technology is introduced. AJAX technology is applied in the interactive manipulation pages including the user information authentication， data updating， the dynamic arrangement of the data display and multilevel selection linkage. The system response time of interactive is reduced. The running efficiency of the system and the user experience are improved.

Key words： AJAX technology; ASP.net; B/S structure; the tracking management system of college graduates' employment

0 引言

近年來(lái)，隨著我國(guó)高校招生規(guī)模的不斷擴(kuò)大，高校畢業(yè)生就業(yè)壓力越來(lái)越大，高校加強(qiáng)對(duì)畢業(yè)生就業(yè)跟蹤管理顯得尤為重要，高校畢業(yè)生就業(yè)跟蹤管理網(wǎng)絡(luò)化是高校教育信息化工作的必然選擇。傳統(tǒng)的基于C/S架構(gòu)的高校畢業(yè)生就業(yè)跟蹤管理系統(tǒng)，客戶端與服務(wù)器端進(jìn)行數(shù)據(jù)交換往往出現(xiàn)傳輸速率慢、頁(yè)面響應(yīng)效率低、用戶體驗(yàn)差等一系列問(wèn)題[1]。作為web2.0標(biāo)準(zhǔn)核心之一的AJAX技術(shù)的出現(xiàn)，通過(guò)在客戶端與服務(wù)器端構(gòu)建AJAX引擎的中間件形式，實(shí)現(xiàn)了頁(yè)面與應(yīng)用的邏輯分離，支持B/S架構(gòu)下用戶操作與服務(wù)器響應(yīng)的異步化，提高了頁(yè)面交互性能和程序執(zhí)行效率。

1 AJAX技術(shù)

AJAX，即Asynchronous JavaScript and XML（異步JavaScript和XML）。AJAX不是一種新的編程語(yǔ)言，而是將已有的多種技術(shù)重新組合，共同協(xié)作發(fā)揮出更強(qiáng)大的作用，主要用于動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)[2]。采用AJAX技術(shù)的Web頁(yè)面與傳統(tǒng)C/S架構(gòu)頁(yè)面相比，其優(yōu)點(diǎn)在于：①減輕了服務(wù)器的負(fù)擔(dān)，按需讀取數(shù)據(jù)，最大程度地減少冗余請(qǐng)求;②局部刷新頁(yè)面，減少用戶心理和實(shí)際等待的時(shí)間，帶來(lái)更好的用戶體驗(yàn);③基于XML標(biāo)準(zhǔn)化，并被廣泛支持，不需要安裝插件，增強(qiáng)瀏覽器的兼容性;④進(jìn)一步促進(jìn)頁(yè)面和數(shù)據(jù)的分離，便于頁(yè)面維護(hù)和管理;⑤大大減少程序代碼量，提高數(shù)據(jù)處理效率[3]。

2 AJAX技術(shù)在畢業(yè)生就業(yè)跟蹤管理系統(tǒng)中的應(yīng)用

2.1 系統(tǒng)架構(gòu)設(shè)計(jì)

根據(jù)高校畢業(yè)生就業(yè)跟蹤管理系統(tǒng)信息數(shù)據(jù)量大、交互頻繁、客戶端與服務(wù)器端實(shí)時(shí)查詢?cè)L問(wèn)的速度要求高等特點(diǎn)，系統(tǒng)采用基于ASP.net AJAX引擎的B/S分層設(shè)計(jì)方式，使界面和業(yè)務(wù)邏輯完全分離，降低程序的耦合度[4]。系統(tǒng)架構(gòu)設(shè)計(jì)如圖1所示。

[用戶管理][AJAX引擎] [問(wèn)題反饋/在線服務(wù)] [系統(tǒng)管理][AJAX引擎] [安全登錄](méi)[測(cè)評(píng)服務(wù)][統(tǒng)計(jì)計(jì)算][界面層][邏輯層][數(shù)據(jù)層][應(yīng)用服務(wù)器][數(shù)據(jù)服務(wù)器]

圖1 ?系統(tǒng)架構(gòu)圖

2.2 AJAX應(yīng)用實(shí)踐

2.2.1 AJAX實(shí)現(xiàn)用戶信息驗(yàn)證

AJAX可以實(shí)現(xiàn)網(wǎng)頁(yè)的局部更新，客戶端按需請(qǐng)求數(shù)據(jù)，服務(wù)器端異步處理返回?cái)?shù)據(jù)，返回?cái)?shù)據(jù)通過(guò)頁(yè)面DOM對(duì)象進(jìn)行顯示。用戶在該系統(tǒng)注冊(cè)時(shí)，當(dāng)用戶名文本框失去焦點(diǎn)時(shí)，系統(tǒng)通過(guò)XMLHttpRequest自動(dòng)向服務(wù)器端請(qǐng)求檢查用戶名是否可用，并提供密碼強(qiáng)度智能提示功能，如圖2所示。

圖2 ?用戶注冊(cè)信息驗(yàn)證

用戶注冊(cè)信息驗(yàn)證主要代碼為：

var XHR; //定義一個(gè)全局對(duì)象

function createXHR（） { //創(chuàng)建XMLHttpRequest對(duì)象

if（window.ActiveXObject） {

XHR=new ActiveXObject（‘Microsoft.XMLHTTP）; }

else if（window.XMLHttpRequest） {

XHR=new XMLHttpRequest（）; } }

function checkname（） {

var username=document.myform.user.value; createXHR（）;

XHR.open（"GET"，"checkname.aspx？um="+username，true）;

//true： ActiveXObject異步傳輸，不等send（）方法返回結(jié)果，AJAX關(guān)鍵

XHR.onreadystatechange=ShowResult; XHR.send（null）; }

// 當(dāng)狀態(tài)改變時(shí)，調(diào)用ShowResult 方法

function ShowResult（） {

if（XHR.readyState == 4） {

if（XHR.status == 0） { // 回調(diào)方法

document.getElementById（'checkbox'）.innerHTML==XHR

.responseText; } } }

2.2.2 AJAX實(shí)現(xiàn)無(wú)刷新提交更新數(shù)據(jù)

畢業(yè)生個(gè)人信息管理頁(yè)面中，需要錄入畢業(yè)生本人詳細(xì)信息，包括出生日期、入學(xué)時(shí)間、畢業(yè)時(shí)間等，如圖3所示。為規(guī)范格式，系統(tǒng)采取彈出式日歷選擇輸入日期，日期選定后，自動(dòng)更新數(shù)據(jù)庫(kù)中相應(yīng)個(gè)人信息，搭建無(wú)刷新Web環(huán)境[5]。

圖3 ?畢業(yè)生個(gè)人信息與測(cè)評(píng)管理

畢業(yè)生在線測(cè)評(píng)管理主要是教師、輔導(dǎo)員對(duì)畢業(yè)生在校期間的表現(xiàn)進(jìn)行綜合測(cè)評(píng)，測(cè)評(píng)的項(xiàng)目較多。傳統(tǒng)方法是在對(duì)一個(gè)畢業(yè)生完成所有測(cè)評(píng)題目時(shí)再提交結(jié)果，提交操作將對(duì)測(cè)評(píng)界面產(chǎn)生一次整體刷新。如果在測(cè)評(píng)過(guò)程中瀏覽器意外關(guān)閉，需要登錄后對(duì)畢業(yè)生進(jìn)行重新測(cè)評(píng)。應(yīng)用Asp.net Ajax Control Toolkit控件，可在UpdatePanel控件中動(dòng)態(tài)創(chuàng)建RadioButtonList，用戶完成一組測(cè)評(píng)項(xiàng)目時(shí)前臺(tái)JS對(duì)單選框進(jìn)行處理并將數(shù)據(jù)異步提交到服務(wù)器，回調(diào)結(jié)果由前臺(tái)處理并進(jìn)行提示，表示這一測(cè)評(píng)項(xiàng)目是否成功提交。

2.2.3 AJAX實(shí)現(xiàn)無(wú)刷新數(shù)據(jù)顯示動(dòng)態(tài)排列

畢業(yè)生就業(yè)跟蹤管理系統(tǒng)中，常常需要?jiǎng)討B(tài)排列各類(lèi)數(shù)據(jù)信息。本系統(tǒng)中使用ASP.net Ajax中的ReOrderList控件實(shí)現(xiàn)動(dòng)態(tài)排列數(shù)據(jù)的功能，用戶不需要刷新Web窗體頁(yè)面，從而提高應(yīng)用程序的友好性和交互性。創(chuàng)建AjaxSortData.aspx頁(yè)面，并在該頁(yè)面上創(chuàng)建一個(gè)ScriptManager控件和一個(gè)ReorderList控件。其中sm控件提供無(wú)刷新的Web環(huán)境，rlData控件以列表形式顯示數(shù)據(jù)項(xiàng)。主要代碼為：

SortOrderField="Name" DataKeyField="ID">

<%# Eval（"Name"） %>

2.2.4 AJAX實(shí)現(xiàn)無(wú)刷新二級(jí)聯(lián)動(dòng)

ASP.net+AJAX二級(jí)聯(lián)動(dòng)的Select下拉菜單，當(dāng)點(diǎn)擊第一個(gè)Select時(shí)，將根據(jù)所選值動(dòng)態(tài)加載第二個(gè)Select列表框中對(duì)應(yīng)內(nèi)容，可以有效避免操作頁(yè)面區(qū)過(guò)大，減少網(wǎng)絡(luò)數(shù)據(jù)傳輸。下列代碼用于畢業(yè)生選擇就業(yè)單位所在地時(shí)，先選擇省份一級(jí)列表值，再無(wú)刷新生成二級(jí)縣市地名列表框供選擇。

function findAddr（khjc） {

createXMLHTTPRequest（）;

var url="http：//${applicationScope.ajaxip}/TmsOrder/ajax/

getAddr.jsp？khjc="+khjc;

xmlHttp.open（"GET"，url，true）; xmlHttp.onreadystatechange

=getAddr; xmlHttp.send（null）; }

function getAddr（） {

if（xmlHttp.readyState==4） {

if（xmlHttp.status==200） {

var optionsInfo=eval_r（"（"+xmlHttp.responseText+"）"）;

var obj=document.getElementById（"addrcontent"）;

obj.length=1; obj.options[0].selected=true; //清除列表中的所有選項(xiàng)

for （var o in optionsInfo） {

obj.appendChild（createOption（o，optionsInfo[o]））; }}}}

//遍歷對(duì)象成員，列追加新的選項(xiàng)

function createOption（value，text） {

var opt=document.createElement（"option"）;

opt.setAttribute（"value"，value）;

opt.appendChild（document.createTextNode（text））; return opt; }

2.2.5 AJAX兼容多個(gè)瀏覽器的處理

由于AJAX大量使用了Javascript和AJAX引擎，在創(chuàng)建AJAX對(duì)象XMLHttpRequest時(shí)，各個(gè)瀏覽器的創(chuàng)建方式不同，故系統(tǒng)應(yīng)對(duì)兼容多個(gè)瀏覽器進(jìn)行相應(yīng)的技術(shù)處理。通過(guò)判斷瀏覽器是否支持XMLHttpRequest對(duì)象和ActiveXObject，來(lái)判斷瀏覽器類(lèi)型和版本，再使用對(duì)應(yīng)方法創(chuàng)建AJAX對(duì)象，主要代碼通過(guò)瀏覽器解析可以直接使用。

function createXMLHttpRequest（） {

var request=false; //先判斷非IE瀏覽器

if（window.XMLHttpRequest） { //window對(duì)象中有

XMLHttpRequest存在就是非IE，包括（IE7、IE8）

request=new XMLHttpRequest（）; //非IE以及IE7、IE8瀏覽器

if（request.overrideMimeType） {

request.overrideMimeType（"text/xml"）; }}//重置mime類(lèi)型

else if（window.ActiveXObject） { //window對(duì)象中有

ActiveXObject存在就是IE瀏覽器的低版本

var versions=['Microsoft.XMLHTTP'， 'MSXML.XMLHTTP'，

'Msxml2.XMLHTTP.7.0'，'Msxml2.XMLHTTP.6.0'，'Msxml2.XMLHTTP.5.0'， 'Msxml2.XMLHTTP.4.0'， 'MSXML2

.XMLHTTP.3.0'， 'MSXML2.XMLHTTP'];

//各種IE瀏覽器創(chuàng)建Ajax對(duì)象時(shí)傳遞的參數(shù)

for（var i=0; i

try {

request=new ActiveXObject（versions[i]）; //各種IE瀏覽器版本的參數(shù)不同

if（request） { return request; } }

catch（e） { request=false; } } }

return request; }

var ajax=null;

function show（） {

ajax=createXMLHttpRequest（）;

if （ajax） {

…… }

3 結(jié)束語(yǔ)

實(shí)踐表明，基于ASP.net AJAX技術(shù)的就業(yè)跟蹤管理系統(tǒng)設(shè)計(jì)方案能大大減少系統(tǒng)交互的響應(yīng)時(shí)間，提高系統(tǒng)效率，縮短開(kāi)發(fā)成本與時(shí)間，增強(qiáng)用戶的體驗(yàn)，增強(qiáng)系統(tǒng)的可維護(hù)性和可擴(kuò)展性。然而，AJAX技術(shù)也存在一定的局限性，比如AJAX大量地使用了Javascript和AJAX引擎，這些取決于瀏覽器的支持，在設(shè)計(jì)系統(tǒng)時(shí)需要考慮對(duì)瀏覽器的兼容性。而且AJAX只是局部刷新，所以頁(yè)面的后退按鈕是沒(méi)有用的。對(duì)流媒體和移動(dòng)設(shè)備的支持等還有待后續(xù)進(jìn)一步研究與完善。

參考文獻(xiàn)：

[1] 劉運(yùn).高校實(shí)習(xí)就業(yè)管理系統(tǒng)的功能設(shè)計(jì)及AJAX應(yīng)用研究[J].電腦

知識(shí)與技術(shù)，2010.6：92-94

[2] 辛剛，王清心.基于AJAX的Java Web應(yīng)用的研究與開(kāi)發(fā)[J].山西電

子技術(shù)，2010.1：57-58

[3] 懷艾芹.AJAX技術(shù)在Web系統(tǒng)開(kāi)發(fā)中的研究及應(yīng)用[J].計(jì)算機(jī)時(shí)代，

2010.9：56

[4] 王道乾.基于AJAX的高校檔案管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].重慶大

學(xué)，2007：48-49

[5] 李佳凝.AJAX技術(shù)在高校學(xué)生管理系統(tǒng)的應(yīng)用[J].科技創(chuàng)新導(dǎo)報(bào)，

2014.10：148