AJAX + SVG 实现实时监控图表

AJAX SVG 实现实时监控图表实现实时监控图表 AJAX 已经有很多文章介绍它的原理及其应用了 但是遗憾的是现在并 没有很多结合实际项目应用 本文结合实际项目中的应用来讲述利用 AJAX 和 SVG 技术如何创建各种激动人心的功能 并附带可以运行的例 子和源代码 0 评论 皮 振华 pi zh 自由撰稿人 北京能博文公司 2006 年 6 月 15 日 内容内容 前言前言 AJAX 已经有很多文章介绍它的原理及其应用了 但是遗憾的是现在并没有很多结合 实际项目应用 本文结合实际项目中的应用来讲述利用 AJAX 和 SVG 技术如何创建 各种激动人心的功能 并附带可以运行的例子和源代码 本文需要一定的 AJAX SVG 知识和应用经验 当然它们都可以在 上找到 个人对于 AJAX 应用的建议是如果传统的 MVC 能够满足的应用 没有必要使用 AJAX 来代替 因为这里 AJAX 唯一能带来的好处只是无刷新 AJAX 是用来帮助我 们实现以往使用传统 web 技术难以实现的功能的 技术名词技术名词 1 AJAX AJAX Asynchronous JavaScript and XML 是多种技术的综合 它使用 XHTML 和 CSS 标准化呈现 使用 DOM 实现动态显示和交互 使用 XML 和 XSTL 进行数据交换与处理 使用 XMLHttpRequest 对象进行异步数据读取 使用 Javascript 绑定和处理所有数据 更重要的是它打破了使用页面重载的惯例技术组合 可以说 AJAX 已成为 Web 开发的重要武器 2 SVG Scalable Vector Graphic 是一个标准开放的矢量图像格式 它使你设计的 网页可以更加精彩 更加细致 使用简单的文本命令 SVG 甚至可以做出诸如色彩线 性变化 自定义置入字体 透明 动态效果 虑镜效果等各式常见的图像效果 SVG 图像是基于 XML 可扩展标识语言 未来的网络语言 的应用 并由 W3C 组织的 SVG 开发组负责详细的研究和开发 3 DWR DWR 是一个开源的类库 可以帮助开发人员开发包含 AJAX 技术的网站 它可以允许在浏览器里的代码使用运行在 WEB 服务器上的 JAVA 函数 就像它就 在浏览器里一样 阅读本文最好具有下列知识 1 AJAX 开发应用 2 SVG 相关知识 特别是与 JavaScript 交互 developerworks 上有非常详尽 SVG 的技术文章 3 DWR 基础 developerWworks 上有非常详尽的 DWR 框架的技术文章和例子 本文不详细结束 DWR 基础知识 例如 实际效果实际效果 技术叙述的再好 不如一个实际的例子 我们先看看实际效果 读者可以先下载本文 附带的例子 发布到任何一个支持 JSP1 1 的 servle 服务器上 例如 Tomcat4 0 或者 webshpere weblogic 上 然后访问页面 http localhost 端口 ajaxSVG DyMeter jsp 以 Tomcat 为例 端口就是 8080 点击开始按钮 你会发现图表的指针会根据服务器的数据实时摆动 很类似与一个汽车仪器仪点击开始按钮 你会发现图表的指针会根据服务器的数据实时摆动 很类似与一个汽车仪器仪 表盘 这是以往表盘 这是以往 cs 软件或者是软件或者是 flash 才能实现的效果 现在我们使用纯才能实现的效果 现在我们使用纯 web 的形式实现了 的形式实现了 从专业术语来说 它实际上是一个从专业术语来说 它实际上是一个 Dash Board 其实在各种 其实在各种 BI 商业智能 应用中都可以 商业智能 应用中都可以 看到它 它的灵感来自于汽车的仪表盘 它非常直观的反映了当前数据的状态 例如处于危险 看到它 它的灵感来自于汽车的仪表盘 它非常直观的反映了当前数据的状态 例如处于危险 安全 过低等等 安全 过低等等 当然它并不新鲜 很多软件都能提供这种图表 我们今天要使用当然它并不新鲜 很多软件都能提供这种图表 我们今天要使用 AJAX 和和 SVG 来突破传统来突破传统 应用 以往的软件生成的图片都是静态的 注意我这里的静态是指它们生成的图片上的指针不应用 以往的软件生成的图片都是静态的 注意我这里的静态是指它们生成的图片上的指针不 会像真正的汽车仪表盘一样随着汽车的各种数据的变化 例如速度 油量的变化而摆动 根据会像真正的汽车仪表盘一样随着汽车的各种数据的变化 例如速度 油量的变化而摆动 根据 汽车的实时速度而摆动 而是用户刷新一次页面 软件根据服务器端的数据重新生成图片再显汽车的实时速度而摆动 而是用户刷新一次页面 软件根据服务器端的数据重新生成图片再显 示给最终用户 示给最终用户 传统的这种方式对于一般的传统的这种方式对于一般的 BI 应用来说是完全足够了 但是对于实时性要求比较高的系统来应用来说是完全足够了 但是对于实时性要求比较高的系统来 说 利用监控系统来说 不可能要求用户随时刷新页面 或者使用说 利用监控系统来说 不可能要求用户随时刷新页面 或者使用 JavaScript 来定时刷新页来定时刷新页 面 这样效果非常差 而且服务器端反复在内存 或者硬盘中生成图片 用户数量多之后 系面 这样效果非常差 而且服务器端反复在内存 或者硬盘中生成图片 用户数量多之后 系 统负担太重了 统负担太重了 我们抛开技术想一下 我们实际上只想改变指针的位置就行了 根本没有必要生成整个图片或我们抛开技术想一下 我们实际上只想改变指针的位置就行了 根本没有必要生成整个图片或 者是传递整个图片的数据给客户端 这种设置非常不合理 但是这在以往的技术上是难以完成者是传递整个图片的数据给客户端 这种设置非常不合理 但是这在以往的技术上是难以完成 的 的 现在如果使用现在如果使用 AJAX 技术 我们只需要传输过来当前的数据 告诉仪表盘的指针应该指向哪里技术 我们只需要传输过来当前的数据 告诉仪表盘的指针应该指向哪里 就行了 无需页面刷新 无需重新生成图片 并且网络端 服务器端 用户端的开销都非常少 就行了 无需页面刷新 无需重新生成图片 并且网络端 服务器端 用户端的开销都非常少 以往的方案没有经验的程序员经常会导致内存溢出 现在采用这种方案这种错误的风险就大大以往的方案没有经验的程序员经常会导致内存溢出 现在采用这种方案这种错误的风险就大大 减小了 减小了 回页首回页首 原理原理 其实原理并不复杂 我们利用 SVG 来绘制仪表盘 然后利用 AJAX 技术定时向服务 器请求更新数据 也就是指针所指向的数据 如果数据更新了 则调用 JavaScript 脚本让 SVG 的仪表盘重新定位指针 这样就实现了图表的实时刷新 下图描述了各 种技术的在本教程中的用途 回页首回页首 代码细节代码细节 这个例子程序由一个 SVG 文件 JSP 文件 和一个 JAVA 类组成 MeterRemote java MeterChart svg DyMeter jsp 首先看看 MeterRemote java 它生成了指针所指向的数据 作为例子我只是生成一个 随机数据 在实际项目中它就应该是返回实际的数据 例如 汽车仪表盘就是当前汽 车的时速 它们在实际项目中可以来自在实际项目中数据可以是来自数据库 JMS Web 服务 EJB 等 importimport java util Random java util Random publicpublic classclass MeterRemoteMeterRemote privateprivate doubledouble curr value full value 200 curr value full value 200 publicpublic doubledouble getDegree getDegree RandomRandom r newr new Random Random curr value r nextInt 200 curr value r nextInt 200 returnreturn curr value full value 270 curr value full value 270 接着我们利用接着我们利用 DWR 引擎把该引擎把该 Java 类发布 让远程类发布 让远程 AJAX 应用能够调用该应用能够调用该 Java 类的方法类的方法 getDegree 打开打开 dwr xml 文件 在本文提供的例子从您可以看到它 添加如下代码 文件 在本文提供的例子从您可以看到它 添加如下代码 createjavascript MeterRemote paramvalue com nbw svg DyChart ajax MeterRemote 这样这样 DWR 就把一个就把一个 Java 类发布出来了 可以在页面通过类发布出来了 可以在页面通过 js 就可以直接调用它了 非常的就可以直接调用它了 非常的 简单 它和大多数框架一样使用了一个简单 它和大多数框架一样使用了一个 xml 文件来完成自己的配置 使用文件来完成自己的配置 使用 creat 标签可以发标签可以发 布一个布一个 java 类 类 creator new 表明创建方式是通过表明创建方式是通过 new 来创建实例 来创建实例 java 类这里的配置都类这里的配置都 是一样的 因为它支持是一样的 因为它支持 spring 和和 struts 才会有不同的才会有不同的 creator Javascript MeterRemote 说明了它在页面中使用说明了它在页面中使用 MeterRemote 对象对象 js 对象对象 来调用 来调用 Param 标签就定义了具体的类的标签就定义了具体的类的 名称 使用名称 使用 DWR 还可以指定调用的权限和指定具体的还可以指定调用的权限和指定具体的 java 类的方法 而不是把所有的对象的类的方法 而不是把所有的对象的 方法都发布出来 跟多的配置信息请查阅方法都发布出来 跟多的配置信息请查阅 ibm 上其它文章 上其它文章 重新启动服务器 使用浏览器打开如下地址 重新启动服务器 使用浏览器打开如下地址 http localhost 8080 ajaxSVG dwr 如下图所示 如下图所示 会看到会看到 MeterRemote 链接 说明发表成功了 单击该链接链接 说明发表成功了 单击该链接 http localhost 8080 ajaxSVG dwr test MeterRemote 会看到测试页面 它上面包含了如何会看到测试页面 它上面包含了如何 使用 和可以调用的方法 使用 和可以调用的方法 如下图所示 如下图所示 你可以点击你可以点击 Excute 来测试一下效果 这样网页就能够直接调用来测试一下效果 这样网页就能够直接调用 java 端的程序了 端的程序了 接着我接着我 们看看们看看 JSP 文件 文件 首先导入首先导入 js 这样才能 这样才能 1 dwr engine js 2 dwr util js 3 dwr interface MeterRemote js 1 2 行是行是 DWR 引擎所需要的两个引擎所需要的两个 js 文件 第文件 第 3 行是导入行是导入 DWR 引擎调用引擎调用 POJO java 所需要的所需要的 js 文件 文件 functionfunction getValue getValue MeterRemote getDegree loadinfo MeterRemote getDegree loadinfo 上面的方法从服务器端取得仪表盘的指针的数据 上面的方法从服务器端取得仪表盘的指针的数据 重点是以下代码 重点是以下代码 functionfunction loadinfo data loadinfo data DWRUtil setValue reply1 DWRUtil setValue reply1 data data curr degree data curr degree data varvar svgDocumentsvgDocument window sample getSVGDocument window sample getSVGDocument chart svgDocument getElementById line2 chart svgDocument getElementById line2 chart setAttribute chart setAttribute from from last degree 250 250 last degree 250 250 chart setAttribute chart setAttribute to to curr degree 250 250 curr degree 250 250 chart beginElement chart beginElement last degree curr degree last degree curr degree 上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变 SVG 图中指针的位置 图中指针的位置 其中 其中 varvar svgDocumentsvgDocument window sample getSVGDocument window sample getSVGDocument 得到得到 SVG 对象 对象 chart svgDocument getElementById line2 chart svgDocument getElementById line2 得到指针对象 得到指针对象 chart setAttribute chart setAttribute from from last degree 250 250 last degree 250 250 chart setAttribute chart setAttribute to to curr degree 250 250 curr degree 250 250 chart beginElement chart beginElement 远程调用得到的仪表盘的指针数据来动态的改变远程调用得到的仪表盘的指针数据来动态的改变 SVG 图中指针的位置 图中指针的位置 最后我们看看最后我们看看 SVG 文件 下面是值得关注