基于Ajax的实时综合监测系统的设计及性能优化.docVIP

基于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]。它使用XHTML和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支持CSSl到CSS3，以及基本的xPath；可以很容易的为JQuery扩展其他功能。作为一种开源软件，任何人都可以利用JQuery提供的接口为其扩展功能，提高编写代码的质量，而且JQuery对Json提供了非常好的支持。在需要使用JQuery的页面中引入JQuery的js文件即可，引入之后便可在页面的任意地方使用JQuery提供的语法。引用的格式如下： ??? scriptype=text/javascript src=js/jquery.js/script 2.3? Json ??? Json （JavaScript Object Notation） 是一种轻量级的数据交换格式[4]。易于人阅读