（信号与信息处理专业论文）基于websvg的电网信息数据展示的研究与应用.pdf

华北电力大学硕士学位论文 i 摘 要 伴随着我国城市建设和社会的快速发展，社会对电力的需求越来越大， 电网信息化的重要性越来越突出， 因此建立一个智能信息化的电网是电力行 业发展的必然趋势。 面对复杂的生产管理， 考虑到电网的安全性和生产效率， 电网企业领导和其他管理部门在指挥生产和管理中， 需要及时的了解电网的 实时信息、历史信息等电力系统的全面信息数据，以便对电网的经济运行、 状态评估、生产规划等做出正确的决策。 本文针对电网信息数据展示，在研究相关文献的基础上，依据电网公司 的有关文件和电力公司的实际需求，分析了 scada 系统不能直接作为调度 以外部门电网信息展示平台的原因，提出了基于 web-svg 的调度实时信息 展示与曲线分析系统的可行性，并给出了具体设计原理和实现方法。 本系统在数据存储方面， 根据电网信息数据的类型和特点创建相应的数 据库和数据表，如对实时数据的存储采用了纵向表，历史数据按照存储策略 存放在横向表中。 在数据展示方面， 系统采用 myeclipse 开发软件， 使用 j2ee 语言，开发基于 b/s 结构，浏览器端使用 ajax 异步请求技术，利用浏览器 端调度器的周期性自动功能调用来实现浏览器端的定期自动请求， 后台 web 服务器采用 weblogic9 进行业务逻辑分析处理，查询并获取数据库中的相关 数据并将数据返回给浏览器端，这些数据配合浏览器端的 js 脚本，将 xmlhttprequest object 的异步请求和 svg 画面中 dom 动态的结合起来， 动态实时的展示了信息数据的变化。 该系统平台可以实时发布和展示调度实 时信息、svg 一次接线图、电网历史状态、并对实时数据和历史数据进行 曲线分析展示。系统还从安全角度出发，设计了人员权限和角色权限结合， 禁止权限和允许权限结合的综合管理原则。基于 web-svg 的调度实时信息 展示与曲线分析系统的研究对电力系统安全、经济、稳定运行有着极为重要 的意义。 关键词：电网信息；实时；历史；展示；ajax； svg； 曲线分析； 权限设置 华北电力大学硕士学位论文 ii abstract with the urbans construction and social development of our country, society needs more and more on electricity, the importance of the power grid information is becoming more and more prominent, therefore establish a intelligent information power grid will be the inevitable trend in the development of electric power industry, facing the complicated production management, considering the grid security and efficiency in production, the leadership of grid enterprises and other administrative departments at directing production and management, need understanding of grid real-time, historical information for power system comprehensive information timely, so that they can make the right decision for the state evaluation, production planning etc of power grids. this paper is based on power grid data display, on the basis of previous literature research, based on relevant documents of power grid and electric company actual demand, analyzes the reason of the scada system cant be used as the display platform for the department outside of scheduling directly, put forward the scheduling real-time information display and curve analysis system based on the web-svg is feasible. in data storage aspects, this system create corresponding database and data sheet according to the power grid data types and characteristics, as to the real-time data storage adopted longitudinal table, historical data store in transverse table according to the policies. in data show, this system adopts myeclipse development software, using j2ee language, development is based on b/s structure, the browser using ajax asynchronous request technology，use the schedulers periodic automatic function calls of browser to realize the automatic periodic request, backend server using weblogic9 for business logic analysis, query and retrieve relevant data in the database and return these data to the browser, it cooperates with the js script of browser, make asynchronous request of xmlhttprequest object and svg picture dom be together, display the real-time information data changes dynamically. this system platform can real-time release and display scheduling real-time information, svg once hookup, grid history data, curve analysis and show real-time and historical data. considering the safety, system realizes the personnel access permissions and role of combined, prohibit permissions and permission combination. the research of scheduling real-time information display and curve analysis system based on web-svg has a very important significance for power system security, economic and stable operation. keywords: power grid information；real-time；history；display；ajax；svg； curve analysis；authorization 华北电力大学硕士学位论文原创性声明 本人郑重声明：此处所提交的硕士学位论文基于 web-svg 的电网信息数据 展示的研究与应用 ，是本人在导师指导下，在华北电力大学攻读硕士学位期间独 立进行研究工作所取得的成果。据本人所知，论文中除已注明部分外不包含他人已 发表或撰写过的研究成果。对本文的研究工作做出重要贡献的个人和集体，均已在 文中以明确方式注明。本声明的法律结果将完全由本人承担。 作者签名： 日期： 年 月 日 华北电力大学硕士学位论文使用授权书 基于 web-svg 的电网信息数据展示的研究与应用系本人在华北电力大学 攻读硕士学位期间在导师指导下完成的硕士学位论文。本论文的研究成果归华北电 力大学所有，本论文的研究内容不得以其它单位的名义发表。本人完全了解华北电 力大学关于保存、使用学位论文的规定，同意学校保留并向国家有关部门或机构送 交论文的复印件和电子版本，同意学校将学位论文的全部或部分内容编入有关数据 库进行检索，允许论文被查阅和借阅。本人授权华北电力大学，可以采用影印、缩 印或扫描等复制手段保存、可以公布论文的全部或部分内容。 本学位论文属于（请在以上相应方框内打“” ） ： 保密，在 年解密后适用本授权书 不保密 作者签名： 日期： 年 月 日 导师签名： 日期： 年 月 日 华北电力大学硕士学位论文 1 第 1 章 绪 论 1.1 引言 随着我国城市建设和社会的快速发展，用电负荷日益增长，电网运行的控 制及管理工作变得较以往任何时期都更为复杂。由于现代电网运行管理直接面 对电力企业和广大的电力用户，网络数据量大，电气接线复杂，动态变化频繁， 现有的电网运行管理手段已经难以适应现代化电网生产建设和发展的需要。为 了进一步满足电力企业及其广大用户对电网“安全、可靠、优质、高效、经济运 行”的现代化要求，需要采用现代化的技术和管理手段来进行规划和管理，以便 增强对电网设备的资产管理，运行管理和监督能力，提高供电可靠性和电能质 量，从而更加及时的为电力客户提供优质、高效、安全的服务。 电力系统在加强以调度为核心的生产自动化和现代化的同时，又大力推进 管理现代化的进程。在国家“以信息化带动工业化”的发展战略指引下，上世纪 80年代以来我国电力企业信息化工作取得显著成效，电力调度部门scada系统 也取得了很大发展，采用scada系统采集电网实时数据并展示已经是一种比较 成熟而且非常有效地技术。scada系统中的图形格式一般采用svg格式， svg(scalable vector graphic)即可伸缩矢量图形，是基于xml语言来描述二维图 形的一种矢量图形标准，可以构造矢量图形、位图图像和文字三种类型的图形 对象1。它具有缩放不失真、文字易被查询、修改存储文件小、易于跟用户交 互等特点。在电力系统中，企业领导和各级管理者需要能够全面、及时的了解 电网运行的实时信息，才能够对生产问题做出正确判断和决策。但考虑到信息 系统的安全因素， 全国电力二次系统安全防护总体方案规定，电力二次系统 安全防护是按着 “安全分区、网络专用、横向隔离、纵向保证” 的总体原则来 进行设计制定的。目前状况下,电力系统中整个电力二次系统分为4个安全区， 这4个安全区按照安全等级由低到高依次为：管理信息区(安全区iv)、生产管理 区(安全区iii)、非控制生产区(安全ii)、实时控制区(安全区i)。安全的web服务 放在非控制生产区（安全区ii） ，安全的web服务与ems共用实时/历史数据库， 在web服务器上可创建实时数据库的副本，并由实时数据库系统维护数据的一 致性。普通的web服务放在生产管理区（安全区iii） ，它与实时控制区、非控制 生产区之间通过电力安全隔离装置进行物理隔离，同时又在web服务器上创建 相应实时数据库和历史数据库的应用，由ems提供同步服务，实时控制区的数 据定时通过正向安全隔离装置，将相应数据库中的数据传送给生产管理区的 华北电力大学硕士学位论文 2 web服务器。安全web与普通web的不同仅仅是在服务器数据库中的数据访问 上，而用户浏览器端对服务器的数据访问处理流程是基本相同的2。电网调度 实时数据不能以传统的web server的方式直接为管理者所应用3， 而且电网最重 要的调度实时信息一般是针对调度人员工作需要的形式而提供的，而企业领导 和管理人员与负责调度运行的人员对电网实时信息的要求存在差异，ems为电 网运行调度人员提供的实时数据及数据的展示方式不能很好的满足企业领导和 各级管理人员的需要4。在这种情况下，电网企业迫切需要针对企业领导和管 理人员的管理需要和决策需求提供和展示电网运行的实时信息，本系统正是根 据这些差异化需求而设计开发，从而为调度部门以外的管理人员提供了电网实 时数据展示平台。 本系统是在b/s结构体系下，运用myeclipse6.5开发平台，利用j2ee语言开 发的基于web-svg展示调度实时数据，基于flash展示电网数据的曲线分析，并 设置了系统的管理和使用权限。这可以保证用户在系统允许的范围内了解相关 的电网实时运行状况，便于其分析和做出决策。 1.2 课题的国内外研究现状 1998年4月，w3c联盟(world wide web consortium)出台第一个svg草案， 2000年8月，w3c正式发布了svg1.0规范。2003年1月14日，w3c组织发布了 svg1.1规范。2005年4月w3c发布了svg1.2草案，也是目前的最新版本。 svg展示系统经历几代的发展到现在，无论在功能性还是在可用性上都得 到了很大的提高。按照体系结构来划分，展示系统经历了以下四代： 第一代为主机终端体系结构； 第二代为客户机/服务器（c/s）体系结构； 第三代为功能分布式体系结构； 第四代为基于web的b/s的体系结构。 随着计算机技术的不断发展与应用，计算机模式从集中式转向了分布式， 以两层结构c/s模式为代表，c/s结构即client/server（客户机/服务器）结构，在 二十世纪八十年代及九十年代初由于可视化的开发工具的推广得到了大量应 用，随着网络技术的不断发展，它开始向三层结构发展，基于web的信息发布 和检索技术、java计算技术以及网络分布式对象技术的飞速发展，导致很多应 用系统的体系结构从c/s结构向更加灵活的多级分布结构演变， 使得软件系统的 网络体系结构跨入一个新阶段，即b/s体系结构结构，browser/server(浏览器/ 服务器)结构，它是伴随internet技术的兴起，对c/s结构的一种变化或改进的结 构。b/s结构下，用户界面完全通过www浏览器实现，一部分事务逻辑在前端 华北电力大学硕士学位论文 3 实现，但主要事务逻辑是在服务器中实现。b/s结构主要利用不断成熟的浏览器 技术并结合浏览器的多种script语言（vbscript、javascript）和activex技 术，用通用浏览器就可实现的原本需要复杂专用软件才能实现的强大功能。与 c/s相比，b/s具有易部署性、便于升级和管理、增强网络适应性优点5。随着 windows 98/windows 2000/windows xp将浏览器技术植入操作系统内部，b/s结 构成为当今应用系统的首选。 b/s结构采用星形拓扑结构或利用internet虚拟专用 网(vpn) 建立企业内部通信网络。星形拓扑结构安全、快捷、准确，虚拟专用 网节省投资、 跨地域广。 企业内部采用tcp/ip传输通信， 通过防火墙接入internet。 1.3 本文主要研究内容和工作 本课题是基于某省电网投资效益考核数据支撑系统开发研究的， 利用ajax 技术将电网信息数据动态实时无刷新展示出来。课题主要的内容如下： 基于web-svg的调度实时信息展示与分析系统分为调度实时信息展示、数 据曲线分析展示、权限设置三部分。调度实时信息展示部分展示的是电网svg 图、实时数据和历史数据。数据曲线分析展示部分展示的是实时数据和历史数 据的曲线分析。权限设置部分是根据权限规则进行权限管理设置。 本课题基于ajax技术的跨平台实时展示实现了以下三个方面： （1）采用b/s结构下的ajax异步传输技术，客户端拥有瘦身的轻便，又可 以动态实时展示电网信息数据且不会出现屏幕闪烁。 （2）浏览器端展示画面采用svg格式，利用浏览器本身对svg技术的解析 支持， 采用js脚本操作监控图形画面的dom， 极大的简化了处理画面的工作量。 （3）曲线展示通过后台异步载入数据生成flash图片，图形流畅丰富、简 单、直观。 华北电力大学硕士学位论文 4 第 2 章 系统开发的软硬件环境和开发工具 2.1 系统开发环境 基于 web-svg 的电网信息数据展示平台的开发的硬件要求是能够运行 myeclipse6.5 开发软件， 本系统开发采用了基于联想台式机， 其系统开发调试硬 件平台配置是 cpu 为 p4 3.0ghz， 内存为 1g， 显示屏为 17 时 lcd， 硬盘： 160g。 开发调试系统软件环境为：操作系统为 windows xp，程序开发环境为 myeclipse6.5，myeclipse 企业级工作平台（myeclipse enterprise workbench,简 称 myeclipse）是对 eclipse ide 的扩展，它使得在数据库和 j2ee 开发、发布， 以及应用程序服务器的整合方面极大的提高了工作效率6。它是功能丰富的 j2ee 集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持 html，struts，css，jsf，hibernate，javascript, sql 等。本系统的 web 编程 采用的是 j2ee 技术 ，j2ee 即 java2 平台企业版（java 2 platform, enterprise edition）,j2ee 核心是一组技术规范与指南，其中所包含的各类组件、服务构架 及技术层次，均有共同的标准及规格，让各种依循 j2ee 构架的不同平台之间， 存在良好的兼容性，解决过去企业后端使用的信息产品彼此之间无法兼容，企 业内部或外部难以互通的窘境7。 2.2 前台用户浏览器端配置环境 用户客户端操作使用该系统平台的硬件配置要求是：cpu 主频不低于 p4 2.0，内存不小于 512m，硬盘容量不小于 40g，目前市场上的 2004 年以后主流 的机器配置都可以满足其配置要求。软件环境是浏览器端采用 ie5 以上版本， 浏览器端需要安装 svg 浏览器插件即 svg viewer 6。 2.3 后台服务器环境 2.3.1 web 服务器 不同的网站对于 web 服务器硬件需求是不同的，如果 web 站点是静态的， 对 web 服务器硬件要求从高到低是：网络系统、内存、磁盘系统、cpu。如果 web 服务器主要进行密集计算，如动态产生 web 页，则对服务器硬件需求依次 为：内存、cpu、磁盘子系统和网络系统。表 2-1 列出了不同应用对于服务器 关键部件的需求情况： 华北电力大学硕士学位论文 5 表 2-1 服务器关键部件需求情况表 应用情况 cpu 数量 内存数量(mb) 只有静态网页 1 128256 生成动态网页 2 2561gb 局域网 200 次访问/秒 1 256512 局域网 500 次访问/秒 2 5121gb 局域网 1000 次访问/秒 24 1gb8gb 考虑到本系统的动态网页的访问次数较大，web 应用服务器处理器硬件配 置处理器采用 inter xeon(r)cpu e7420(2.13g)*2；内存是 3.24g ddr2-667；硬 盘是 5*146gb sata 硬盘。在应用服务器选择方面，tomcat 服务器是一个免费 开放源代码的 web 应用服务器，它运行时占用系统资源小，扩展性好、支持负 载平衡与邮件服务等开发应用系统常用的功能， 但 tomcat 是一个小型的轻量级 应用服务器，一般用在中小型系统和并发访问用户不是很多的场合。jboss 是一 个基于 j2ee 的开放源代码的应用服务器，它具有安装简单、占用内存和硬盘空 间比较小、 可以热部署、 运行效率高、 安全可靠， 但 jboss 不包括 servlet/jsp page 的 web 容器，jboss 核心服务仅是提供 ejb 服务器。weblogic 是美国 bea 公 司出品的一个应用服务器，确切的说是一个基于 j2ee 架构的中间件。它是用于 开发、集成、部署和管理大型分布式 web 应用、网络应用和数据库应用的 java 应用服务器,将 java 的动态功能和 java enterprise 标准的安全性引入大型网络应 用的开发、集成、部署和管理之中8，它具有领先的标准、无限的可扩展性、 快速开发、部署更趋灵活、安全可靠等特点。bea weblogic server 拥有处理关 键 web 应用系统问题所需的性能、 可扩展性和高可用性， 它既实现了网页群集， 也实现了 ejb 组件群集，而且不需要任何专门硬件或操作系统支持。考虑到电 力企业的相关需求，本系统使用 web 服务器是基于 windows2003 操作系统，采 用 weblogic9 application server。 2.3.2 数据库服务器 在企业的信息化建设中，数据库是最广泛的一种应用。构建数据库服务器 可以将企业内部数据合理进行存储和组织，使企业信息的检索和查询执行更为 高效。目前主流应用的数据库产品有微软 sql server、mysql、access、sybase、 ibm db2 和 oracle。sql server 是真正的客户机/服务器体系结构，它具有图形 化用户界面，使系统管理和数据库管理更加简单直观，但 sql server 只能在 windows 上运行，开放性较差，sql server 很难处理日益增多的数据，伸缩性有 限。mysql 是一个开放源码的小型关系型数据库管理系统，由于其体积小、速 度快、总体拥有成本低，它广泛的应用在 internet 上的中小型网站中。access 华北电力大学硕士学位论文 6 是一种桌面数据库，在处理少量数据的单机访问的数据库时效果很好、效率也 很高，但它的同时访问客户端不能多于 4 个，因而它只适合少量数据的应用。 sybase 是一种典型的 unix 或 windowsnt 平台上客户机/服务器环境下的大型 数据库系统， 它可以存储海量数据。 但与 oracle 相比， sybase consulting services 缺乏提供复杂客户机/服务器解决方案的实践经验和广博的知识、开发较复杂、 数据共享程度低、它的系统稳定性也不如 oracle。db2 是 ibm 公司研制的一种 关系型数据库系统，它主要应用于大型应用系统，具有很好的伸缩性，可支持 从大型机到单用户环境，应用 os/2、windows 等平台下。db2 提供了高层次的 数据利用性、完整性、安全性、可恢复性，以及小规模到大规模应用程序的执 行能力，具有与平台无关的基本功能和 sql 命令。db2 还拥有一个非常完备的 查询优化器，其外部连接改善了查询性能，并支持多任务并行查询。db2 很好 的网络支持能力使得每个子系统可以连接十几万个分布式用户，可同时激活上 千个活动线程，很适合大型分布式应用系统。oracle 提供了基于角色分工的安 全保密管理，支持海量数据存储，提供了与第三代高级语言的接口软件，能在 c+、 java 等语言中嵌入 sql 语句及过程化语句， 对数据库中的数据进行操纵， 可以快速开发生成基于客户端 pc 平台的应用程序，具有良好的移植性，oracle 还提供了新的分布式数据库的能力。针对省电力公司的数据类型和情况，服务 器数据库应具备超强处理能力，能够处理大量的查询请求并快速作出应答，系 统既可以采用 db2，又可以采用 oracle 进行数据存储，但考虑到省电力公司已 有 oracle 数据库，本系统后台服务器数据库便采用省电力公司的 oracle10g 数 据库，它是第一套具有无限可伸缩性与高可用性，并可在集群环境中运行商业 软件的互联网数据库，具有 400 多个领先的数据库功能，在集群技术、高可用 性、商业智能、安全性、稳定性、系统管理等方面都实现了新的突破9。oracle 能够提供包括平台产品、应用产品和完善的服务在内的先进的、完整的、集成 的电子商务解决方案。 2.4 本章小结 本章针对基于 web-svg 的电网信息数据展示的平台开发给出了系统开发 的硬件环境、软件环境和系统开发软件 myeclipse6.5。针对用户的操作使用，本 章给出了具体的前台用户浏览器端配置环境和后台服务器环境。 华北电力大学硕士学位论文 7 第 3 章 web 相关技术 3.1 scada 技术 scada(supervisory control and data acquisition)即监视控制与数据采集系 统，是指以计算机为基础的过程控制与调度自动化系统，scada 可对运行设备 进行监视和控制，它可以实现数据采集、设备控制、对时、测量、时间顺序记 录、事故追忆、生成报表、参数调节以及各种信号报警等功能，其最核心的技 术是可以实现统一管理、支持变结构、支持实时和历史计算的数据库。scada 主要由 rtu(远程终端)、控制站点（系统控制中心）组成10。scada 系统在电 力系统中的运用已经非常成熟，是实现电网监视与控制的重要基本功能手段， 是实现电网自动化的基础。 3.2 svg 技术 svg(scalable vector graphics)即可伸缩矢量图形，是 w3c 组织为适应 internet web 应用飞速发展的需要而制定的一套基于 xml(extensible markup language)语言的用描述矢量图形和图像的标准规范。 电力系统中， 电力 scada 系统中的图形一般采用 svg11。 svg 作为互联网应用而制定的图像格式在网络 应用中有如下一些特点12,13,14 ： （1）svg 基于 xml 的图像标准，是一种基于 xml 语言的纯文本的图像 格式。 （2）svg 是一种矢量图形。与位图相比，svg 文件的大小与图形的具体 尺寸无关，而与图形的复杂程度有关；svg 图形的显示尺寸可无级缩放，任意 放大和缩小都不影响图形的质量。因而它非常适合在网上传输。 （3） svg 完全支持文档对象模型(dom),因此 svg 中的图形对象完全可以 通过脚本语言来接受外部事件的驱动，以实现对 svg 的控制。 （4）svg 采用了简单高效的矢量指令，因而集成 svg 的 xml 文档更小， 非常有利于网络上的传输和下载，svg 可以作为解决目前网上浏览瓶颈的最佳 方案。 （5）svg 通过使用 xml 灵活的标记特性，可以为图形对象提供一定的语 意，非常方便图形的搜索。 （6）svg 同 xml 规范的无缝链接以及标记语言的平台无关性，赋予了 svg 跨平台的特性。 华北电力大学硕士学位论文 8 xml 因具有跨平台、 自描述和可扩展等特性而广泛应用于数据交换和传输 中，由于 svg 基于 xml，所以很多处理 xml 的工具都可以处理 svg 图形， svg 图形的读取、编辑、发布也因此而变得简单轻松。电力 svg 图形提供了 丰富的消息触发和时间响应函数， 可以充分和有效地反映电网的实时运行状况。 3.3 json 格式数据交换 svg 图形以 xml 格式将内容存储在数据表中，xml 格式传输的优点是通 用性好，支持跨平台和便于网络传输，它还有现成的 api 来组织和解析 xml 格式的数据，xml 还可以转换成其它形式的数据格式。但 xml 传输也有缺点， xml 文件需要在数据中加入各种标签，这就使得有效数据占总数据的比重下 降，使得传输的数据效率降低，而且现在的 api 解析处理 xml 文件效率低， 处理复杂和运行速度慢。而 json 格式数据传输在传输方面有着明显的优势， json 即 javascript object notation,它是一种轻量级的数据交换格式。既易于及 其解析和生成，又方便人们的阅读和编写。json 是一种用于在 2 台机器之间的 传输数据的数据交换格式，它承载的只是数据而不含有赋值和调用15。json 构建于两种数据结构：一种是“名称/值”对的集合。在不同的语言程序应用中， 它被理解为 object(对象)，record(记录)，struct(结构)，associative array(关联数 组)，keyed list(有键列表)等等；另一种是值的有序列表，在大部分语言应用中， 它被理解为 array(数组) 16。 json 中的遥测数据格式是 “dataid”:dataid,“value”:value, “dataid”:dataid,“value”:value json 中的遥信数据格式是 “dataid”:dataid,“status”:status, “dataid”:dataid,“status”:status 遥测数据中“ ”中的 dataid 是固定格式字符串，后边没有“ ”的 dataid 是本 系统 svg 图中待测图元的 id。“ ”中的 value 也是固定字符串，无引号的 value 为待测图元的实际数值。遥信数据跟遥测数据格式类似，不同的是没有“ ”的 status 表示状态量，只有 0 和 1 两个数值。随着基于 web-svg 的调度实时数据 展示的数据量日益增大和数据处理的工作越来越繁重，采用 json 格式数据可 使本系统能有效地减少数据传输量和数据处理的复杂度。 3.4 ajax 技术 ajax(asynchronous javascript and xml)即异步 javascript 和 xml17。在 华北电力大学硕士学位论文 9 传统的 web 使用过程中，用户在操作浏览器过程中，在触发点击浏览器时，浏 览器会按照当前的页面状态向 web 服务器发出 http 请求。web 服务器在收到请 求后，先是分析浏览器端发送的请求内容，然后在进行数据处理等一系列操作 后，做出相应的响应并返回给浏览器端。浏览器端根据接收到服务器端响应的 内容来刷新用户的视图界面18。如图 3-1 所示：即用户操作浏览器端，然后通 过网络将请求数据传输给服务器处理，服务器在处理完以后又通过网络将处理 后的数据传输给浏览器端。用户点击触发一次，浏览器请求一次，浏览器端向 服务器端传输一次请求，经服务器处理后的数据传回给浏览器端，这个周期以 用户打开或点击触发浏览器为起点， 以服务器返回浏览器端响应数据为终点19。 图 3-1 传统 web 应用程序执行过程图 而 ajax 技术使用的是包含 html 页面中的 javascript 脚本向服务器发出 异步数据请求的，web 服务器在收到请求后分析处理，返回给客户端一个包含 xml格式数据的响应。 html中的 javascript脚本使用 xml文档对象模型 dom 解析服务器端发送过来的响应数据，并根据这些响应数据内容使用 dom 生成 或刷新浏览器端视图界面。在这个程序执行过程中，javascript 脚本还承担响应 用户的操作事件20。图 3-2 是使用 ajax 技术后的 web 程序执行流程图。在使 用 ajax 技术后，用户在打开浏览器用户界面以后，ajax 引擎启动，浏览器端 自动向后台服务器发送 http 请求，浏览器端向服务器端数据传输一次，服务器 就处理数据一次，处理后的数据传回给浏览器端一次，这个周期以用户打开或 点击触发浏览器为起点，以服务器返回浏览器端响应数据为终点21。ajax 引 擎自动按先前设定好的时间定期向服务器发送请求（无需用户重复点击触发浏 览器端界面） ，服务器处理请求后返回响应数据，从而大大方便了用户的使用。 在前台的浏览器和后台的服务器定期自动交互过程中，用户还可以在前台浏览 器界面中进行其它请求操作。ajax 引擎的请求和用户的其它请求可以同时进 行，后台服务器在收到这些请求后分别进行处理，并返回给浏览器端响应的信 华北电力大学硕士学位论文 10 息数据22。 图 3-2 使用 ajax 技术后的 web 程序执行流程图 ajax 的主要特点是采用了 xmlhttprequest 对象和 dom(文档对象处理) 的方式。使用 xmlhttprequest 可以用来与后台服务器之间进行互动交互， xmlhttprequest 支持同步处理和异步处理两种方式23。但如果采用的是同步 方式，这可能会使得浏览器在较长的一段时间内没有响应，从而给用户造成很 不友好的感受，同时失去了刷新的优点，没有太大应用价值。而使用 ajax 异 步方式时，通过 ajax 引擎，前台浏览器和后台服务器交互过程中只进行有用 数据的交换，而如页面元素、版式等这些不需要刷新的无用数据，无需再从服 务器端重新加载，从而极大的提高了网络的传输效率，使得前后台交互应用过 程很自然，操作也很流畅，极大的方便了用户的使用。xml 文档对象模型使得 javascript 标准的 dom 对象能够解析服务器端传送过来的响应数据，不但大大 减少了编码和调试的工作量，而且保证了应用跨平台运行24。ajax 的执行周 期如图3-3、 3-4所示。 ajax运行的核心是xmlhttprequest对象， xmlhttprequest 对象常用的方法有 void open(string method, string url, boolean asynch, string username, string password), void send(content), void setrequestheader(string header, string value), void abort( ), string getallresponseheaders( ), string getresponseheader(string header)等，xmlhttprequest 对象还具有很多属性如下 表所示，正是这些属性使他们在设计 ajax 交互的时候显得特别有用 25。 xmlhttprequest 对于不同浏览器的创建对象方式是有所不同的，这可以通过 一个简单的判断语句来判断， 还可以保证它的对象对不同的浏览器的正确支持。 ajax 不包括服务器端技术，但 javaee 可以解决这些问题，它可以用于服务 华北电力大学硕士学位论文 11 器 端 大 型 开 发 、 多 层 次 以 及 分 布 式 企 业 级 的 应 用 。 ajax 引 擎 发 出 xmlhttprequest 请求是为了从后台服务器端得到一个 xml 格式的数据的响 应。在计算机监视系统 web 查询模块的设计与实现中，是通过在服务器端使用 javaee 应用服务器，并在 web 容器中设置一个专用 servlet 分析处理 ajax 引擎发出的请求来实现的，从而保证 ajax 引擎能够在服务器端得到 javaee 相关技术的有力支持26。 图 3-3 ajax 执行周期图 图 3-4 ajax 引擎工作原理图 在 ajax 的实现方法中，标准的 xmlhttpreques 方法如表 3-1 所示27。 华北电力大学硕士学位论文 12 表 3-1 标准 xmlhttpreques 方法表 方法 描述 abort( ) 停止当前 http 请求。对应的 xmlhttprequest 对象复位到初始化状态 getallresponseheaders( ) 返回包含 http 的所有响应头信息。 getresponseheader(“headerlabel”) 返回 http 响应头中指定键名 header 对应的值 open(string method, string url, boolean asynch, string username, string password) 设置请求的目标 url，方法，和其他参数。其 中 method 表示 http 请求方法。一般使用 “get”, “post”。url 表示请求服务器的地 址 asynch 表示是否采用异步方式。username 和 password 分别表示用户名和密码， 可以不指 定 send(content) 向服务器发送请求，如果采用异步方式，该方 法立即返回. setrequestheader(string header, string value) 设置 http 请求中的指定头部 head 的值为 value. 标准的 xmlhttprequest 属性如表 3-2 所示。 表 3-2 标准 xmlhttprequest 属性表 属性 说明 onreadystatechange 请求状态改变事件触发器(readystate 变化时会调用这 个属性上注册的 javascript 函数) readystate 请求的状态。其 5 个主要的值是：0=未初始化。对象已 经创建，未调用 open。1=open 方法成功调用以后,send 方法未调用。 2=send 方法已经调用， 尚未开始接受数据。 3=正在接受数据。 http 响应头信息已经接受， 响应数据 尚未接受完成。4=响应数据接受完成。 responsetext 服务器端响应的文本内容 responsexml 服务器端响应的 xml 形式数据，能够被 dom 对象检验并 解析 status 服务器的 http 状态吗（200 代表成功,404 代表 not found,500 表示服务器内部错误） statustext 服务器端返回状态码的文本信息。 在前台浏览器的请求和后台服务器响应两者的交互中， 从数据信息的收集、 请求提交、返回处理和 svg 状态更新过程中，xmlhttprequest 是整个处理过 程的关键所在，而 javascript 则负责绑定一切交互操作。javascript 代码也是运 行 ajax 应用程序的核心代码，帮助改进其与 server 服务器应用程序的通信。文 档对象模型 dom 通过 javascript 代码处理 html 结构和某些情况下服务器返 回的 xml 数据28。dom 是面向 html 和 xml 文档的 api，为文档提供了结 构化表示，并定义了如何通过脚本来访问文档结构。javascript 则是用于访问和 处理 dom 的语言。如果没有 dom，javascript 根本没有 web 页面和构成页面 元素的概念。文档中的每个元素都是 dom 得一部分，这就使得 javascript 可以 访问元素的属性和方法。在浏览器端产生刷新用户界面视图之前，它首先要从 华北电力大学硕士学位论文 13 服务器端响应的 xml 格式数据中解析出所需的有用数据。 3.5 dom dom(document object model)即文档对象模型， 它是由 w3c 组织制定的一 个对象化的 xml 数据接口，dom 是一个与语言和平台无关的标准接口规范， 它定义了 html 和 xml 文档的逻辑结构以及存取和维护文档的方法29。dom 是 html 与 xml 的 api（application programming interface,应用程序编程接 口） ，它定义了操作文档对象的接口，它将整个页面映射为一个由层次节点组成 的文件。dom 是一组用来描述 javascript 脚本怎么样访问结构化文档并进行交 互的 web 标准。它定义了一系列对象、方法和属性,用来访问、操纵和创建文 档中的内容、结构、样式及行为。dom 的本质是建立网页与脚本或程序语言之 间沟通的桥梁，它与语言无关。通过 javascript 可以访问这些对象30。dom 不 是 javascript 的一部分，而是内置在浏览器中的一个对象模型。dom 将文档模 拟为节点树来访问：dom 分析器在对文档分析后，把整个文档以一棵 dom 树 的形式存放在内存中， 应用程序可以对 dom 树中任一部分进行访问和操作31。 表 3-3 是用于处理 xml 文档的 dom 元素属性。 表 3-3 dom 元素属性表 属性名 描述 childnodes 返回当前节点所有子节点的数组 firstchild 返回当前节点的第一个子节点 lastchild 返回当前节点的最后一个子节点 nextsibling 返回当前节点的下一个兄弟节点 nodevalue 指定表示元素值的读/写属性 parentnode 返回当前节点的最后一个子节点 previoussibling 返回当前节点的上一个兄弟节点 表 3-4 是用于遍历 xml 文档的 dom 元素方法。 表 3-4 dom 元素方法表 属性或方法 描述 documentelement 表示文档的根元素节点，在 html 文档中表示 这个标签代表的元素节点 getelementbyid() 返回文档中指定 id 属性的 element 节点 方法参数为节点的 id 属性值 getelementsbytagname() 以数组方式返回文档中指定标签名的所有 element 节点，其顺序为在文档中出现的顺序。 方法参数为标签名称 haschildnodes() 返回一个布尔值，指示元素是否有子元素 getattribute() 返回元素的属性值，属性由 name 指定 表 3-5 是 dom 对象树不同节点对比。 华北电力大学硕士学位论文 14 表 3-5 dom 对象树不同节点对比表 节点