基于Web平台数据实时显示的研究
web端百度地图API实现实时轨迹动态展现
web端百度地图API实现实时轨迹动态展现最近在⼯作中遇到了⼀个百度地图api中的难题，恐怕有的程序员可能也遇到过。
就是实时定位并显⽰轨迹，⽹上⼤部分都是通过创建polyline对象贴到地图上。
当然，百度地图的画线就是这样实现的，但是好多⼈会发现，如果数据量超过四五千的话，浏览器可能就要卡了，后⾯可能就直接因为浏览器内存不⾜直接崩溃。
按理讲⾯对这么少的数据，百度地图肯定会考虑到这⼀点，所以肯定有解决的⽅法。
下⾯将介绍本⼈的⽅法供⼤家参考：1、数据准备这⽅便的数据我是ajax请求从后台获取的就不说了。
画线的话我们就得⽤到百度地图api中的polyline类了，因为我们是实时定位，以前的历史路径是存在，但是我们不能每次都要new⼀个polyline对象贴到地图上，所以就需要⽤到polyline的setPath(path: Array<>)，我们把整条路径的数据全部塞进去就可以了。
这⾥我⽤⼀个json格式的数组保存每个历史路径的所有路径数据，后⾯就是来数据更新数组再找到地图上相应的polyline对象塞进去就可以了。
var polylineArray = [];//此数组专门存储历史路径var PolylineJson = {};PolylineJson["Id"] = Id;//存储相应的polyline对象PolylineJson ["PathArray"] = polylineArray ;polylineArray.push(PolylineJson);备注：Polyline是个覆盖物对象，可以和其他对象⼀样⾃定义属性的，⽐如在声明以后设置polyline的id属性直接⽤polyline.id=content就可以了。
再例如： 或 polyline.length等。
覆盖物对象可以根据⾃⼰的需求⾃定义任何属性，取值的时候只需按这个字段取就可以了。
基于Web的实时数据监测系统的研究与实践
（． １ 仲恺 农业 工程 学 院 计算机科 学与 工程 学院 ， 东 广 州 ５ ０ ２ ； 广 １２ ５
２ 华南师 范大 学 计算机 学院 ， 东 广 州 ５ ０ ３ ） ． 广 １６ １
摘 要： 针对 目前各 类工业生 产监测 系统要求 实时性 强 、 不受 区域范 围限制 、 护方便等 的需要 ， 出一 种基 于 Ｗｅ 维 提 ｂ的 ， 以
第２ 卷 ｌ
第 ３期
计 算 机 技 术 与 发 展
ＣＯＭ Ｐ ＥＲ ＥＣ ＮＯＬ ＵＴ Ｔ Ｈ ＯＧＹ ＡＮＤ ＤＥＶＥ ＬＯＰ ＥＮ Ｍ Ｔ
２ １ 年 ３月 ０１
Ｖｏ ． Ｎｏ ３ １ ２１ ． Ｍａ． ２ １ ｒ ０ｌ
基 于 Ｗｅ ｂ的 实 时数 据 监 测 系统 的研 究 与 实践
Ａ ａ 、Ｖ ｊ Ｓ Ｇ为核 心技术 的实时数据 监测 系统设计方 案 。该方 案应用 Ａ ａ ｘ ｊ ｘ开源框架 Ｄ ＷＲ提高 了实时监 测数据 获取 的速 度 ， 并利 用 Ｓ Ｇ可动态显 示 图形 以及支 持用户 交互 的特点 解决 了在 Ｗｅ Ｖ ｂ上实 时 显示 监测 数据 变 化趋 势 曲线 、 单击 数据 点 获
ＨＥ Ｃｈ ｏ ｂ ＨＥＮ — ｉ ａ — ｏ ，Ｃ Ｑｉ ｍａ
（ ． ｐ ｒ ｎ ｆＣｏ ｕｅ ｃｅ ｃ ｎ ｎ ｉｅ ｒ ｇ， ｏ ｇ ａ ｉｅｓｙ ｏ １ Ｄｅ ａｔ ｔｏ ｍｐ ｔｒＳ ｉｎ ｅａ ｄ Ｅ ｇｎ ｅ ｎ Ｚｈ ｎ ｋ ｉＵｎｖ ｒｉ ｆ ｍｅ ｉ ｔ
ｗ ｏｅｃｒ ｃｎ ｌｇ ｓｗ ｒ ａ ｎ Ｖ Ｔ ｅｓｈｍｅａｐｉ ＷＲ， ｈｃ ａ ｅｏｅ ｏｒｅｆａ ｗｏｋｓｐ ｏｔ ｇＡａ ， — ｈ ｓ ｏ ｔ ｈ ｏｏｉ ｅｅＡｉ ａｄＳ Ｇ． ｈ ｅ ｐ ｌｄＤ ｅ ｅ ｅ ｘ ｃ ｅ ｗ ｉｈｗ ｓｔ ｐｎｓｕｃ ｍｅ ｒ ｕｐｒｎ ｊｘ ｔ ｉ ｈ ｒ ｉ ｏｎ
基于Web的数据可视化技术研究
基于Web的数据可视化技术研究随着大数据和互联网技术的快速发展，数据可视化成为了一种重要的手段，以更加直观、易于理解的方式展示数据，使人们能够更好地发现数据中的规律和洞察。
基于Web的数据可视化技术应运而生，为用户提供了在Web页面中创建、共享和访问交互式数据可视化的能力。
本文将研究基于Web的数据可视化技术，并探讨其在各种领域中的应用和挑战。
一、基于Web的数据可视化技术概述基于Web的数据可视化技术是指通过将数据以图表、地图、仪表板等形式呈现在Web页面上，以便用户能够更加直观地理解数据和发现数据中的规律。
其核心是将数据转化为可视化元素并提供交互功能，使用户能够与数据进行互动，探索数据背后的模式和趋势。
二、基于Web的数据可视化技术的应用领域1. 商业智能（BI）分析基于Web的数据可视化技术在商业智能分析中具有广泛的应用，通过可视化仪表板和报表，使管理者能够快速了解企业的运营情况、销售趋势、市场需求等重要指标，从而做出更加准确的决策。
2. 市场营销和广告数据可视化在市场营销和广告领域的应用越来越多。
借助基于Web的数据可视化技术，营销人员可以通过对消费者行为和趋势的可视化分析，了解用户需求，优化广告策略，提高广告投资回报率。
3. 医疗保健在医疗保健领域，基于Web的数据可视化技术可以帮助医生和研究人员更好地理解和分析患者的健康数据，如心电图、血压数据等。
通过可视化技术，医生可以及时掌握患者的健康状况，为患者提供更好的医疗服务。
4. 社交网络和在线社区社交网络和在线社区中的大量数据可以通过基于Web的数据可视化技术进行呈现和分析。
用户可以通过图表、词云等可视化元素，更加直观地了解社交网络中的热点话题、用户关系等信息。
三、基于Web的数据可视化技术的关键技术与挑战1. 数据获取和处理基于Web的数据可视化技术需要从各种数据源中获取数据，并对数据进行处理、清洗和转化，以便进行可视化呈现。
数据获取的准确性、数据量的处理效率以及数据的准确性是关键技术和挑战之一。
基于Web的网络管理平台研究综述
也 已经 有 一些 产 品 问世 ， 些有 代 表 性 的 活动 目标 过 高 而 构成 网络 学 习 障 碍 。 一 （ ） 一 国内外 关于网络管理平 台的研 研 究如下： Ｖ ｌ ｓ系统 、 金海 航新数字 （ ） 三 研究趋势 “ ｃａ ” ｓ “ 究现 状 。 网络 管 理平 台是 高 校 数字 化 校 园 学 校 ”“ 正 校 园 解 决 方 案 ”“ Ｃ 、方 、Ｔ Ｌ开 放 １辅 助 日常 教 学 的研 究 。 、 由于 网络 管 、Βιβλιοθήκη 研 究综 述 与 分 析
建设 的一项重要 内容 。目前 ， 网络管理平 教育 平 台 ” 。
台 的 发展 经 历 了 几个 阶 段 ： 最初 的 网络 管
理平 台能够满 足教师教 学及 管理 的各种
国 内开 发 出 的产 品各 具 特 色 ， 些 较 需 求 ，具 有 符 合 新 课 程 理念 的 教 学 环境 ， 有
基于WebService Behavior的Web页面数据实时显示技术研究与实现
的出现 ， Ｗｅ 为 ｂ页面的开发和 实现 提供 了新 的技术 手 段， 本文利用 Ｗｅ Ｓ ｒｃ ｅ ａｉ 解决 了 Ｗｅ ｂ ｖ ｅＢ ｈｖ ｒ ｅ ｉ ｏ ｂ页面 数
据的实时刷新 问题 ， 为实现 Ｗｅ ｂ页 面数据实 时显示提 供 了一种 新方法 。
３ Ｗｅ ｅｖ ｅ ｂＳ ｒｉ ｓ与 Ｗｅ Ｓ ｒｉ ｅ ａ ｉｒ ｃ ｂｅ ｃ Ｂｈ ｖ ｖ ｅ ｏ
维普资讯
２０ 年 第 １ 期 ０７ Ｏ
计 算 机 系 统 应 用
基 于 Ｗｅ Ｓ ｉ ｅ ｉ 的 Ｗｅ ｅｖｃ Ｂ ｖｏ ｂ ｒ ｅ ｈ ｒ ａ 面数 据 实 时 ｂ页
显示 技 术 研 究 与实 现
Ｒｅ ｅ ｃ ｄ Ｉ ｐｌ ｍ ｅｎ ａ ｉ ｈ ａ —ｔｍ ｅ Ｄｉｐｌｙ ｏ ｔ ｎ Ｗ ｅｂ ｓ ａｒ ｈ ａｎ ｍ ｔ ｔｏｎ ｔ ｅ Ｒｅ ｌ — ｉ ｓ ａ ｆＤａ ａ ｉ Ｐａ ｓ Ｂａ ｅｄ ｏｎ Ｗ ｅｂ ｇｅ ｓ Ｓｅｒ ｃ ｖｉｅ Ｂｅｈ ｖｉ ｃｈｎ ｏｇｙ ａ ｏｒＴｅ ｏｌ
平台的基础 上构筑一 个通 用的平台无关 、 语言无 关的
技 术层 ， 各种 不同平 台上 的应 用依靠这个 技术层来 实
时刷新。这种方法的缺 点是浏览器与控件或 插件的交 互性 不强 ， 且控件 和插件必 须要用 单独的开 发工具 开 发， 调试困难等 ； 其二 ， 通过将 Ｗｅ ｂ页面分 割 的方法 实 现 ， 浏 览 将 器显示页面分 割成 多个 Ｆ ｍｅ 需要 实 时数 据显 示 的 ｒ ， ａ
２０ 年 第 １ 期 ０７ Ｏ
和 Ｕ Ｄ。Ｗｅ ｅｖ ｅ ＤＩ ｂＳ ｒｃｓ基本协议栈如表 １ ｉ 所示。
只 有 Ｉｅ ｔ ｘ ｌｒ ． ｎ ｍｅ ｐ ｅ ５ ０版 或更高版 本 ， ｔ Ｅ ｏｒ 才能从 浏览器直接访 问 Ｗｅ ｂ服务 ， 即可 以通过 客户脚本直接
基于WEB的生产实时监控系统的研究与设计
图 １ 典 型 应 用 架 构
［ ３ ６ １ 第３ ５ 卷
第１ Ｏ 期
２ ０ １ ３ — １ ０ （ 下）
ｌ
数 据 采 集和 控制 装置 包括 Ｄ ＣＳ 、Ｐ Ｌ Ｃ或者 板卡 等设 备 ， 通 过 电 缆 与现 场 设 备连 接 ， 实 时 采 集 生 产过 程 温 度 、 压 力 、 流 量 和 浓 度 等数 据 ，再 通 过
收稿日期：２ ０ １ ３ － ０ ８ －１ ６ 作者简介：孙栓柱 （ １ ９ ７ ３一 ），男，江苏邳 Ｉ ＇ １ 人 ，高级工程 师，主要 从事 发电侧节能减排信息化和 自动控 制等方面 的研
究 工作 。
阀１ ＂ ３ 焉 棒泵 仪囊 飙桃 毫嘲
５ ｌ 霜ｌ 溷旧Ｉ 童 ｌ 重Ｉ 擞 鞠 曩 控 采 删 集 粗
较 高 ，同 其 他 信 息 系统 交 互 性 差 。同 时 由于 客 户 端 直 接访 问数 据 库 ，导 致数 据库 安 全 级 别 降 低 ， 存在 一 定 的安 全风 险 。Ｃ ／ Ｓ 结 构通 常 只限 于 小型 和
相对 封 闭的企 业局域 网。
降 低 网 络数 据 流 量 、提 高 页 面数 据 处 理 效 率 的 目 的 ，为 实现 页 面 实 时 数 据刷 新 提 供 了解 决 方 案 。
孙栓柱 ，孙 彬，周春蕾 ，王其祥
ＳＵＮ Ｓｈ ｕ ａ ｎ — ｚ ｈ ｕ ， ＳＵＮ Ｂｉ ｎ ， ＺＨＯＵ Ｃｈ ｕ ｎ ． １ ｅ ｉ ， ＷＡＮＧ Ｑ＿ － ｘ ｉ ａ ｎ ｇ
（ 江 苏方天 电力技术有限公司 ，南京 ２ １ １ １ ０ ２ ） 摘 要 ；本文提出了一种基于Ｂ ／ Ｓ 的生产实时监控系统设计方案 ，在Ｂ ／ Ｓ 架构中引入Ｆ ｌ ｅ ｘ 、Ｅ Ｘ Ｔ 、Ａ ｊ ａ ｘ 等富客户端技 术 ，通过页 面并行请求 、异 步响应 、局 部更新的方 式在浏览器中实现 了对生产
基于Web的EPICS数据实时监测系统的研究与实现
采 用 Ｃ Ｊ作 为 Ｅ ＩＳ数据 获 取 接 口 ， 获 Ａ ＰＣ 将
数据 获 取程 序集 成 于 Ｗｅ ｂ服务 器程 序 中 ， 将 数 据 存 储 于 服 务 器 内存 中并 未 与 数 据 库 交 互， 一方 面提 高 了数据 采集 速度 和效 率 ， 另一 方 面使 系统 架 构变得 简单 。 Ｗｅ ｂ显示 采用 Ｆｅ 术 ， 方 面减 轻 了服 ｌ ｘ技 一 务器 的负载 ， 一方 面提 高 了数据传 输 速率 。 另
照 固 定频 率重 新加 载 图片 。
２２ Ｊｖ ． ａ ａ技术接 口 Ｅ Ｉ Ｓ的优点 ＰＣ
１２ 基 于 Ｊ ｖ ． ａ ａ接 口技术 的 Ｅ Ｉ Ｓ数 据 获 取 ＰＣ
机 制
本文 采用 Ｊｖ 口直 接 获 取 Ｅ ＩＳ数据 ， ａａ接 ＰＣ
然 后 送人 浏览 器 中显示 运行 状态 。
基于 Ｗｅ ｂ的 Ｅ ＩＳ数据实时监测系统技 ＰＣ
术路 线 如 下 ： （ ） 数 据 获 取 程 序 集 成 于 Ｗｅ １将 ｂ服 务 器 端 ， 据 采集程 序采 用 Ｊｖ 数 ａａ编写 。 （ ） 实 时 数 据 常 驻 内存 ， ２将 避免 与 数 据 库
２ ＢＰＩ Ｅ Ｃ Ｉ运行 状态监测 系统
据 采集 和 Ｗｅ 务器 构成 。 ｂ服
７ ８ ６
（ ） Ａ常驻 内存 ， ３Ｃ 避免 由于频繁创 建 Ｃ Ａ
时 Ｕ Ｐ广播 造 成 的 网络 堵 塞 ， Ｄ 同时 避 免 了创 建
Ｊｏ ｓｎ是 轻量 级 的 数据 交换 格 式 ， 有 以下 具 特点 ： 、 （ ） 据 格 式 比较 简 单 ，易 于 读 写 ，格 式 １数 都是 压 缩 的 ，占用 带宽 小 。 （ ） 于解析 ，客户 端 ＪｖＳｒ ｔ ２易 ａａｃｉ 可以 简单 ｐ 的通 过 ｅａ（ 进行 Ｊｏ 据 的读 取 。 ｖｌ） ｓｎ数
基于Web的电网实时信息管理系统的研究
对 于电网中极其重要 的图纸型资料， 必须保证其 在现实条件下， 为满足系统的兼容性 ， 使系 Ｗｅ Ｎ浏览性及保密性。 ｂ 统能在不同操作系统中都可以实现良好的运行， ５１权 限 功 能 ． 本系统的编程语言采用了基于ＪＥＥ ２ 规范 的Ｊ ｖａ ａ 权 限功能 的实现 ， 主要在信息管理 系统 的 编程语言， 该编程语言具有面向对象、 平台无关、 文档数据库Ｇ ａ ｈ ｎ ｇ 中建立了 ｒ ｐ Ｍａ ａ ｅ 一个权限数 结构中立、 可移植 、 据分布及操作分布、 数 可靠安 据 表任 务， 在该表 中存 储每一 位用 户的信息和 全、 多线程 等等优 点。 操作权限， 系统管理员可在Ｗｅ 面按照用户需 顷
报价方案分析、 评估等功能。 ２２ 系统网络结 构 ．
基于Ｗ ｅ 的 电网实时信息管理 系统是 局域 ｂ
务器内实现Ｏ Ｂ 驱动程序和桥代码即可。 Ｄ Ｃ ５系统具体功能的实现
作为科学有 效的电网实时信息管 理系统 ， 网内， 客户端通 过Ｗ ｅ １ 务器与数 据库进行 连 应该具备保证 系统 的安全性和资料 的保密性 的 ｂ￣ ］
１ 研究背景与现 状
用于执 行Ｓ Ｌ Ｑ 语句的Ｊ ｖ Ｉ 用程序设计接 ａ ａ ＡＰ应 模式和市场意识 ， 为企业的最终目 服务。 标 口。 ＤＢ 为Ｊ ｖ 程 序提供了统一的接 口 实现 Ｊ Ｃ ａａ ， 从需求来看， 要求Ｍ 系统以企业内部 网为 Ｉ Ｓ 了与 数据库 的无缝操作 。由于本系统采 用了Ｂ ／ 依托， 通过数据整合技术 ， 将生 产经营 的实时系 模式的三层模型架构 ， 用户层通过浏 览页提出 统 数据引入到Ｍ 中， Ｉ设 应该以最大化经济效 益和提高工作效
率为前 提， 利用先 进的技术和管理方法， 实现基 于Ｗ ｅ 的电网实时 信息管 理， ｂ 实现动态 经济分 析、 报价辅 助决策 、 交易信息管 理、 模拟成 本效
如何在前端开发中实现实时数据更新与推送
如何在前端开发中实现实时数据更新与推送实现实时数据更新与推送的前端开发技术在当今快节奏的互联网时代，实时数据的更新与推送已经成为了前端开发中一个重要的需求。
无论是电商网站的库存更新，社交媒体的即时消息，还是股票行情的实时推送，都需要前端开发人员掌握一些技术来实现。
一、WebSocket技术WebSocket是一种现代化的网络通信协议，它允许浏览器与服务器建立一个持久的连接，以实现双向通信。
在前端开发中，可以使用WebSocket来实现实时数据的更新与推送。
首先，在前端代码中引入WebSocket对象，通过指定服务器的URL来建立连接。
然后，可以通过WebSocket对象的事件监听器来处理接收到的数据或者错误信息。
最后，使用WebSocket对象的send()方法来向服务器发送数据。
WebSocket的优点在于，它可以保持连接的持久性，不会经常断开和重新连接。
这样就可以实现实时的数据更新和推送。
二、AJAX轮询技术除了WebSocket，还可以使用AJAX轮询技术来实现实时数据的更新与推送。
AJAX轮询是一种通过定时发送HTTP请求来获取服务器上最新数据的方式。
在前端代码中，可以通过定时器函数来每隔一段时间发送一个HTTP请求。
服务器在收到请求后，会返回最新的数据。
前端再根据返回的数据进行更新处理。
AJAX轮询的优点在于，它可以兼容所有的浏览器，不需要依赖特定的协议。
它的缺点在于，频繁的HTTP请求会占用服务器的资源和带宽，可能造成性能问题。
三、长轮询技术长轮询技术是AJAX轮询的一种改进方式。
它通过请求一直保持打开状态，当服务器有新数据时立即返回，否则在一定时间后返回一个空响应。
在前端代码中，可以通过发送一个HTTP请求到服务器，并设置超时时间。
服务器端收到请求后，如果有新数据则立即返回响应，如果没有则等待一段时间后返回空响应。
前端收到响应后，再进行下一次的长轮询请求。
长轮询的优点在于它减少了不必要的HTTP请求，可以更及时地获取服务器上的最新数据。
基于WebRTC的Web实时通讯技术研究
基于WebRTC的Web实时通讯技术研究随着移动互联网的普及和互联网应用的不断扩展，Web实时通讯技术逐渐成为了当今网络技术的热点。
WebRTC作为Web实时通讯技术的代表，其强大的实时音视频传输能力和低延迟的优势，受到了越来越多的关注和应用。
本文将深入探讨基于WebRTC的Web实时通讯技术的现状、发展趋势以及未来应用前景。
一、WebRTC技术的概念及发展历程WebRTC全称为Web Real-Time Communication，指的是一种通过浏览器实现的实时通讯技术。
它是由Google在2011年推出的一个开源计划，旨在为Web应用提供实时的网络通信能力。
WebRTC的出现极大地推进了实时通讯技术的发展，成为了当今互联网领域中最火热的技术之一。
WebRTC技术的发展历程可以分为三个阶段。
第一阶段是在2011年推出的最初版本，主要提供基础的音视频通信功能；第二阶段是在2013年发布的RTC1.0版本，主要增加了数据通信的功能，并且支持与其他Web技术的整合；第三阶段是在2017年推出的RTC1.0标准版，增加了更多音视频处理能力和新的数据传输功能。
二、WebRTC技术的特点和应用领域WebRTC技术具有以下几个特点：1. 实时性强：WebRTC能够实现低延迟、高质量的实时音视频传输，支持近乎实时的网络通信。
2. 浏览器原生支持：WebRTC技术是基于浏览器的，无需安装任何插件或软件，适用于多种操作系统和设备。
3. 开源：WebRTC技术是一个开源项目，吸引了全球各大企业和开发者的广泛关注和支持，未来的发展前景非常广阔。
4. 安全性高：WebRTC支持端到端加密传输，保护用户的隐私和数据安全。
WebRTC技术的应用领域非常广泛，主要包括：在线教育、视频会议、在线医疗、智能家居、在线直播、在线游戏等。
WebRTC技术能够提供高质量的、面向用户的交互体验，为各种Web应用注入新的活力和价值。
三、WebRTC技术的发展趋势和未来展望目前，WebRTC技术正处于快速发展和普及阶段，未来的前景非常广阔。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第29卷 第3期2008年9月内蒙古农业大学学报Journal of Inne r Mongolia Agricultura l Universit yVol .29 No .3Sep .2008基于W eb 平台数据实时显示的研究3张立倩, 常晓燕, 苗 杰, 马 杰(内蒙古农业大学计算机与与信息工程学院,呼和浩特 010018)摘要: 本文对数据采集系统的应用层进行了研究,抛弃了传统的C /S 构架设计模式,采用B /S 结构。
重点探讨如何在Web 平台上实现实时动态数据显示,并给出了实现的方案。
关键词: Web 平台; AJAX 技术; S VG 技术中图分类号: TP393 文献标识码: A 文章编号:1009-3575(2008)03-0158-03RESEARC H O F REAL TI M E DATA D ISPLAY BASED O N W EBZH ANG L i -qian, CHANG Xiao -yan, M I A O J ie, MA Jie(College of co m puter and Infor m a tion Engineeri ng ,Inner M ongolia Agri cultura l U niv ersit y Huhhot 010018China)Ab stra ct: The pape r resea rche s the app lication layer of data collec tion syste m s whi ch ad op t the B /S mode ra the r than C /S mode.It focuses on ho w the real -ti me data displays on W E B and giv e s a s oluti on .Key wor ds: W eb platfor m ,AJ AX technol ogy,S VG technol ogy 近年来,随着互联网的飞速发展,JAVA [1]程序设计语言、W eb 2.0[2]中的JavaScri p t 、X ML 等技术逐步发展壮大,对互联网产生了深刻影响。
互联网带来的W eb [3]浏览器,大有取代传统桌面单机软件的趋势。
对于大部分数据采集系统的应用程序,往往采用VC 、VB 等开发,面向的是单机,而国内目前对如何在W eb [4]浏览器[5]上显示实时数据的探索以及研究应用较少,因而我们对此进行了大胆的研究[6]。
1 AJAX 技术1.1 AJAX 的基本框架AJAX (A synchr onous Javasc ri p t and X ML,异步Java 脚本与X ML )[7]是多种技术的整合,其主要技术特征是:①应用XHT ML 和CSS 标准化;②使用DO M 实现动态显示和交互;③采用X ML 和XS LT 进行数据交换与处理;④用X MLHttpRequest 实现异步数据读取;⑤用JavaSc ri p t 绑定和处理所有数据。
AJAX [8]是使用客户端脚本与W eb 服务器交换数据的应用开发方法。
这样,W eb 页面不用打断交互流程进行重新加载,就可以动态地更新。
使用AJAX 首先需要初始化,然后发送请求,处理返回信息。
从生成的X ML 文件中获得数据的代码如下: functi on D is p lay Hot (){va r vol =X MLHttpReq .responseX ML.getElements B yTag Na m e ("vol")_[0].firstChild.node Va lue;va r vols =X MLHttpReq .responseX ML.getElements B yTag Na m e ("vos")_[0].firstChild.node Va lue;3收稿日期 基金项目 内蒙古农业大学学生科技创新基金项目作者简介 张立倩(),女,讲师,从事信息处理方面的研究:2008-01-10::1979-.docum ent.getEle m ent B yI d("vol").in2 ner HT ML=vol;docum ent.getEle m ent ByI d("vols").in2 ner HT ML=vols;}请求的数据由下面这个页面生成X ML文件:<%@page contentType="text/ht m l; cha rset=gb2312"%><%@page i mport="m yjni.I oport"% >//引入JN I访问I O口的类<%I oport port=ne w I oport();//创建利用JN I访问I O口的类实例r e s ponse.set ContentType("text/x m l;char2 se t=UTF-8");r e s ponse.set Heade r("Cache-Contr ol"," no-cache");int num=port.r port(0xE000,1);//从PC I采集卡读取采集数据out.p rintln("<response>");out.p rintln("<svol>电网当前电压:"+ nu m+"V"+"</svol>");out.p rintln("<vol>"+nu m+"</v ol >");//输出X ML标记采集数据值out.p rintln("</response>");%>最终在需要实时获取数据的页面中指定<body onl oad=sendR eque st()>,并设计相应界面。
1.2 嵌入实时图表上述代码每秒钟在后台异步不断请求r eadpci. js p,并获得执行结果。
对于获得数据的实时要求已经完成,但是如何以直观的形式显示出来仍需解决。
本设计在分析大量文献后,决定采用S VG(Scalable Vector Graphics,可缩放矢量图形)[9]技术完成需求。
S VG是由W3C制定的基于X ML描述二维矢量图形的1个开放标准。
S VG严格遵从X ML语法,并用文本格式的描述性语言来描述图像内容,因此是1种和图像分辨率无关的矢量图形格式,可以用来动态生成图形。
例如,可用S VG[]动态生成具有交互功能的地图,嵌入网页中。
此处,我们设计1个简单的S VG矢量图[11]:<!DOCTY PE svg P UBL I C"-//W3C//DT D S VG20000303Stylable//EN""http://w /TR/2000/03/WD-S V G -20000303/DT D/svg-20000303-stylable.dtd"> <svg w idth="280"height="10"><r ect x="0"y="0"height="20"width=" 0"fill="#00ff00"id="r ect1"</svg>它表示了1个长条矩形,以便直观动态地表示出我们采集到的数据值。
在网页中插入如下脚本,可以动态控制矢量图的属性。
var svg Docum ent=window.sa mp le.getS VG Docu2 m ent();//获得S V G对象chart=svg Document.getEle m ent B yI d(" rec t1");//获得S VG中的矩形对象if(vol>230)chart.se t A ttribute("fill","#ff0000");//根据值设置图表颜色e lse if(vol<231&&vol>200)chart.se t A ttribute("fill","#00ff00");e lsechart.se t A ttribute("fill","#ffff00");chart.se t A ttribute("w idth",vol);//设置矩形的长度为采集到数据值}最后,在AJAX[12]页面中嵌入该S VG矢量图,以完成图表的动态刷新:<e m bed na me="sa mp le"src="graph.svg"width="280"he ight="20"type="i m age/svg +x m l">2 系统整体设计2.1 数据采集系统的部署系统平台如下:1、硬件平台:()I B M兼容机台,要求U主频G z以上,内存56MB,符合I标准的扩展槽个;951第3期 张立倩等: 基于W eb平台数据实时显示的研究101-PC1CP 1.4 H2PC2.11(2)PC I[13]总线接口数据卡1块;2、软件平台:(1)操作系统:Mic r os oft W indows2000SP4;(2)S UN公司JAVA开发包JDK1.5以及JA VA 运行环境JR E1.5;(3)T O MC AT W eb服务器软件:apache-tom cat -5.5.20;(4)VC++6.0开发工具。
Tom ca t上需要完成如下配置:将VC++编译好的m yjni_I oport.dll以及w ini o 库:winio.sys winio.dll winio.vxd复制到To m cat安装目录中的bin目录,将编写的JA VA[14]类文件放入To m cat安装目录中的comm on/c lasses中,将编写好的AJAX[15]数据采集页面、S VG矢量图等相关文件放置到tomcat[16]中安装目录的webapp s目录中,至此项目软件配置完成。