基于AJAX的烟草病虫害测报系统的研究与实现
摘要：传统的B/S模式Web项目在响应速度、用户体验、资源消耗等方面存在着不足，通过分析比较AJAX技术在处理客户端与服务器端数据时采用异步传输方式的优点，最终选择将AJAX技术应用于烟
草测报系统的开发，提高了系统的人机交互能力。
关键词：AJAX；XHR；ASP.NET；JQuery；烟草
1 AJAX介绍
AJAX技术本身并不是新技术，而是既有技术的组合，它得名于异步（Asynchronous）、JavaScript和XML，也即是说通过异步
JavaScript请求处理XML技术。
1.1 AJAX工作原理
Ajax在客户端和服务器中添加了一个中间层，利用该中间层来实现用户请求和服务器响应的异步化。实际上实现Ajax风格的Web 系统有多种形式，其中比较典型的方式是，使用XML Http Request
对象，由JavaScript调用服务器进行通信。
1.2 XML Http Request
XHR对象是Ajax的核心，作为AJAX引擎，XHR对象承担了异步请求服务器、接受服务器响应等Ajax应用中最关键的环节。它可以用来获得及设置HTTP报头、读取响应代码以及处理不同种类服务器产生的内容。
图1 Ajax通信事件模型
当系统页面采用了AJAX引擎后，用户发出请求时，请求会被提交给AJAX引擎，由AJAX引擎创建XHR对象并进行初始化，然后调用send()将该请求发送到服务器。加载完请求后，XHR对象通过readyState记录下已修改信息。通过这种非直接页面文件传送的形式，XHR对象为客户端与服务器端提供了动态的交互方式。
2 AJAX在烟草测报系统中的应用
基于Ajax的烟草病虫害测报系统采用了B/S三层架构模式，将系统分为了数据表示层、应用逻辑层和数据访问层。系统的开发环境是Microsoft Visual stdio2008，后台数据库使用的是SQL Server 2008，在Ajax的基础上使用了Silverlight来加强用户体验。系统的功能模
块划分如图2所示。
图2 系统模块图
2.1 异步目录树
系统中不同权限用户查看不同的目录树，这些目录树通过节点动态展开，每次只加载一级目录，当用户点击某一节点时加载其下一级节点数据，这需要频繁的刷新，影响页面的展开速度，甚至会导致数据丢失。为了解决这一问题，本文引入了Ajax技术，将目录树数据存放在JSON中，并通过JQuery的Tree组件来访问并输出。JSON
数据格式示范如下：
{ "Book":［
{ "Name": " What Technology Wants", "Author":" Kevin Kelly",
"Date": "2010-10-14 " },
{ "Name": " The Future of a Radical Price ", " Author ":" Chris
Anderson ", "Date": " 2009-7-7" }
］}
实现异步树需要在页面中将JSON设置为目录树，然后每次点击子节点时对其进行判断，若该子节点未曾加载，则向下展开一层目录输出，前台需要添加的代码如下：
$('#div_tree').tree({
url: '<c:url value="/thisTreeNode.JSON"/>',//要加载的JSON地址
onClick:function(node){//点击目录树子节点
$(this).tree('toggle', node.target); //加载子目录
}
});
2.2 页面局部更新
鉴于ASP.NET AJAX控件与ASP.NET良好的结合性，本系统在解决局部刷新问题时，大量使用了ASP.NET AJAX。开发者无需编
写复杂的客户端脚本，只需在页面上进行控件的操作就可以完成局部更新。
将需要局部更新的区域放置于UpdatePanel中，然后通过ScriptManager制定需要执行的脚本就可以进行更新。
2.3 智能搜索
使用ASP.NET AJAX控件中的AutoCompleteExtender控件可以轻松实现智能搜索功能，将需要页面显示控件与AutoCompleteExtender控件绑定在一起，输入搜索项时，AutoCompleteExtender控件会自动搜索相关数据库内容并进行反馈，完成智能搜索。
提取信息的后台代码如下所示：
protected String［］tbField_Get(string prefixText, int count)
{
int num=0;
if (string.IsNullOrEmpty(prefixText) == true || count <= 0) return
null;
if (autoCompleteWordList == null)
{//提取相应的调查区域名称
var queryField = from qs in db.TB_ AphidCheckInqs where qs.
jquery实现ajax
FieldName.Contains(prefix) select qs.FieldName;
string［］FieldNames = new string［unt()］//将调
查区域名称放入数组
foreach (var q in queryField)
{
FieldNames ［num++］= dr［"staffName "］.ToString();
}
Array.Sort(FieldNames, new CaseInsensitiveComparer());
return FieldNames;
}
}
3 结束语
本文描述了传统模式的Web平台在用户交互性上的不足，并指出其由于大量数据传输而产生的性能下降问题，对此提出采用基于AJAX技术的新型系统对该状况进行改善，通过异步交互等方式有效提高了系统性能与人机交互性，并以烟草病虫害系统中AJAX的使用
为例，实现了AJAX在Web开发中的应用。
参考文献：
［1］李咏琪.浅谈Ajax的四种开发模式[J].科技创新导报,2011(1).
［2］欧阳荣彬.Ajax与新型管理信息系统［J］.中山大学学报,2009(48).

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。