黃衛(wèi) 南昌航空大學(xué)科技學(xué)院

ASP.NET AJAX技術(shù)在高校就業(yè)信息系統(tǒng)中的應(yīng)用研究

黃衛(wèi) 南昌航空大學(xué)科技學(xué)院

分析了基于B/S信息系統(tǒng)中快速獲取報(bào)表數(shù)據(jù)需頻繁刷新的問題，利用AJAX技術(shù)和Echarts圖表工具設(shè)計(jì)了實(shí)時(shí)動(dòng)態(tài)數(shù)據(jù)傳遞及用戶界面的無(wú)刷性。

AJAX 實(shí)時(shí)數(shù)據(jù) Echarts JavaScript

就業(yè)數(shù)據(jù)統(tǒng)計(jì)和管理是高校就業(yè)工作的一個(gè)重要組成部分，尤其要對(duì)就業(yè)數(shù)據(jù)進(jìn)行實(shí)時(shí)監(jiān)控和查詢，為下一步就業(yè)目標(biāo)提供依據(jù)。傳統(tǒng)方式利用電子表格工具生成報(bào)表再上報(bào)，效率不高、交互性不強(qiáng)，不能實(shí)現(xiàn)即時(shí)統(tǒng)計(jì)查詢。利用AJAX與Echarts技術(shù)異步獲取數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)圖文報(bào)表管理，后期加入時(shí)間戳實(shí)時(shí)刷新報(bào)表數(shù)據(jù)，更好地滿足了就業(yè)部門掌握實(shí)時(shí)就業(yè)動(dòng)態(tài)。

1 AJAX技術(shù)和Echarts圖表工具

1.1 實(shí)時(shí)數(shù)據(jù)傳送分析

基于B/S的傳統(tǒng)web應(yīng)用，用戶需要發(fā)送一次HTTP請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求并回傳相關(guān)頁(yè)面，在這種數(shù)據(jù)傳輸?shù)慕换シ绞较?，用戶端要不斷刷新?yè)面來獲取新數(shù)據(jù)，將耗費(fèi)極大的資源，用戶體驗(yàn)不好。而高校就業(yè)數(shù)據(jù)的報(bào)表遞交具有時(shí)效性、階段性，上級(jí)部門希望能實(shí)時(shí)掌握各院系就業(yè)動(dòng)態(tài)，在數(shù)據(jù)報(bào)盤前完成就業(yè)目標(biāo)。本文引入AJAX（即異步JavaScript和XML）技術(shù)，能很好的解決這一問題，頁(yè)面更新數(shù)據(jù)實(shí)現(xiàn)無(wú)刷新效果，用戶無(wú)需等待，還可以瀏覽頁(yè)面的其他部分。

1.2 AJAX技術(shù)

AJAX由JavaScript、CSS樣式表、XMLHttpRequest對(duì)象等多種技術(shù)組成，它可以實(shí)現(xiàn)異步傳輸、異步刷新功能，用戶不會(huì)被限制于等待狀態(tài)，不打斷用戶操作，從而加快了響應(yīng)能力。

1.3 Echart圖表工具

ECharts，是基于html5-canvas的開源圖表繪制組件，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀、與數(shù)據(jù)庫(kù)交互、生成高度個(gè)性化的數(shù)據(jù)可視化圖表。

1.4 AJAX與Echars相結(jié)合

用戶端通過AJAX向服務(wù)器發(fā)送HTTP請(qǐng)求（HttpContext），實(shí)現(xiàn)異步查詢獲取數(shù)據(jù)庫(kù)后，將其傳入后臺(tái)，后臺(tái)將數(shù)據(jù)轉(zhuǎn)為JSON格式的數(shù)據(jù)后再傳給前臺(tái)。這里為顯示圖表劃出一個(gè)塊div區(qū)域, Echarts就可以直接使用JSON格式的回傳數(shù)據(jù)顯示數(shù)據(jù)庫(kù)中相應(yīng)的數(shù)據(jù)，從而可以達(dá)到動(dòng)態(tài)顯示的效果。期間，AJAX引入定時(shí)輪詢機(jī)制，定時(shí)訪問后臺(tái)數(shù)據(jù)庫(kù)，如有更新則提取數(shù)據(jù)（默認(rèn)無(wú)更新數(shù)據(jù)時(shí)不作返回操作），將最終返回給Echarts直觀的顯示給用戶。Echarts重繪圖表過程，就是重新執(zhí)行一次繪圖代碼，由于AJAX動(dòng)態(tài)無(wú)刷新技術(shù)，用戶體驗(yàn)感增強(qiáng)，無(wú)需專門等待。

2 系統(tǒng)實(shí)現(xiàn)

首先服務(wù)器端定義一個(gè)Serial類，接著將Serial實(shí)例化并將其轉(zhuǎn)化為json格式數(shù)據(jù)。而在客戶端與服務(wù)器之間創(chuàng)建一個(gè)ajax．js腳本文件，前臺(tái)代碼要用ajax來獲取服務(wù)器返回的數(shù)據(jù)并賦給option的serial屬性，運(yùn)行效果如圖1所示：

圖1 部分頁(yè)面運(yùn)行效果

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

開發(fā)設(shè)計(jì)一個(gè)交互、實(shí)時(shí)性強(qiáng)的就業(yè)信息系統(tǒng)，為高校就業(yè)部門快速掌握一線就業(yè)工作動(dòng)態(tài)創(chuàng)造了良好的環(huán)境，本系統(tǒng)稍作改動(dòng)可滿足類似需求，具有廣泛的應(yīng)用范圍。

[1]劉乃琦，郭小芳. ASP.NET應(yīng)用開發(fā)與實(shí)踐. 人民郵電出版社,2012-12

[2]ECharts特性.http://echarts.baidu.com/feature.html

[3]Echarts在.Net中使用實(shí)例.http://www.cnblogs.com/soundcode/p/6253522.html