黃衛(wèi) 南昌航空大學科技學院
ASP.NET AJAX技術(shù)在高校就業(yè)信息系統(tǒng)中的應(yīng)用研究
黃衛(wèi) 南昌航空大學科技學院
分析了基于B/S信息系統(tǒng)中快速獲取報表數(shù)據(jù)需頻繁刷新的問題,利用AJAX技術(shù)和Echarts圖表工具設(shè)計了實時動態(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ù)異步獲取數(shù)據(jù),實現(xiàn)動態(tài)圖文報表管理,后期加入時間戳實時刷新報表數(shù)據(jù),更好地滿足了就業(yè)部門掌握實時就業(yè)動態(tài)。
基于B/S的傳統(tǒng)web應(yīng)用,用戶需要發(fā)送一次HTTP請求,服務(wù)器響應(yīng)請求并回傳相關(guān)頁面,在這種數(shù)據(jù)傳輸?shù)慕换シ绞较拢脩舳艘粩嗨⑿马撁鎭慝@取新數(shù)據(jù),將耗費極大的資源,用戶體驗不好。而高校就業(yè)數(shù)據(jù)的報表遞交具有時效性、階段性,上級部門希望能實時掌握各院系就業(yè)動態(tài),在數(shù)據(jù)報盤前完成就業(yè)目標。本文引入AJAX(即異步JavaScript和XML)技術(shù),能很好的解決這一問題,頁面更新數(shù)據(jù)實現(xiàn)無刷新效果,用戶無需等待,還可以瀏覽頁面的其他部分。
AJAX由JavaScript、CSS樣式表、XMLHttpRequest對象等多種技術(shù)組成,它可以實現(xiàn)異步傳輸、異步刷新功能,用戶不會被限制于等待狀態(tài),不打斷用戶操作,從而加快了響應(yīng)能力。
ECharts,是基于html5-canvas的開源圖表繪制組件,可以流暢的運行在PC和移動設(shè)備上,兼容當前絕大部分瀏覽器,底層依賴輕量級的Canvas類庫ZRender,提供直觀、與數(shù)據(jù)庫交互、生成高度個性化的數(shù)據(jù)可視化圖表。
用戶端通過AJAX向服務(wù)器發(fā)送HTTP請求(HttpContext),實現(xiàn)異步查詢獲取數(shù)據(jù)庫后,將其傳入后臺,后臺將數(shù)據(jù)轉(zhuǎn)為JSON格式的數(shù)據(jù)后再傳給前臺。這里為顯示圖表劃出一個塊div區(qū)域, Echarts就可以直接使用JSON格式的回傳數(shù)據(jù)顯示數(shù)據(jù)庫中相應(yīng)的數(shù)據(jù),從而可以達到動態(tài)顯示的效果。期間,AJAX引入定時輪詢機制,定時訪問后臺數(shù)據(jù)庫,如有更新則提取數(shù)據(jù)(默認無更新數(shù)據(jù)時不作返回操作),將最終返回給Echarts直觀的顯示給用戶。Echarts重繪圖表過程,就是重新執(zhí)行一次繪圖代碼,由于AJAX動態(tài)無刷新技術(shù),用戶體驗感增強,無需專門等待。
首先服務(wù)器端定義一個Serial類,接著將Serial實例化并將其轉(zhuǎn)化為json格式數(shù)據(jù)。而在客戶端與服務(wù)器之間創(chuàng)建一個ajax.js腳本文件,前臺代碼要用ajax來獲取服務(wù)器返回的數(shù)據(jù)并賦給option的serial屬性,運行效果如圖1所示:
圖1 部分頁面運行效果
開發(fā)設(shè)計一個交互、實時性強的就業(yè)信息系統(tǒng),為高校就業(yè)部門快速掌握一線就業(yè)工作動態(tài)創(chuàng)造了良好的環(huán)境,本系統(tǒng)稍作改動可滿足類似需求,具有廣泛的應(yīng)用范圍。
[1]劉乃琦,郭小芳. ASP.NET應(yīng)用開發(fā)與實踐. 人民郵電出版社,2012-12
[2]ECharts特性.http://echarts.baidu.com/feature.html
[3]Echarts在.Net中使用實例.http://www.cnblogs.com/soundcode/p/6253522.html