引 言

作為一個 21世紀新興強國，我國農業(yè)卻仍以傳統(tǒng)耕種方式為主，這樣不僅造成各種資源的浪費，更對環(huán)境與水土造成嚴重污染和破壞，對農業(yè)的可持續(xù)性發(fā)展構成了嚴重的威脅。我國政府部門先后頒布了諸多農業(yè)科技發(fā)展新條例，足以體現(xiàn)其對農業(yè)發(fā)展的高度重視。伴隨著物聯(lián)網的飛速發(fā)展， 越來越多的先進技術被應用到農業(yè)生產中，運用傳感器和軟件通過移動平臺或者電腦平臺對農業(yè)生產進行控制是當前農業(yè)發(fā)展的必然趨勢。Web前端作為Web系統(tǒng)的內容展現(xiàn)，實現(xiàn)系統(tǒng)可視化的同時，為用戶與系統(tǒng)提供了豐富的交互入口， 在整個智慧農業(yè)監(jiān)控系統(tǒng)中起著至關重要的作用。

1 AJAX簡介

AJAX（Asynchronous JavaScript And XML）的全稱為異步JavaScript 和 XML， 它是由JavaScript、XMLHttpRequest（XHR）、DOM、XML等技術復合而成的異步通信技術。

1.1 AJAX的工作原理

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

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

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

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

2 系統(tǒng) Web前端設計

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

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

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

2.2 系統(tǒng)總體設計

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

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

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

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

4 結 語

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