Ajax在实时绘制SVG图表中的应用研究

【前言】Ajax在实时绘制SVG图表中的应用研究由文秘帮小编整理而成，但愿对你的学习工作带来帮助。1.1 SVG图形的优势 可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），它是描述二维矢量图形的图形格式，由W3C制定，是一个开放标准。SVG严格遵从XML语法，用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形...

摘 要：如今的很多网站都需要实时绘制图表，SVG――可缩放矢量制图是一种新兴的技术，将来有机会会成为Web图形下一代的重要技术。将SVG和ajax技术结合，能够避免繁琐的网页图表重载。介绍创建一个简单的SVG图表应用，通过异步方式从PHP脚本获取用户输入的数据和随机产生的数据，最终在网页上生成SVG图表。

关键词：Ajax SVG 实时 异步

中图分类号：TP391 文献标识码：A 文章编号：1007-3973（2012）001-059-02

1 引言

在Internet高速发展的今天，互联网已经成为了信息的主要平台。而很多互联网上的图形采用位图形式，不仅不易编辑，而且进行交互时需要和服务器进行频繁的通信，极大的限制了图形的实时绘制和编辑。使用Ajax通过异步方式从服务器端获取数据，在浏览器中实时绘制svg图形的方式，目前已经成为了一项炙手可热的技术。

1.1 SVG图形的优势

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），它是描述二维矢量图形的图形格式，由W3C制定，是一个开放标准。SVG严格遵从XML语法，用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。它是一种新兴的技术，就像Flash一样，将有机会成为下一代Web图形的重要技术。

SVG图形格式优点：

1.1.1 基于XML

SVG是完全基于XML(eXtensible Markup Language可扩展置标语言)， 并能和XML相关各项技术相融会的新一代的网络图像格式。SVG继承了XML的跨平台性和可扩展性，从而意味着它不仅仅是一种图像格式，它在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，构成新的SVG图形。目前最常用的SVG查看工具有Adobe公司的Adobe SVG Viewer 3。

1.1.2 采用文本来描述对象

SVG包括3种类型的对象：矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

与传统的图像格式不同的是，SVG采用文本来描述矢量化的图形，如同HTML网页一样，SVG图像文件可以像有着很好的可读性。当用户用图像工具输出SVG后，可以用任何文字处理工具打开SVG图像，看到用来描述图像的文本代码。掌握了SVG语法的人可以只用记事本便读出图像中的内容。

1.1.3 具有交互性和动态性

