基于AJAX的智慧农业监控系统Web前端设计

引 言

作为一个 21世纪新兴强国，我国农业却仍以传统耕种方式为主，这样不仅造成各种资源的浪费，更对环境与水土造成严重污染和破坏，对农业的可持续性发展构成了严重的威胁。我国政府部门先后颁布了诸多农业科技发展新条例，足以体现其对农业发展的高度重视。伴随着物联网的飞速发展， 越来越多的先进技术被应用到农业生产中，运用传感器和软件通过移动平台或者电脑平台对农业生产进行控制是当前农业发展的必然趋势。Web前端作为Web系统的内容展现，实现系统可视化的同时，为用户与系统提供了丰富的交互入口， 在整个智慧农业监控系统中起着至关重要的作用。

1 AJAX简介

AJAX（Asynchronous JavaScript And XML）的全称为异步JavaScript 和 XML， 它是由JavaScript、XMLHttpRequest（XHR）、DOM、XML等技术复合而成的异步通信技术。

1.1 AJAX的工作原理

AJAX 的工作原理就是在浏览器与服务器之间增加了一个包含一些复杂JavaScript 程序的AJAX 引擎，而 XHR 对象作为异步通信的基础，旨在为JavaScript 程序提供许多丰富可用的接口与后台服务器端进行少量的数据交互，然后通过对XML 文档的解析处理，实现系统页面的快速选择性刷新。

1.2 传统应用模型与 AJAX应用模型的比较

在传统的Web 应用中，当用户进行表单提交时，浏览器直接将数据发送给后台服务器，后台对请求进行相应处理后通过Http 协议返回给浏览器一个完整的页面，浏览器接收到返回数据后将对页面进行重新构造并显示，其应用模型如图 1 所示。在此过程中，浏览器处于空白状态，用户必须等到页面完全被刷新后才能浏览更新的内容。

而在基于AJAX 的新兴Web 应用中，浏览器首先将数据发送给AJAX 引擎中的JavaScript 代码，由JavaScript 代码首先来捕捉表单中需提交的数据，然后将其发送给后台服务器， 从而实现用户操作与服务器响应的异步化，用户无需等到后台服务器响应仍可继续操作程序。但JavaScript 代码并不会将所有的请求都提交给后台服务器去处理，部分无需从后台获取新数据的请求交由AJAX 引擎自身来处理，其它确认需要获取新数据的请求则由AJAX 引擎提交给服务器。这样不仅能够实现页面的局部刷新，缩短用户的等待时间，而且能够将一部分数据处理交由浏览器来完成，从而减轻服务器的负担。其应用模型如图 2 所示。

2 系统 Web前端设计

2.1系统需求分析

“智慧农业”作为一种科学的农业生产经营手段，它主要通过给每个基点配置无线传感节点来获取植物的生长环境信息，如空气温湿度、光照强度、土壤的酸碱度、植物养分、气体含量等参数。系统将会先收集无线传感器节点发来的数据并将其进行存储，而后将存储在数据库的数据进行提取、筛选、统计、分析，最终将更具科学性、代表性的结果通过浏览器展现给用户。系统也可以设置为智能模式，将结果进行自动分析，自动控制相应设备。引入视频图像与图像处理，直观地反映农作物生产的实时状态，从整体上给农户提供更加科学的种植决策理论依据。

Web 前端作为系统的可视化部分，主要是为了实现数据的实时显示，给用户提供一个与后台进行数据交互、参数设置、设备控制的入口。

2.2 系统总体设计

根据系统的需求分析，总体上可将系统分为登陆界面、登陆失败界面、设备监控界面、设备管理界面、视频监控界面、系统设置界面、日志记录界面、设备详情界面、扫描新设备界面、视频监控详情界面。系统前端界面流程图如图 3 所示。

整个界面设计框架主要分为三层，结构层、表示层和行 为层。结构层主要是由 HTMl 负责创建，实现了页面文字、 图片和动画的绘制；表示层是 CSS 负责创建，完成了网页颜色、 布局和线条的美化 ；行为层则是 JavaScript 语言和 DOM 负责 创建，实现了页面事件的动态交互。三层结合提供给用户一 个可视性强、可操作性强的智能平台。设备监控界面作为其主 界面，PC 端效果图如图 4 所示，系统的设置界面如图 5 所示。

3 AJAX 在系统中的应用 

对于一个监控功能系统来说，数据的实时刷新以及控制 设备状态的实时改变是非常重要的。在本文的智慧农业监控 系统中，主要使用了 DOM 中的 setInterval 方法来实现数据的 轮询，将一个包含 AJAX 请求的函数传入其中作为要执行的 代码块。应用程序将周期性的执行相应的 AJAX 请求，快速 完成页面的局部刷新，获取到当前时段的最新数据信息。当 用户需要改变底层控制设备的状态时，用户通过触发点击事 件向服务器发送 AJAX 请求，并根据服务器的返回数据相应 的改变系统中的状态图片。在这整个过程中，系统实现了无刷 新更新页面，用户几乎完全不知道后台发生的一切。

4 结 语

随着物联网技术的不断发展，智慧农业的运用将更加广 泛，农业数据的处理也会越来越精确、安全。而 AJAX 作为 一种用于创建快速动态网页的技术，虽说在用户体验上带来 了极大的提升，但在浏览器兼容性、数据新旧区分以及客户 端负载等方面仍存在不足。相信随着 Web 技术的不断完善， AJAX 在应用程序中的运用也会更加成熟。