应用XMLHTTP的SVG小例子

来源：互联网发布：在线手机小号软件编辑：程序博客网时间：2024/04/30 03:55

使用SVG+XMLHTTP做了一个小例子，数据源是从我BLOG的聚合中取的，可以显示后五篇文章的评论数，每10秒更新一下。（不好意思，我文章的评论数很少，所以在例子中改大了些），可以将URL改为你自己的BLOG聚合地址，看看你的文章评论数的变化。中间也演示了SVG中的文字阴影特效，渐变填充，JAVASCRIPT动态更新SVG等。很简单，如果进行一些改进的话，还可以加一些动画，以及动态计算柱状图的位置等。以下为效果和原代码：

源代码：

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

var url = "http://blog.csdn.net/firefight/Rss.aspx";

function getData()

{

var xmlhttp;

var error;

//Create XMLHTTP object

eval('try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {xmlhttp = null;error=e;}');

if(null != xmlhttp)

{

xmlhttp.Open("GET", url, false);

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlhttp.Send();

var xml_dom = new ActiveXObject("MSXML2.DOMDocument");

//alert(xmlhttp.responseText);

xml_dom.loadXML(xmlhttp.responseText);

drawText(xml_dom);

}

setTimeout("getData()",10000);

}

function drawText(xml)

{

//Remove all text and rect child under "newRoot" elem

var svgElem = svgDocument.getElementById("newRoot");

var texts = svgElem.getElementsByTagName("text");

for(var i = texts.length - 1; i >= 0 ; i--)

{

svgElem.removeChild(texts.item(i));

}

var rects = svgElem.getElementsByTagName("rect");

for(var i = rects.length - 1; i >= 0 ; i--)

{

svgElem.removeChild(rects.item(i));

}

//Get data

var nodes = xml.selectNodes("/rss/channel/item");

var count = 0;

while(nodes[count]!=null)

{

//Get artical and comment time values from my blog RSS

var title = nodes[count].getElementsByTagName("title");

var commentTimes = nodes[count].getElementsByTagName("slash:comments");

//Create induction text in small rect dynamically

var myData = svgDocument.createTextNode( title[0].text );

var text = svgDocument.createElementNS(svgns, "text");

text.appendChild(myData);

text.setAttributeNS(null, "x", 590);

text.setAttributeNS(null, "y", 128 + 20*count);

text.setAttributeNS(null, "font-size", "8pt");

text.setAttributeNS(null, "stroke", "blue");

//Add text node in small rect

svgElem.appendChild(text);

//Create rect bar in bar chart dynamically

var rect = svgDocument.createElementNS(svgns, "rect");

//Change my comment records :)

var times = Number( commentTimes[0].text )*100 + 50;

rect.setAttributeNS(null, "x", 150 + 50*count);

rect.setAttributeNS(null, "y", 500 - times);

rect.setAttributeNS(null, "width", 30);

rect.setAttributeNS(null, "height", times - 1);

var colorRect = svgDocument.getElementById("rect" + count);

var color = colorRect.getAttributeNS(null, "fill");

rect.setAttributeNS(null, "fill", color);

//Add rect bar into bar chart

svgElem.appendChild(rect);

//Add number to bar

myData = svgDocument.createTextNode( times );

text = svgDocument.createElementNS(svgns, "text");

text.appendChild(myData);

text.setAttributeNS(null, "x", 150 + 50*count + 10);

text.setAttributeNS(null, "y", 500 - times - 5);

text.setAttributeNS(null, "font-size", "8pt");

text.setAttributeNS(null, "stroke", "purple");

//Add text node in small rect

svgElem.appendChild(text);

//Only draw first five items

count ++;

if(count >= 5)

break;

}

//Update date time

yy_datetime();

}

function yy_datetime()

{

var text;

text = svgDocument.getElementById("updateTime");

var datetime,temp,date,time;

datetime = new Date().toLocaleString();

temp = datetime.lastIndexOf(" ");

date = datetime.substring(0,temp);

time = datetime.substring(temp+1,datetime.length);

text.firstChild.data = "Update time: " + date + " " + time;

}

// ]]>

</script>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</feMerge>

</filter>

<marker id="smallArrow"

viewBox="0 0 10 10" refX="0" refY="5"

markerUnits="strokeWidth" markerWidth="3" markerHeight="10"

orient="auto">

</marker>

<marker id="bigArrow"

viewBox="0 0 20 20" refX="0" refY="10"

markerUnits="strokeWidth" markerWidth="3" markerHeight="10"

orient="auto">

</marker>

</defs>

<text filter="url(#dropShadow)" x="30" y="30"

font-size="30" font-family="Monotype Corsiva" fill="yellow" stroke="red" >

SVG and XMLHTTP DEMO

</text>

<text x="60" y="80" font-size="20" stroke="black" >comments</text>

<text x="720" y="480" font-size="20" stroke="black" >artical</text>

<g id="chart" stroke="purple" stroke-width="3" fill="none"

marker-end="url(#bigArrow)" >

</g>

<g>

</g>

</svg>

</svg>

是否有AJAX的影子呢？我也不知道，没有使用AJAX的库，但觉得AJAX就是将JavaScript层的功能扩大，作为服务器和浏览器之间数据的中转站，并没有什么技术创新，正如很多文章中总结的，重要的是分析自己的业务特点，合理设计数据的交互过程，给网络用户最佳的体验。所以最关键的不是技术，而是用所掌握的技术做出令人激动的东西，例如Google earth。自己感觉SVG＋XMLHTTP+JAVASCRIPT在很多方面有机会作出好的东西。