AjaxSVG实现煤矿井下排水的实时监测_图文.doc

收稿日期2010－09－10;修回日期2010－12－01 基金项目黑龙江省教育科学振兴老工业基地项目1152gzd08作者简介李春华1959－,女,黑龙江尚志人,教授,硕士,研究方向为智能控制及故障诊断。 Ajax SVG 实现煤矿井下排水的实时监测 李春华,李春静 黑龙江科技学院电气与信息学院,黑龙江哈尔滨150027 摘 要为了解决传统B /S 结构实时监控系统在线运行期间存在网络负载大、服务器开销大、客户端与服务器之间的交互 效率低的弊端, 提出了用Ajax 特有异步通讯的方式与CGI 进行下位机通信、与SVG 相结合进行矢量图形实时显示的方法来实现煤矿井下排水系统的在线实时监测。实验证明,这种方法不仅可以减轻服务器的负载而且可以节省网络带宽,网页页面显示无刷新, 曲线图可以自由放大缩小不失真、跨平台,是满足系统要求的一种高效而简便的方法。关键词网络负载;Ajax ;SVG ;实时监测中图分类号TP274 文献标识码A 文章编号1673－629X 201105－0195－03 Ajax SVG to Achieve Real －time Monitoring of Mine Drainage System LI Chun －hua ,LI Chun －jing College of Electric and Ination Engineering ,Heilongjiang Institute of Science and Technology ,Harbin 150027,China Abstract In order to improve the problems of traditional real －time monitoring system ,for example ,high network load ,low data ex-change rate between client and server ,high cost of server ．asynchronism communication of Ajax to realize the communication between upper computers and lower computers．Combine Ajax with SVG to achieve real －time monitoring of the mine drainage system．Practice has proved that this not only can reduce the server＇s load can reduce network bandwidth ,web page showed no update ,you can free to decrease or increase the curve size ,cross －plat ,which is a high effective and simple way．Key words network load ;Ajax ;SVG ;real －time monitoring 0引言随着计算机网络技术的飞速发展, B /S 结构的工业实时监测系统已经受到广泛的关注。然而,传统B /S 模式采用独占式请求、页面整体刷新机制导致客户端与服务器之间页面动态刷新数据冗余大,响应速度慢,带宽占用大,交互效率低 [1] ,客户浏览体验差,给煤 矿井下排水数据的在线实时监测带来了困难。基于此,利用Ajax 技术,采用瘦服务端－胖客户端模式,并且利用Ajax 技术发布SVG 矢量图形,在保证监测系统的准确性、实时性、数据的连续性、数据的准确性的同时,最大程度上优化了在线监测系统浏览器与服务器之间的数据交互量,实现了网页页面数据图表快速实时显示无刷新,并且图形可以放大缩小不失真,大大提高了系统的整体性能。 1系统B /S 平台的设计思想 在同等网络环境下,数据流量是决定在线监测系 统性能的重要参数之一,流量越小系统性能越好,Ajax 的出现很好地解决了这样的问题 [2] ,Ajax 采用异步发 送请求的方式代替采用表单提交来更新Web 页面的方式,从而揭开了无刷新动态更新页面时代的序幕 [3] 。Ajax 的根本理念[4]是“按需取数据”,这减轻 了客户端的内存消耗,它是多种技术的综合,使用XHTML 和CSS 标准化呈现,使用DOM 实现动态显示和交互,使用XMLHttpRequest 对象进行异步数据读取,使用Javascript 绑定和处理所有数据。Ajax 的工作原理 [5] 及与传统B /S 模式比较如图1所示,它相当于 在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。实现只把必须更新的数据提交给服务器,而不是刷新整个页面,像些数据验证和数据处理等都交给Ajax 引擎处理,只有确定需要从服务器读取新数据时再由Ajax 引擎代为向服务器提交请求。这样就把一些服务器负担的工作转嫁到客户端,利用客户端闲置的处理能力来处理,减轻服务器和带宽的 第21卷第5期2011年5月 计算机技术与发展 COMPUTER TECHNOLOGY AND DEVELOPMENT Vol．21No．5May 2011 负担,提供更好的服务响应,提高了系统检测的实时性。 图1传统Web应用模型与Ajax模型的比较在整个程序编写过程中,如何让网页实时的显示检测到的数据,成为重点。为此,用网页表单中的ac-tion功能先选取好指定的C语言编写的CGI程序,用Linux系统的FIFO做为与网页交流的通道。FIFO把检测到的数据读取进来,然后发送给网页端,网页端用Ajax特有的异步请求的方式完成页面数据的实时处理,调用JavaScript脚本,让SVG 的曲线重新定位各点位置,绘制出矢量的动态曲线图。从 而实现网页页面数据和曲线的实时显 示。 2网络服务器的工作原理 服务器提供的其实就是一些文 件,这些文件可供浏览,下位机的数据 能被读取,客户端又可通过服务器对 信息的解析来浏览查看资源,同量向 服务器请求需要的资源。以此来实现 煤矿井下排水的实时监测。该系统采 用采用瘦服务端－胖客户端模式来精 简Web服务器,其工作原理如图2所 示。 由图看,HTTP成为整个服务器的枢纽。它是客户端与网页服务器之间的应用层通信协议。在Inter-net上的网络服务器上存放的都是超文本信息,客户机需要通过HTTP协议传输所要访问的超文本信息。客户端是终端用户,服务器端是网站。HTTP客户端以Ajax的方式发起一个到服务器上指定端口默认端口为80的HTTP请求,建立一个到服务器指定端口的TCP连接。HTTP服务器则在这个端口监听客户端发送过来的请求,根据Ajax请求通过对C语言编写的 CGI的调用来处理与下位机之间的通信, 进而对下位机的设备进行控制,再将结 果做为实时数据加以HTTP包头返回给 上位机,达到上位机与下位机之间信息 处理的目的。实现浏览器与服务器之间 的交互性。CGI给网络服务器提供了一 个与外部程序进行交互的通道,是建立 在网络服务器内的一个程序模块,它可 以执行存储在服务器上的程序。由于C 语言与平台无关,所以选择用C语言来 编写CGI程序[6]。Ajax处理为客户端的 核心部分。它的主要工作过程是先根据 客户端用户的操作请求向服务器发出异 步的Ajax请求,用以实现所必需的更新, 同时再采用异步的方式回应服务器的响 应。当请求有结果返回时,就使用JavaS-cript脚本、DOM和CSS样式相应地更新数据。而SVG 来完成数据的可视化工作,生成监测所需的各种动态曲线图表。以上功能主要通过HtmlJavascript DOMCSS语言并辅以Ajax异步通信和SVG实现。Ajax技术与SVG相结合来表达客户端的显示及提供空间查询接口,有效地实现了负载均衡且可以在客户端和服务器之间进行异步通讯,给用户以最佳的查询体验。 图2网络服务器工作原理 3客户端实时数据图表的实现 3．1AJAX动态显示测量数据 网页客户端采用Ajax[7]定时向网络服务器的的CGI程序模块发送异步请求,CGI程序处理请求并返回数据,当Ajax获得数据后,在不刷新页面的情况下利用DOM技术动态的更新页面数据。为了节省DOM 691 计算机技术与发展第21卷 一步一步地搜寻节点,给需要查询的元素附加了唯一的ID,方便了测量数据的更新。如 //将最新数据写入页面 function writeNum{ ifxmlHttp．readyState4{ //获取成功,设置刷新状态为false isRefreshingfalse; //将获得的实时数据遍历写入页面 var result““xmlHttp．responseText ““; forvar o in result{ document．getElementByIdo．innerHTML result[o]; } } } 由于可变数据量非常小[8],网络只需传输网页页面需要更新的少量数据,这就提高了传输速度,从而实现了实时数据的显示,网络客户端则使用通用的浏览器,当用户修改参数、设定值或者显示实时数据时,只需要打开标准网页浏览器就能完成系统的操作和显示,这就实现了B/S模式的监测。 3．2AjaxSVG绘制实时曲线 SVG[9]是建立于纯文字格式的XML之上的二维矢量图形的语言,直接继承了XML的特性,简化异质系统间的信息交流,方便数据库的存取,可查询。SVG 允许三种类型的图形对象矢量图形的形状,图像和文字[9]。SVG可以直接融入XML和XHTML网页中,可以直接利用浏览器已有的技术,如CSS、DOM、Javas-cript,达到动画及DHTML般的动态效果,支持单向和多向链接等等。更重要的是SVG[10]是W3C制定的网络标准,不受单一的公司控制。 与VML、Flash比较[11],VML也是基于XML的可用来描述矢量图形的标记语言,由客户端解释执行,但它只能在IE浏览器或以IE为内核的浏览器才能用。SVG作为W3C组织正式推荐的图像格式,拥有众多的支持机构。SVG是综合了VML的优点后推出的,是国际标准,它比VML具有更多的优点,也有更广阔的前景。flash虽然不是工业标准,但是有非常广大的用户群,其强大的用户交互能力至今令其他技术望其项背。但Flash的格式是二进制的,其文字内容无法让使用者在浏览器中做字符串搜索。内存占用大,不提倡在大内容网站下用。基于此,客户端的实时曲线是采用SVGAjax的技术来实现的。其中各种技术所起的作用如图3所示 。 图3各种技术所起的作用 SVG负责查询结果的图形显示,而Ajax负责与用户的交互,将空间查询语句传入服务器端并异步动态修改SVG的DOM和表格数据,再利用SVG来绘制实时曲线。利用Ajax技术定时向服务器请求更新实时曲线所用的数据,如果数据更新了,则调用JavaScript 脚本让SVG的曲线重新定位各点位置,这样就实现了图表的实时刷新。 4系统性能测试 从系统功能的正确性和服务器性能的优劣和客户端CPU占用三方面对该系统性能进行测试[12],正确性测试主要包括页面跳转、功能验证、数据检验,客户端通过IE、Firefox浏览器向服务器发送HTTP请求,如果可以正确返回所需网页或相应的错误提示,说明整个系统的运行正常。 服务器性能测试主要使用Web服务器性能测试工具进行服务器性能测试,其测试主要参数的结果如表1所列。客户端CPU占用为1 3。 表1服务器性能测试 测试内容测试结果 平均每秒响应次数4．11RPs 平均带宽3．59kh/s 平均首字节返回时间18．15ms 平均末字节返回时间180．34ms 成功响应率100 5结束语 该系统采用Internet作为通信方式,CGIAjax SVG结合,实现了以往用户使用C/S软件才能实现的实时监测图表的功能,而且与传统C/S模式的煤矿排水检测系统比较,维护简便、操作简单、跨平台性强,由于不需要再编写、安装和维护客户端的软件,所以降低了开发、维护的成本和开发周期,实现了节省人力、物力、资金等的目的。 下转第201页 791 第5期李春华等Ajax SVG实现煤矿井下排水的实时监测 均误差范围为－0．812 1．403;当被测阻值为99．6kΩ时,系统平均误差范围为－2．345 3．465。可见,系统总体误差较小,基本满足系统需求。造成误差存在的原因可能有以下几点 1分压网络中所使用的分压电阻阻值仍存在误差。 2放大隔离电路中AD620实际增益和程序软件中设置的增益大小之间存在误差。 3刺激器输出的16个高压脉冲的平稳度、幅度和脉宽不一致引起各通道间的误差。 3．2人体测试实验结果 进行人体测试时,将刺激电压调节到适当的电压值,受试者将参考电极一端握在手心,然后,将测量电极贴着受试者皮肤,沿着太阴肺经的尺泽穴到太渊穴位缓慢移动。此时计算机实时显示出检测阻抗值结果,计算机输出显示结果为16ˑ1阵列点构成的灰度图阻抗越低灰度越高,每个阵列点的灰度对应一个测量电极触点处的皮肤阻抗值,其灰度随着对应电极点的阻抗值变化而变化。 4结束语 系统采用多通道数据采集模式,极大地提高了经络点的检测速度,同时通过对分压网络的调整改善了系统的整体精度。采用USB接口进行通信,具有数据传输速度快和即插即用的优点。本系统的研究不仅为经络穴位检测提供一种高精度、可视化的手段,也为临床针灸寻穴提供科学的理论依据和方法,推动了中医针灸学与先进信息处理技术的结合。 今后,可着重研究经络检测系统与三维可视化技术的结合,进一步提高系统精度、稳定度,改善系统对环境的适应能力等问题。 参考文献 [1]张维波．经络是什么[M]．北京中国科学技术出版社, 199755－58． [2]杨国平,贾晓航．皮肤阻抗等效电路及经络低阻抗原因探 讨[J]．中国医学物理杂志,1998,15131－32． [3]郑海锋．基于磁定位系统的三维医学超声系统的图像采集 与校准方法研究[D]．福州福州大学,200319－38． [4]王文艇,钟季康,马骏,等．生物阻抗技术概述[J]．上海 生物医学工程,2005,262119－123． [5]Gedees L A,Baker L E．Principles of applied biomedical in- strumentation[M]．Third Edition．New YorkWiley－Inter- science Publication,1989537－576． [6]Polczynski M H,Seitz M A．Low－frequency4－probe im- pedance measuring system[J]．Med．＆Biol．Eng．＆Comput, 1979,156573－576． [7]Palko T,Bialokoz F,Weglarz J．Multi－frequency device for measurement of the complex electrical bio－impedance－de- sign and application[C]//Conference of the Biomedical Engi- neering Society of India．India[s．n．],199545－46． [8]柴英,周忠琴,姜良平．对经络的物理检测与对经络存在 形式的探讨[J]．大连医科大学学报,2005,27173－ 75． [9]王玉忠,陈新,蔡光东,等．基于Windows平台的皮肤阻 抗检测系统设计[J]．计算机技术与发展,2008,183192 －195． [10]Analog Devices,Inc．AD620Datasheet[M]．[s．l．]Analog Devices,Inc,1999． [11]北京双诺公司．MP425USB采集卡说明书[M]．北京北京 双诺公司,2006． [12]王文武,王诚,郝燕玲,等．多媒体定时器的定制和使用 方法[J]．计算机应用,2000,203 檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪 39－41． 上接第197页 参考文献 [1]克拉恩,帕斯卡雷洛,杰姆斯．Ajax实战[M]．北京人民 邮电出版社,2006． [2]王阳阳,孟芸．Ajax技术在安全生产监管平台中的应用 研究[J]．电脑知识与技术,2009,957157－7158．[3]Garrett J J．AjaxA New Approach to Web Applicaons[EB/ OL]．2010－03．http//www．adaptivepath．com/publica- tions/essays/rchives/000385．php． [4]佘名高,王程根．基于Web2．0的Ajax技术的开发[J]．计 算机技术与发展,2007,175203－209． [5]李刚．基于J2EE的Ajax宝典[M]．北京人民邮电出 版社,2006． [6]宋晓梅,海志华．基于嵌入式Web服务器的水情测报系统 的设计[J]．微计算机信息,2008,29849－50． [7]MIT．W3C’S DOM[EB/OL]．2010－03．http//www．w3． ors/Dom． [8]徐英娟．利用Ajax提高页面载入速度[J]．网络与通信, 2009,9484－87． [9]Scalable Vector GraphicsSVG[EB/OL]．2010－03．A- vailablehttp//www．w3．org/TR/SVG/． [10]马占锋,董桃利．SVG图象技术及其简单应用[J]．电脑知 识与技术,2010,116436－437． [11]李明翠．SVG_VML_FLASH三种实现统计饼图的方式比较 [J]．多媒体技术及其应用,2007,1821721－1722．[12]张齐,张英彬．嵌入式Web污染源自动监测系统[J]． 电子设计工程,2009,17111－3． 102 第5期张碧仙等经络可视化研究中多通道经络检测系统的设计