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