基于AJAX的智慧農(nóng)業(yè)監(jiān)控系統(tǒng)Web前端設(shè)計(jì)

引 言

作為一個 21世紀(jì)新興強(qiáng)國，我國農(nóng)業(yè)卻仍以傳統(tǒng)耕種方式為主，這樣不僅造成各種資源的浪費(fèi)，更對環(huán)境與水土造成嚴(yán)重污染和破壞，對農(nóng)業(yè)的可持續(xù)性發(fā)展構(gòu)成了嚴(yán)重的威脅。我國政府部門先后頒布了諸多農(nóng)業(yè)科技發(fā)展新條例，足以體現(xiàn)其對農(nóng)業(yè)發(fā)展的高度重視。伴隨著物聯(lián)網(wǎng)的飛速發(fā)展， 越來越多的先進(jìn)技術(shù)被應(yīng)用到農(nóng)業(yè)生產(chǎn)中，運(yùn)用傳感器和軟件通過移動平臺或者電腦平臺對農(nóng)業(yè)生產(chǎn)進(jìn)行控制是當(dāng)前農(nóng)業(yè)發(fā)展的必然趨勢。Web前端作為Web系統(tǒng)的內(nèi)容展現(xiàn)，實(shí)現(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ù)復(fù)合而成的異步通信技術(shù)。

1.1 AJAX的工作原理

AJAX 的工作原理就是在瀏覽器與服務(wù)器之間增加了一個包含一些復(fù)雜JavaScript 程序的AJAX 引擎，而 XHR 對象作為異步通信的基礎(chǔ)，旨在為JavaScript 程序提供許多豐富可用的接口與后臺服務(wù)器端進(jìn)行少量的數(shù)據(jù)交互，然后通過對XML 文檔的解析處理，實(shí)現(xiàn)系統(tǒng)頁面的快速選擇性刷新。

1.2 傳統(tǒng)應(yīng)用模型與 AJAX應(yīng)用模型的比較

在傳統(tǒng)的Web 應(yīng)用中，當(dāng)用戶進(jìn)行表單提交時，瀏覽器直接將數(shù)據(jù)發(fā)送給后臺服務(wù)器，后臺對請求進(jìn)行相應(yīng)處理后通過Http 協(xié)議返回給瀏覽器一個完整的頁面，瀏覽器接收到返回?cái)?shù)據(jù)后將對頁面進(jìn)行重新構(gòu)造并顯示，其應(yīng)用模型如圖 1 所示。在此過程中，瀏覽器處于空白狀態(tài)，用戶必須等到頁面完全被刷新后才能瀏覽更新的內(nèi)容。

而在基于AJAX 的新興Web 應(yīng)用中，瀏覽器首先將數(shù)據(jù)發(fā)送給AJAX 引擎中的JavaScript 代碼，由JavaScript 代碼首先來捕捉表單中需提交的數(shù)據(jù)，然后將其發(fā)送給后臺服務(wù)器， 從而實(shí)現(xiàn)用戶操作與服務(wù)器響應(yīng)的異步化，用戶無需等到后臺服務(wù)器響應(yīng)仍可繼續(xù)操作程序。但JavaScript 代碼并不會將所有的請求都提交給后臺服務(wù)器去處理，部分無需從后臺獲取新數(shù)據(jù)的請求交由AJAX 引擎自身來處理，其它確認(rèn)需要獲取新數(shù)據(jù)的請求則由AJAX 引擎提交給服務(wù)器。這樣不僅能夠?qū)崿F(xiàn)頁面的局部刷新，縮短用戶的等待時間，而且能夠?qū)⒁徊糠謹(jǐn)?shù)據(jù)處理交由瀏覽器來完成，從而減輕服務(wù)器的負(fù)擔(dān)。其應(yīng)用模型如圖 2 所示。

2 系統(tǒng) Web前端設(shè)計(jì)

2.1系統(tǒng)需求分析

