基于Ajax的实时综合监测
系统的
设计及其性能优化
雷涛 尚盈 王昌
(山东省科 激光研究所,山东 济南 250014)
摘 要 将Ajax技术应用到Web实时监测系统可以提供更友好的交互效果,可以实现数据的按需获取,减少传输的数据量。本文结合煤矿采空区自燃监测系统,介绍使用JQuery实现的基于Ajax的综合监测系统的结构,并从减少异步请求数量、使用Json编码减少数据传输量、合并
压缩脚本文件提高页面加载速度等几个方面实现了系统性能的优化。
关键词 实时监测系统;Ajax;JQuery;Json;性能优化
1 引言
目前工业生产过程中的监测系统主要是基于C/S模式的,但是基于C/S模式的监测系统部署比较麻烦,维护成本高,而且不利于监测信息的共享。随着企业信息化的发展,很多企业都建立了自己的局域网并且连接到Internet,因此开发基于Internet /Intranet的B/S结构的远程实时监测系统具有非常重要的意义。
但是B/S结构的客户端为浏览器,不具备代码执行的能力,操作需要返回服务器端执行,因此客户端表现形式有限,交互能力弱。而且监测系统需要实时的展现监测数据,有大量的数据在浏览器和服务器之间传输,需要消耗大量的
网络带宽,有可能影响到网络上的其它服务[1]。
将Ajax(Asynchronous
JavaScript and XML)技术应用到Web实时监测系统,不仅可以提高Web监测系统的交互效果,而且可以减少实际的数据传输量,大大提高Web监测系统的效率。本文结合我们设计的煤矿采空区自燃监测系统,介绍利用JQuery构建的基于Ajax的Web实时综合监测系统的结构,并通过减少异步请求数量、利用Json编码压缩网络数据传输量等方法来优化基于Ajax的Web实时监测系统。
2 Ajax、JQuery和Json
2.1 Ajax技术
Ajax能在不更新整个页面的前提下维护数据,这样可以使Web应用
程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息,减少网络数据传输量。因此将Ajax应用到实时监测系统可以提大大提高实时监测系统的效率和性能。
Ajax是几项技术相互协作而形成的一个功能强大的新方法[2]。它使用X
HTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest对象进行异步数据读取;最后用JavaScript绑定和处理所有数据。
Ajax
工作原理相当于在客户端加入了一个Ajax引擎,把以前由服务器负担的一些工作转移到客户端[1]。客户端通过Javascrpt调用Ajax引擎向服务器端发出HTTP请求后,并不等待请求的响应,当服务端的数据以XML形式返回时,Ajax接收数据并指定Javascript函数来完成对响应的处理或页面的更新。图1显示了传统同步Web程序和Ajax异步Web程序之间的区别。
图1 同步程序和Ajax异步程序
2.2 JQuery框架
JQuery是随着Web 2.0及Ajax思想在互联网上的快速发展传播而出现的一个优秀的JavaScript框架。它由John Resig于2006年初创建,使用户能更方便地操作HTML
文档、处理事件、实现动画效果,方便地为网站提供Ajax交互,是一个优秀的Ajax框架。
JQuery编码简练、语言易懂、
学习快速、文档丰富。它通过封装的功能强大的函数简化代码,从而实现用户编写代码的精简。JQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。因此页面第一次加载的时候需要向客户端传送的脚本数据量较小;JQuery是跨浏览器的,不同的浏览器支持的JavaScript语法是有区别的,而JQuery则将这些差异进行了封装,因此这些差异对用户来说是透明的;JQuery能将JavaScript和HTML完全分离,便于维护代码的维护和修改;JQuery