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

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

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

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

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

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

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

1 AJAX技術和Echarts圖表工具

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

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

1.2 AJAX技術

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

1.3 Echart圖表工具

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

1.4 AJAX與Echars相結合

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

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

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

圖1 部分頁面運行效果

3 結束語

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

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

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

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