“智慧農(nóng)業(yè)”作為一種科學(xué)的農(nóng)業(yè)生產(chǎn)經(jīng)營手段，它主要通過給每個基點(diǎn)配置無線傳感節(jié)點(diǎn)來獲取植物的生長環(huán)境信息，如空氣溫濕度、光照強(qiáng)度、土壤的酸堿度、植物養(yǎng)分、氣體含量等參數(shù)。系統(tǒng)將會先收集無線傳感器節(jié)點(diǎn)發(fā)來的數(shù)據(jù)并將其進(jìn)行存儲，而后將存儲在數(shù)據(jù)庫的數(shù)據(jù)進(jìn)行提取、篩選、統(tǒng)計(jì)、分析，最終將更具科學(xué)性、代表性的結(jié)果通過瀏覽器展現(xiàn)給用戶。系統(tǒng)也可以設(shè)置為智能模式，將結(jié)果進(jìn)行自動分析，自動控制相應(yīng)設(shè)備。引入視頻圖像與圖像處理，直觀地反映農(nóng)作物生產(chǎn)的實(shí)時狀態(tài)，從整體上給農(nóng)戶提供更加科學(xué)的種植決策理論依據(jù)。

Web 前端作為系統(tǒng)的可視化部分，主要是為了實(shí)現(xiàn)數(shù)據(jù)的實(shí)時顯示，給用戶提供一個與后臺進(jìn)行數(shù)據(jù)交互、參數(shù)設(shè)置、設(shè)備控制的入口。

2.2 系統(tǒng)總體設(shè)計(jì)

根據(jù)系統(tǒng)的需求分析，總體上可將系統(tǒng)分為登陸界面、登陸失敗界面、設(shè)備監(jiān)控界面、設(shè)備管理界面、視頻監(jiān)控界面、系統(tǒng)設(shè)置界面、日志記錄界面、設(shè)備詳情界面、掃描新設(shè)備界面、視頻監(jiān)控詳情界面。系統(tǒng)前端界面流程圖如圖 3 所示。

整個界面設(shè)計(jì)框架主要分為三層，結(jié)構(gòu)層、表示層和行 為層。結(jié)構(gòu)層主要是由 HTMl 負(fù)責(zé)創(chuàng)建，實(shí)現(xiàn)了頁面文字、 圖片和動畫的繪制；表示層是 CSS 負(fù)責(zé)創(chuàng)建，完成了網(wǎng)頁顏色、 布局和線條的美化 ；行為層則是 JavaScript 語言和 DOM 負(fù)責(zé) 創(chuàng)建，實(shí)現(xiàn)了頁面事件的動態(tài)交互。三層結(jié)合提供給用戶一 個可視性強(qiáng)、可操作性強(qiáng)的智能平臺。設(shè)備監(jiān)控界面作為其主 界面，PC 端效果圖如圖 4 所示，系統(tǒng)的設(shè)置界面如圖 5 所示。

3 AJAX 在系統(tǒng)中的應(yīng)用 

對于一個監(jiān)控功能系統(tǒng)來說，數(shù)據(jù)的實(shí)時刷新以及控制 設(shè)備狀態(tài)的實(shí)時改變是非常重要的。在本文的智慧農(nóng)業(yè)監(jiān)控 系統(tǒng)中，主要使用了 DOM 中的 setInterval 方法來實(shí)現(xiàn)數(shù)據(jù)的 輪詢，將一個包含 AJAX 請求的函數(shù)傳入其中作為要執(zhí)行的 代碼塊。應(yīng)用程序?qū)⒅芷谛缘膱?zhí)行相應(yīng)的 AJAX 請求，快速 完成頁面的局部刷新，獲取到當(dāng)前時段的最新數(shù)據(jù)信息。當(dāng) 用戶需要改變底層控制設(shè)備的狀態(tài)時，用戶通過觸發(fā)點(diǎn)擊事 件向服務(wù)器發(fā)送 AJAX 請求，并根據(jù)服務(wù)器的返回?cái)?shù)據(jù)相應(yīng) 的改變系統(tǒng)中的狀態(tài)圖片。在這整個過程中，系統(tǒng)實(shí)現(xiàn)了無刷 新更新頁面，用戶幾乎完全不知道后臺發(fā)生的一切。

4 結(jié) 語

隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，智慧農(nóng)業(yè)的運(yùn)用將更加廣 泛，農(nóng)業(yè)數(shù)據(jù)的處理也會越來越精確、安全。而 AJAX 作為 一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)，雖說在用戶體驗(yàn)上帶來 了極大的提升，但在瀏覽器兼容性、數(shù)據(jù)新舊區(qū)分以及客戶 端負(fù)載等方面仍存在不足。相信隨著 Web 技術(shù)的不斷完善， AJAX 在應(yīng)用程序中的運(yùn)用也會更加成熟。