姚碧玉

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

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

中圖分類號：TP391 ? ? ? ? ?文獻標志碼：A ? ? 文章編號：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 引言

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

1 AJAX技術

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

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

2.1 系統(tǒng)架構設計

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

[用戶管理][AJAX引擎] [問題反饋/在線服務] [系統(tǒng)管理][AJAX引擎] [安全登錄][測評服務][統(tǒng)計計算][界面層][邏輯層][數(shù)據(jù)層][應用服務器][數(shù)據(jù)服務器]

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

2.2 AJAX應用實踐

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

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

圖2 ?用戶注冊信息驗證

用戶注冊信息驗證主要代碼為：

var XHR; //定義一個全局對象

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

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（）方法返回結果，AJAX關鍵

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

// 當狀態(tài)改變時，調用ShowResult 方法

function ShowResult（） {

if（XHR.readyState == 4） {

if（XHR.status == 0） { // 回調方法

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

.responseText; } } }

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

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

圖3 ?畢業(yè)生個人信息與測評管理

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

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

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

SortOrderField="Name" DataKeyField="ID">

<%# Eval（"Name"） %>

2.2.4 AJAX實現(xiàn)無刷新二級聯(lián)動

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

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; //清除列表中的所有選項

for （var o in optionsInfo） {

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

//遍歷對象成員，列追加新的選項

function createOption（value，text） {

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

opt.setAttribute（"value"，value）;

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

2.2.5 AJAX兼容多個瀏覽器的處理

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

function createXMLHttpRequest（） {

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

if（window.XMLHttpRequest） { //window對象中有

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

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

if（request.overrideMimeType） {

request.overrideMimeType（"text/xml"）; }}//重置mime類型

else if（window.ActiveXObject） { //window對象中有

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對象時傳遞的參數(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 結束語

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

參考文獻：

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

知識與技術，2010.6：92-94

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

子技術，2010.1：57-58

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

2010.9：56

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

學，2007：48-49

[5] 李佳凝.AJAX技術在高校學生管理系統(tǒng)的應用[J].科技創(chuàng)新導報，

2014.10：148