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

基于Ajax的实时综合监测系统的设计及其性能优化雷涛尚盈王昌（山东省科学院激光研究所，山东济南250014）摘要将Ajax技术应用到Web实时监测系统可以提供更友好的交互效果，可以实现数据的按需获取，减少传输的数据量。本文结合煤矿采空区自燃监测系统，介绍使用JQuery实现的基于Ajax的综合监测系统的结构，并从减少异步请求数量、使用Json编码减少数据传输量、合并压缩脚本文件提高页面加载速度等几个方面实现了系统性能的优化。关键词实时监测系统；Ajax；JQuery；Json；性能优化1引言目前工业生产过程中的监测系统主要是基于C/S模式的，但是基于C/S模式的监测系统部署比较麻烦，维护成本高，而且不利于监测信息的共享。随着企业信息化的发展，很多企业都建立了自己的局域网并且连接到Internet，因此开发基于Internet/Intranet的B/S结构的远程实时监测系统具有非常重要的意义。但是B/S结构的客户端为浏览器，不具备代码执行的能力，操作需要返回服务器端执行，因此客户端表现形式有限，交互能力弱。而且监测系统需要实时的展现监测数据，有大量的数据在浏览器和服务器之间传输，需要消耗大量的网络带宽，有可能影响到网络上的其它服务[1]。将Ajax（AsynchronousJavaScriptandXML）技术应用到Web实时监测系统，不仅可以提高Web监测系统的交互效果，而且可以减少实际的数据传输量，大大提高Web监测系统的效率。本文结合我们设计的煤矿采空区自燃监测系统，介绍利用JQuery构建的基于Ajax的Web实时综合监测系统的结构，并通过减少异步请求数量、利用Json编码压缩网络数据传输量等方法来优化基于Ajax的Web实时监测系统。2Ajax、JQuery和Json2.1Ajax技术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.2JQuery框架JQuery是随着Web2.0及Ajax思想在互联网上的快速发展传播而出现的一个优秀的JavaScript框架。它由JohnResig于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/javascriptsrc=js/jquery.js/script2.3JsonJson（JavaScriptObjectNotation）是一种轻量级的数据交换格式[4]。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（StandardECMA-2623rdEdition-December1999）的一个子集。Json采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C，C++，C#，Java，JavaScript，Perl，Python等）。这些特性使Json成为理想的数据交换语言[5]。在本文中使用Json来代替XML在服务器与客户端传输数据，因为Json相对于XML编码更加简洁，可以降低在网络上传输的实际数据量。3系统介绍和系统结构整个煤矿采空区自燃监测系统主要包括三个部分，如图2所示。（1）传感器及其解调仪：传感器采用我们研发的各种光纤传感器，光纤传感器具有抗电磁干扰、电绝缘、耐腐蚀、本质安全、灵敏度高、重量轻、体积小等优点，适合在煤矿这样复杂的环境中使用。采空区自燃监测系统实时监测采空区的温度、各种气体的含量等信息。（2）监控程序：主要在监控室实现传感器数据的采集存储、解调仪和传感器的控制、数据以及报警的显示等功能。其中最主要的是数据采集模块和控制模块。（3）Web程序：实现监测数据的实时共享，便于用户及时获取监测信息和设备的运行情况。图2监测系统结构图因为各种传感器的采集频率是不同的，其中各种气体传感器的采集频率很高，几秒钟采集一次，而分布式温度传感器需要十几秒采集一次。Web程序如果采用传统的刷新页面的方法来获取实时数据，页面的刷新频率很高，整个程序的交互性变的很差。而且每次刷新有很多的数据在浏览器和服务器之间传输，需要占用大量的带宽资源，有可能影响到整个局域网的效率。因此实时监测系统的Web子程序需要采用Ajax技术来解决页面的刷新问题，充分利用带宽资源，提高用户的体验效果。因为JQuery是一个轻量级的JavaScript库，能够方便的提供Ajax交互，所以采用JQuery来实现Web程序的Ajax交互。图3Web子程序结构图整个Web程序的结构和工作流程如图3所示。客户端产生了事件，页面调用JQuery编写的事件处理函数，处理函数做一些预处理并获取相应的参数，将参数编码通过HTTP请求发送到服务器端。服务器端获取这些参数，调用相应的服务器处理函数，该函数根据请求从数据库服务器获取相应的数据，然后对数据进行编码，一般采用XML编码，将编码后的数据发送到客户端。客户端中的JQuery函数解析这些编码的数据，并调用DOM、VML或SVG将这些数据通过文字或图形的形式展示在浏览器的界面上。在界面更新之前的流程对用户来说是透明的，用户在这期间可以继续进行其它的操作而不必等待，所以整个程序具有很好的用户体验和交互性。4优化方法采空区自燃监测系统的Web子系统和其它Web实时监测系统相比有着如下的特点：（1）监测量比较多，数据采集频率相差比较大。所以为了能够实时的显示各个监测量，需要对各个监测量设置不同的采集频率以便获取最新的监测数据。（2）需要传输的数据量比较大。仅分布式光纤测温一次就会在几千米长的光缆上每隔一米返回一个位置数据和温度数据，加上编码使用的XML标记，需要传输的数据量是很巨大的。因此整个Web监测系统的性能比较低，制约整个程序的瓶颈问题是浏览器和服务器之间的数据请求和数据传输问题。虽然采用Ajax技术可以实现按需获取数据，减少非必要的数据传输，但是因为需要实时获取多个监测量的值，客户端对服务器的HTTP连接请求依然比较多。XMLHttpRequest异步请求是建立在HTTP通信的基础上的，而HTTP与服务器的连接使用的是同步方式，因此过多的异步请求有可能产生请求等待，影响这个程序的效率[6]。而且每次传输的数据量过大，需要占用大量的网络带宽，延长客户端与服务器的交互时间，进而影响其它请求的执行。因此对于综合监测系统的性能优化应该从减少异步请求数量和减少数据传输量两个方面进行优化：1）减少异步请求数量将具有不同采集频率的气体浓度和温度等各个监测量获取最新数据的异步请求进行合并。具体措施是在采集频率最高的监测量每次异步请求数据时判断其它监测量是否需要更新数据，如果需要更新数据，则通过一次XMLHttpRequest异步请求告诉服务器需要返回哪几个监测量的最新监测数据。2）压缩客户端与服务器传输的数据量客户端向服务器异步请求新的监测数据时，因为采集设备或者其它原因，服务器上的数据有可能没有更新，这样服务器就没有必要将监测数据重新发送给客户端。可以通过将最新数据采集时间与上次传送给客户端的数据的采集时间进行比较，判断请求的监测量是否有新的采集数据。如果没有新的采集数据则服务器仅需要通知客户端没有新数据，不需要重复传输上次发送给客户端的新数据。同时为了减少通过网络传输的数据量，我们可以采用Json来代替XML作为服务器和客户端之间数据传输的格式。相对于XMLJson具有数据体积小，传输快的特点，可以减少实际传输的数据量。而且Json还具有易于解析、使用简单等优点，非常适合传输数据量比较大的实时监测系统。3）提高第一次页面请求速度因为监测系统采用Ajax所以需要使用大量的脚本程序作为客户端处理程序。脚本文件数量较多以及脚本文件过大都会造成页面第一次请求的速度变得非常缓慢[6]。可以采取减少脚本文件数量，压缩文件大小的方式来提高第一次请求页面的速度。脚本文件需要在页面第一次加载的时候下载到客户端，每一个脚本文件的获取都需要建立一次HTTP连接。因为采用Ajax的Web程序脚本文件的数量比普通Web程序要多，所以采用Ajax的Web程序第一次加载的页面时需要建立的HTTP连接数量比一般Web程序要多，加载速度相对缓慢。为了减少页面第一次加载时HTTP连接请求的数量可以将需要使用的各个脚本文件导入或者合并到一个文件，这样下载脚本文件仅仅需要建立一次HTTP连接。将脚本文件进行合并可以减少页面第一次加载时HTTP连接请求的数量，但是脚本文件比较大还是会影响页面的加载速度。可以使用压缩模块对页面请求的脚本资源进行高强度GZIP压缩（一般能压缩到只有1/5的体积）。压缩模块在页面被客户端第一次请求的时候自动在服务器端进行压缩处理，压缩处理的时间很快，几乎可以忽略不计，但压缩后的页面加载速度却提升明显。5系统流程与实现使用JQuery和Json实现的Web实时监测系统分为客户端和服务器端两个部分。5.1客户端客户端通过使用JQuery编写脚本来实现Ajax异步数据的传输。其主要工作过程是定时将需要获取的监测量作为参数传输到服务器。然后等待服务器返回的数据，返回数据为Json编码，获得这些数据后使用指定的函数进行处理，处理函数通过success指定。处理函数首先解析这些数据，判断每种检测量是否有数据返回，如果获得新数据则更改浏览器的显示信息。客户端主要代码如下：scriptlanguage=javascripttype=text/javascriptsrc=jquery-1.1.3.1.pack.js/scriptscriptlanguage=JavaScript、、、、、、、、、、、、、、、、、Functionbind(){$.ajax（{type：get，//使用get方法访问后台dataType：json，//返回json格式的数据url：Handler.ashx，//要访问的后台地址data：GetType，//需要发送到服务器的参数success：function（msg）{//msg为返回的数据，在这里做数