AJAX技術在高校畢業生就業跟蹤管理系統中的應用

姚碧玉

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

關鍵詞： AJAX技術; ASP.net; B/S架構; 畢業生就業跟蹤管理系統

中圖分類號：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 引言

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

1 AJAX技術

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

2 AJAX技術在畢業生就業跟蹤管理系統中的應用

2.1 系統架構設計

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

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

圖1 ?系統架構圖

2.2 AJAX應用實踐

2.2.1 AJAX實現用戶信息驗證

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

圖2 ?用戶注冊信息驗證

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

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

function createXHR（） { //創建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）; }

// 當狀態改變時，調用ShowResult 方法

function ShowResult（） {

if（XHR.readyState == 4） {

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

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

.responseText; } } }

2.2.2 AJAX實現無刷新提交更新數據

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

圖3 ?畢業生個人信息與測評管理

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

2.2.3 AJAX實現無刷新數據顯示動態排列

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

SortOrderField="Name" DataKeyField="ID">

<%# Eval（"Name"） %>

2.2.4 AJAX實現無刷新二級聯動

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

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引擎，在創建AJAX對象XMLHttpRequest時，各個瀏覽器的創建方式不同，故系統應對兼容多個瀏覽器進行相應的技術處理。通過判斷瀏覽器是否支持XMLHttpRequest對象和ActiveXObject，來判斷瀏覽器類型和版本，再使用對應方法創建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瀏覽器創建Ajax對象時傳遞的參數

for（var i=0; i

try {

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

if（request） { return request; } }

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

return request; }

var ajax=null;

function show（） {

ajax=createXMLHttpRequest（）;

if （ajax） {

…… }

3 結束語

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

參考文獻：

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

知識與技術，2010.6：92-94

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

子技術，2010.1：57-58

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

2010.9：56

[4] 王道乾.基于AJAX的高校檔案管理系統的設計與實現[D].重慶大

學，2007：48-49

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

2014.10：148