SVG是基于XML的，它具有卓越的动态交互性。可以在SVG文件中嵌入动画元素(例如：运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，还可以通过脚本定义来达到高亮显示、声音、动画等效果。

1.1.4 SVG较GIF、JPEG的优势

相对于GIF、JPEG位图图像格式，SVG是一种矢量图形格式。SVG较GIF、JPEG的优势显而易见：

(1)任意放缩。

用户可以任意缩放图像显示，却不会破坏图像的清晰度、细节等。

(2)文本独立。

SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

(3)文件容量较小。

总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

(4)超强显示效果。

SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。

(5)超级颜色控制。

SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

1.2 Ajax及其相关技术

Ajax是Asynchronous Javascript and XML的缩写，它提供一种可以调用后台服务器获得数据的客户端JavaScript技术，它支持更新部分网页内容时不重载整个网页。在支持Ajax的情形下，Web应用程序可以通过调用后台服务器来验证数据，同时用户可以继续填写内容。Ajax是一种非常灵活、交互性很强的Web应用技术，它使得网页能够透明地异步调用服务器数据。Ajax是一种Web开发人员可以用来创建更加灵活的Web应用程序的工具，而且它在与人进行交互方面比传统的Web应用程序更好。

2 绘制图表的结构设计

现在有很多浏览器对SVG的支持仍不成熟。Firefox浏览器对SVG提供了完善的支持。要加载SVG到Internet Explorer，首先必须安装SVG插件。安装过程非常简单，只需要下载SVGViewer.exe安装文件并执行就可以了。第一次加载SVG页面时，需要确认是否同意声明中的条款。

使用Ajax和SVG实现实时图表，首先创建一个文件夹svg_chart，在此文件夹中创建5个文件：index.html，用于包含并显示SVG图表；chart.svg，SVG文档，包含了图形绘制数据，用于绘制SVG图形；ajaxrequest.js，用于从服务器端取得图形绘制数据；realtimechart.js，用于增加图表数据到SVG文档中；svg_chart.php，用于产生随机数并发给客户端。

3 实时绘制SVG图表的实现

在图形开始绘制的时候，svg_chart.php脚本调用，生成一对（x,y）坐标，这些坐标被客户端显示到图表中，客户端支持把刚才生成的坐标值传递给服务器端，服务器端根据客户传来的数据生成新的坐标。客户端产生的坐标作为参数通过Get方法发送给服务器端。

(1)在客户端，index.html加载SVG文档，目前最好的方法就是使用元素，也可以使用和元素:

var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =328; UrchinTrack();

(2)创建chart.svg文件，文件中包含了图表的标题，它所有的功能都是通过JavaScript脚本来实现的。

实时绘制SVG图表

(3)chart.svg文件引用了两个JavaScript文件：ajaxrequest.js和realtimechart.js。

Ajaxrequest.js包含了ajax引擎，它使用XMLHttpRequest对象实现了HTTP的异步请求。Realtimechart.js使用这个引擎来异步获取服务器端的最新数据。

function ajaxRequest(url,callback){

var innerCallback=callback;

if(!xmlHttp) xmlHttp=createXmlHttpRequestObject();

if(xmlHttp&&(xmlHttp.readyState==4||xmlHttp.readyState==0)) {

xmlHttp.onreadystatechange=handleGettingResults;

xmlHttp.open(“GET”,url,true);

xmlHttp.send(null);}

else

setTimeout(“ajaxRequest(url,callback)”,1000);

function handleGettingResults(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

innerCallback(xmlHttp.responseText);}

else{

alert(“无法连接服务器”);}

}

}

}

ajaxrequest.js中所有的HTTP请求都使用同一个XMLHttpRequest实例，而不是为每一个调用都自动创建一个新的XMLHttpRequest对象。通过这种方法，保证收到的所有相应都是与请求的顺序一致的，这对于图表程序至关重要。ajaxrequest.js把访问的URL作为参数，当收到服务端的响应时调用回调函数。

realtimechart.js包含了产生SVG图表的所有代码。当页面加载初始化图表的时候，自动调用init()函数。使用这个函数产生SVG代码，这些代码包含了整个图表的坐标轴和初始化框架。

function init(evt){

documentSVG=evt.target.ownerDocument;//准备图表的数据，获取一个SVG文档句柄

chartGroup=documnetSVG.createElementNS(svgNS,”g”);

chartGroup.setAttribute(“transform”,”translate(“+x+””+y+”)”);

//创建一个元素用来为图表中的元素分组

……}

documentSVG.documentElement.appendChild(chartGroup);//增加图表组到SVG文档中

最终实现图形如图1所示：

4 结束语

本文将Ajax和SVG技术结合在一起，讨论了实时绘制矢量图形的方法，在实际应用中取得了较好的效果。Ajax的异步工作方式，以及SVG矢量图形灵活短小的格式，极大的减小了网络信息流量，加快了交互响应速度，实现了实时性。但是浏览器对于SVG的支持仍不成熟，实际应用还需要在并发性能优化、安全访问控制、SVG动画效果及代码自动生成方面加以完善。

参考文献：

[1] 王兴玲.SVG与适量地图的Web技术[J].计算机工程与应用,2002,(10):1-4.

[2] 赵晓峰.利用Ajax构建动态Web应用[J].深圳信息职业技术学院学报,2006,(1).

[3] 李瑞芳,袁满,孙永东.基于SVG的油田WebGIS平台的关键技术[J].大庆石油学院学报,2006,(30).

[4] 杨国瑞,张思博.基于Ajax的Web应用架构设计[J].现代电子技术,2006,(15):95-97.

[5] 高兵.XML在关系数据库中存储和查询方法的研究[D].哈尔滨工程大学,2004.

[6] 游文杰.JavaScript函数与事件应用[J].计算机应用,2001,(SI):119-120.