基于AJAX的智慧農(nóng)業(yè)監(jiān)控系統(tǒng)Web前端設(shè)計
引 言
作為一個 21世紀新興強國,我國農(nóng)業(yè)卻仍以傳統(tǒng)耕種方式為主,這樣不僅造成各種資源的浪費,更對環(huán)境與水土造成嚴重污染和破壞,對農(nóng)業(yè)的可持續(xù)性發(fā)展構(gòu)成了嚴重的威脅。我國政府部門先后頒布了諸多農(nóng)業(yè)科技發(fā)展新條例,足以體現(xiàn)其對農(nóng)業(yè)發(fā)展的高度重視。伴隨著物聯(lián)網(wǎng)的飛速發(fā)展, 越來越多的先進技術(shù)被應(yīng)用到農(nóng)業(yè)生產(chǎn)中,運用傳感器和軟件通過移動平臺或者電腦平臺對農(nóng)業(yè)生產(chǎn)進行控制是當前農(nóng)業(yè)發(fā)展的必然趨勢。Web前端作為Web系統(tǒng)的內(nèi)容展現(xiàn),實現(xiàn)系統(tǒng)可視化的同時,為用戶與系統(tǒng)提供了豐富的交互入口, 在整個智慧農(nóng)業(yè)監(jiān)控系統(tǒng)中起著至關(guān)重要的作用。
1 AJAX簡介
AJAX(Asynchronous JavaScript And XML)的全稱為異步JavaScript 和 XML, 它是由JavaScript、XMLHttpRequest(XHR)、DOM、XML等技術(shù)復合而成的異步通信技術(shù)。
1.1 AJAX的工作原理
AJAX 的工作原理就是在瀏覽器與服務(wù)器之間增加了一個包含一些復雜JavaScript 程序的AJAX 引擎,而 XHR 對象作為異步通信的基礎(chǔ),旨在為JavaScript 程序提供許多豐富可用的接口與后臺服務(wù)器端進行少量的數(shù)據(jù)交互,然后通過對XML 文檔的解析處理,實現(xiàn)系統(tǒng)頁面的快速選擇性刷新。
1.2 傳統(tǒng)應(yīng)用模型與 AJAX應(yīng)用模型的比較
在傳統(tǒng)的Web 應(yīng)用中,當用戶進行表單提交時,瀏覽器直接將數(shù)據(jù)發(fā)送給后臺服務(wù)器,后臺對請求進行相應(yīng)處理后通過Http 協(xié)議返回給瀏覽器一個完整的頁面,瀏覽器接收到返回數(shù)據(jù)后將對頁面進行重新構(gòu)造并顯示,其應(yīng)用模型如圖 1 所示。在此過程中,瀏覽器處于空白狀態(tài),用戶必須等到頁面完全被刷新后才能瀏覽更新的內(nèi)容。
而在基于AJAX 的新興Web 應(yīng)用中,瀏覽器首先將數(shù)據(jù)發(fā)送給AJAX 引擎中的JavaScript 代碼,由JavaScript 代碼首先來捕捉表單中需提交的數(shù)據(jù),然后將其發(fā)送給后臺服務(wù)器, 從而實現(xiàn)用戶操作與服務(wù)器響應(yīng)的異步化,用戶無需等到后臺服務(wù)器響應(yīng)仍可繼續(xù)操作程序。但JavaScript 代碼并不會將所有的請求都提交給后臺服務(wù)器去處理,部分無需從后臺獲取新數(shù)據(jù)的請求交由AJAX 引擎自身來處理,其它確認需要獲取新數(shù)據(jù)的請求則由AJAX 引擎提交給服務(wù)器。這樣不僅能夠?qū)崿F(xiàn)頁面的局部刷新,縮短用戶的等待時間,而且能夠?qū)⒁徊糠謹?shù)據(jù)處理交由瀏覽器來完成,從而減輕服務(wù)器的負擔。其應(yīng)用模型如圖 2 所示。
2 系統(tǒng) Web前端設(shè)計
2.1系統(tǒng)需求分析
“智慧農(nóng)業(yè)”作為一種科學的農(nóng)業(yè)生產(chǎn)經(jīng)營手段,它主要通過給每個基點配置無線傳感節(jié)點來獲取植物的生長環(huán)境信息,如空氣溫濕度、光照強度、土壤的酸堿度、植物養(yǎng)分、氣體含量等參數(shù)。系統(tǒng)將會先收集無線傳感器節(jié)點發(fā)來的數(shù)據(jù)并將其進行存儲,而后將存儲在數(shù)據(jù)庫的數(shù)據(jù)進行提取、篩選、統(tǒng)計、分析,最終將更具科學性、代表性的結(jié)果通過瀏覽器展現(xiàn)給用戶。系統(tǒng)也可以設(shè)置為智能模式,將結(jié)果進行自動分析,自動控制相應(yīng)設(shè)備。引入視頻圖像與圖像處理,直觀地反映農(nóng)作物生產(chǎn)的實時狀態(tài),從整體上給農(nóng)戶提供更加科學的種植決策理論依據(jù)。
Web 前端作為系統(tǒng)的可視化部分,主要是為了實現(xiàn)數(shù)據(jù)的實時顯示,給用戶提供一個與后臺進行數(shù)據(jù)交互、參數(shù)設(shè)置、設(shè)備控制的入口。
2.2 系統(tǒng)總體設(shè)計
根據(jù)系統(tǒng)的需求分析,總體上可將系統(tǒng)分為登陸界面、登陸失敗界面、設(shè)備監(jiān)控界面、設(shè)備管理界面、視頻監(jiān)控界面、系統(tǒng)設(shè)置界面、日志記錄界面、設(shè)備詳情界面、掃描新設(shè)備界面、視頻監(jiān)控詳情界面。系統(tǒng)前端界面流程圖如圖 3 所示。
整個界面設(shè)計框架主要分為三層,結(jié)構(gòu)層、表示層和行 為層。結(jié)構(gòu)層主要是由 HTMl 負責創(chuàng)建,實現(xiàn)了頁面文字、 圖片和動畫的繪制;表示層是 CSS 負責創(chuàng)建,完成了網(wǎng)頁顏色、 布局和線條的美化 ;行為層則是 JavaScript 語言和 DOM 負責 創(chuàng)建,實現(xiàn)了頁面事件的動態(tài)交互。三層結(jié)合提供給用戶一 個可視性強、可操作性強的智能平臺。設(shè)備監(jiān)控界面作為其主 界面,PC 端效果圖如圖 4 所示,系統(tǒng)的設(shè)置界面如圖 5 所示。
3 AJAX 在系統(tǒng)中的應(yīng)用
對于一個監(jiān)控功能系統(tǒng)來說,數(shù)據(jù)的實時刷新以及控制 設(shè)備狀態(tài)的實時改變是非常重要的。在本文的智慧農(nóng)業(yè)監(jiān)控 系統(tǒng)中,主要使用了 DOM 中的 setInterval 方法來實現(xiàn)數(shù)據(jù)的 輪詢,將一個包含 AJAX 請求的函數(shù)傳入其中作為要執(zhí)行的 代碼塊。應(yīng)用程序?qū)⒅芷谛缘膱?zhí)行相應(yīng)的 AJAX 請求,快速 完成頁面的局部刷新,獲取到當前時段的最新數(shù)據(jù)信息。當 用戶需要改變底層控制設(shè)備的狀態(tài)時,用戶通過觸發(fā)點擊事 件向服務(wù)器發(fā)送 AJAX 請求,并根據(jù)服務(wù)器的返回數(shù)據(jù)相應(yīng) 的改變系統(tǒng)中的狀態(tài)圖片。在這整個過程中,系統(tǒng)實現(xiàn)了無刷 新更新頁面,用戶幾乎完全不知道后臺發(fā)生的一切。
4 結(jié) 語
隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展,智慧農(nóng)業(yè)的運用將更加廣 泛,農(nóng)業(yè)數(shù)據(jù)的處理也會越來越精確、安全。而 AJAX 作為 一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù),雖說在用戶體驗上帶來 了極大的提升,但在瀏覽器兼容性、數(shù)據(jù)新舊區(qū)分以及客戶 端負載等方面仍存在不足。相信隨著 Web 技術(shù)的不斷完善, AJAX 在應(yīng)用程序中的運用也會更加成熟。