AJAX和SVG结合实现实时监控图表 - SVG中国

AJAX和SVG结合实现实时监控图表

来源：IBM developerWorks 中国

　　AJAX已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用AJAX和SVG技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。

1 前言

　　AJAX已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。
　　本文需要一定的AJAX，SVG知识和应用经验。当然它们都可以在 ibm.com/developerworks/cn上找到。
　　个人对于AJAX应用的建议是如果传统的MVC能够满足的应用，没有必要使用AJAX来代替，因为这里AJAX唯一能带来的好处只是无刷新。AJAX是用来帮助我们实现以往使用传统web技术难以实现的功能的。

2 技术名词

　　* AJAX
　　AJAX(Asynchronous JavaScript and XML)是多种技术的综合，它使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用 XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合，可以说AJAX已成为Web开发的重要武器。
　　* SVG
　　SVG(Scalable Vector Graphic)是一个标准开放的矢量图像格式。它使你设计的网页可以更加精彩，更加细致。使用简单的文本命令，SVG甚至可以做出诸如色彩线性变化、自定义置入字体、透明、动态效果、滤镜效果等各式常见的图像效果。SVG图像是基于XML(可扩展标识语言--未来的网络语言)的应用，并由 W3C组织的SVG开发组负责详细的研究和开发。
　　* DWR
　　DWR是一个开源的类库，可以帮助开发人员开发包含AJAX 技术的网站。它可以允许在浏览器里的代码使用运行在 WEB 服务器上的 JAVA函数，就像它就在浏览器里一样。

　　阅读本文最好具有下列知识：
　　1. AJAX开发应用
　　2. SVG相关知识，特别是与JavaScript交互。(SVG中国上有非常详尽的SVG技术文章)
　　3. DWR基础。(developerWworks上有非常详尽的DWR框架的技术文章和例子，本文不详细介绍DWR基础知识。)例如： http://www.ibm.com/developerworks/cn/java/j-ajax3/

3 实际效果

　　技术叙述的再好，不如一个实际的例子，我们先看看实际效果。读者可以先下载本文附带的例子，发布到任何一个支持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技术，我们只需要传输过来当前的数据，告诉仪表盘的指针应该指向哪里就行了。无需页面刷新，无需重新生成图片，并且网络端，服务器端，用户端的开销都非常少，以往的方案没有经验的程序员经常会导致内存溢出，现在采用这种方案这种错误的风险就大大减小了。

4 原理

　　其实原理并不复杂，我们利用SVG来绘制仪表盘，然后利用AJAX技术定时向服务器请求更新数据（也就是指针所指向的数据），如果数据更新了，则调用JavaScript脚本让SVG的仪表盘重新定位指针，这样就实现了图表的实时刷新。下图描述了各种技术的在本教程中的用途。

5 代码细节

　　这个例子程序由一个SVG文件，JSP文件，和一个JAVA类组成：

　　*MeterRemote.java
　　*MeterChart.svg
　　*DyMeter.jsp

　　首先看看MeterRemote.java，它生成了指针所指向的数据，作为例子我只是生成一个随机数据，在实际项目中它就应该是返回实际的数据，例如，汽车仪表盘就是当前汽车的时速。它们在实际项目中可以来自在实际项目中数据可以是来自数据库，JMS，Web服务，EJB等。

import java.util.Random;
public class MeterRemote{
private double curr_value,full_value=200;
public double getDegree(){
Random r=new Random();
curr_value=r.nextInt(200);
return curr_value/full_value*270;
}
}

　　接着我们利用DWR引擎把该Java类发布，让远程AJAX应用能够调用该Java类的方法getDegree（）。
　　打开dwr.xml文件，在本文提供的例子从您可以看到它，添加如下代码：

　　这样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.
2.
3.

　　1,2行是DWR引擎所需要的两个js文件。第3行是导入DWR引擎调用POJO java所需要的js文件。

function getValue()
{
MeterRemote.getDegree(loadinfo);
}

　　上面的方法从服务器端取得仪表盘的指针的数据。
　　重点是以下代码：

function loadinfo(data)
{
DWRUtil.setValue("reply1", data);
curr_degree=data;
var svgDocument = window.sample.getSVGDocument();
chart=svgDocument.getElementById("line2");
chart.setAttribute( "from", last_degree+",250,250");
chart.setAttribute( "to", curr_degree+",250,250");
chart.beginElement();
last_degree=curr_degree;
}

　　上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。
　　其中：

var svgDocument = window.sample.getSVGDocument();

　　得到SVG对象。

chart=svgDocument.getElementById("line2");

　　得到指针对象。

chart.setAttribute( "from", last_degree+",250,250");
chart.setAttribute( "to", curr_degree+",250,250");
chart.beginElement();

　　远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。
　　最后我们看看SVG文件，下面是值得关注的代码部分

style="stroke: #F00;stroke-width: 2px" id="finger">
type="rotate" from="0,250,250" begin="run()" to="20,250,250" dur="2"
fill="freeze" style="stroke: #F00;stroke-width: 2px" id="line2"/>

　　实际上上面的SVG代码定义了一个静态的指针指向0度的仪表盘。它由标签定义的。它往往是通过软件来生产的，因为能生成SVG图表的软件非常多，例如jfreechart等，和文章篇幅限制就不详细结束SVG图表了。

6 结束语

　　使用本例子的原理我们已经在数个实际项目中应用了，从用户使用的实际效果来说，性能和效果都非常满意。替代了以往用户使用CS软件才能实现的实时监控图表的功能，现在AJAX替代传统的各种MVC（例如Struts，JSF）框架并不能显示出它的威力，特别是在开发AJAX工具奇缺，开发测试效率低下。但是它与其他技术的融合例如SVG，往往能发挥意想不到的效果。AJAX和各种新兴的Web 2.0技术的出现大大的丰富了Web程序员的技术力量，把以往只有CS软件才能实现的功能，不仅实现了，而且更加完美和高效。
　　拥抱AJAX拥抱Web 2.0你能做得更好！

7 下载

　　描述：Sample application
　　名字：ajaxSVG.rar
　　大小：11KB
　　链接：http://www.chinasvg.com/images/artimg/0606270805.rar
　　链接：http://www.chinasvg.com/images/stories/artimg/ajaxSVG.rar

8 参考资料

　　更多有关ajax的资源请参考：Ajax技术资源中心

9 关于作者

　　皮振华，毕业于武汉大学，现就职与北京能博文公司，从事EAI/EIP工作。自由撰稿人，对各种开源产品、技术非常感兴趣。你可以在IBM developerWorks和其他媒体杂志看到他的技术文章。Email：pi_zh@emarkets.cn该E-mail地址已受到防止垃圾邮件机器人的保护，您必须启用浏览器的Java Script才能看到。

(THE END)