蛙蛙推荐：迎接web2.0：写一个RSS.HTC组件
现在web2.0已经渐渐流行起来了，很多人都在自己的网站上直接用RSS聚合其它站点的内容来显示给浏览者，我开发了一个htc控件来方便大家实现这个功能。
<HTML xmlns:wawa>
<HEAD>
<?IMPORT namespace="wawa" implementation="rss.htc">
</HEAD>
<BODY>
<wawa:rss feedURL="http://www.microsoft.com/china/msdn/rss.xml" top="5" leftstr="25">
<TABLE width="500" style="font-size:12px; ">
<!--loop-->
<TR>
<TD rowspan="2" valign="top">★</TD>
<TD><a href="{#link}" title="{#description}">{#title}</a>
</TD>
</TR>
<TR>
<TD><b>描述：</b>{#description}</TD>
</TR>
<!--/loop-->
</TABLE>
</wawa:rss>
</BODY>
</HTML>
Web2.0是以Flickr、43Things.com等网站为代表，以Blog、TAG、SNS、RSS、wiki等社会软件的应用为核心，依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式。
大家先来看一段代码，想象一下它会产生什么样的效果呢？
<HTML xmlns:wawa><HEAD><?IMPORT namespace="wawa" implementation="rss.htc"></HEAD><BODY> <wawa:rss feedURL="http://www.microsoft.com/china/msdn/rss.xml" top="5" leftstr="25"> <TABLE width="500" style="font-size:12px; "> <!--loop--> <TR> <TD rowspan="2" valign="top">★</TD> <TD><a href="{#link}" title="{#description}">{#title}</a> </TD> </TR> <TR> <TD><b>描述：</b>{#description}</TD> </TR> <!--/loop--> </TABLE> </wawa:rss></BODY></HTML>
它的显示如下图
不可思议吧，其实我是写了一个htc组件，我来介绍一下我开发的这个html组件的属性和替换标签哦，feedURL属性表示你要引用的rss的地址，我这里使用的是中文MSDN的rss地址，top属性表示最多显示几条记录，leftstr属性表示消息标题(title)的最大长度，超过这个长度就用省略号表示。然后呢，开标签和闭标签之间的内容是模板，你可以定义循环节，它包含在<!--loop-->和<!--/loop-->之间，这里面的内容是重复显示的，其中{#link}被替换成链接的地址，{#description}替换成描述，{#title}替换成消息标题，其它的就没了，因为RSS1和RSS2有很大的不同，所以为了实现最大兼容就实现了这几个标签。也没写什么SDK，就简单谢谢帮助就行了，相信大家都会用。
其实源码也很简单的，我贴一下。
<PUBLIC:COMPONENT tagName="rss">
<PUBLIC:DEFAULTS
canHaveHTML=true
viewLinkContent=true
/>
<PUBLIC:ATTACH event="ondocumentready" onEvent="onDocumentReady()" />
</PUBLIC:COMPONENT>
<SCRIPT language="JScript">
var m_oHttp;
var m_SourceStr;
function onDocumentReady()
{
m_SourceStr = this.innerHTML;
m_SourceStr = m_SourceStr.replace(/<tbody>|<\/tbody>/ig,"");
m_oHttp = new ActiveXObject("Microsoft.xmlhttp");
m_oHttp.open("GET", this.element.feedURL, true);
m_oHttp.onreadystatechange = onHttpReady;
m_oHttp.send();
}
function onHttpReady()
{
var outStr = "";
var loopStr = "";
if ((m_oHttp.readyState != 4) || (m_oHttp.status != 200) ||
(m_oHttp.responseXML == null))
return;
outStr += m_SourceStr.substring(0,m_SourceStr.indexOf("<!--loop-->"));
loopStr += m_SourceStr.substring(m_SourceStr.indexOf("<!--loop-->")+11,m_SourceStr.indexOf("<!--/loop-->"));
var oNodes = m_oHttp.responseXML.selectNodes("rss/channel/item");
if ((oNodes == null) || (oNodes.length == null))
return;
for (var i = 0; i < oNodes.length && i < this.element.top; i++)
{
var tempStr = loopStr.replace(/{#link}/ig,oNodes[i].selectSingleNode("link").text);
if(oNodes[i].selectSingleNode("title").text.length > this.element.leftstr)
{
tempStr = tempStr.replace(/{#title}/ig,oNodes[i].selectSingleNode("title").text.substring(0,this.element.leftstr) + "
");
}
else
{
tempStr = tempStr.replace(/{#title}/ig,oNodes[i].selectSingleNode("title").text);
}
tempStr = tempStr.replace(/{#description}/ig,oNodes[i].selectSingleNode("description").text);
outStr += tempStr;
}
outStr += m_SourceStr.substring(m_SourceStr.indexOf("<!--/loop-->")+12);
divRSS.innerHTML += outStr;
}
</SCRIPT>
<div id="divRSS"></div>
<PUBLIC:DEFAULTS
canHaveHTML=true
viewLinkContent=true
/>
<PUBLIC:ATTACH event="ondocumentready" onEvent="onDocumentReady()" />
</PUBLIC:COMPONENT>
<SCRIPT language="JScript">
var m_oHttp;
var m_SourceStr;
function onDocumentReady()
{
m_SourceStr = this.innerHTML;
m_SourceStr = m_SourceStr.replace(/<tbody>|<\/tbody>/ig,"");
m_oHttp = new ActiveXObject("Microsoft.xmlhttp");
m_oHttp.open("GET", this.element.feedURL, true);
m_oHttp.onreadystatechange = onHttpReady;
m_oHttp.send();
}
function onHttpReady()
{
var outStr = "";
var loopStr = "";
if ((m_oHttp.readyState != 4) || (m_oHttp.status != 200) ||
(m_oHttp.responseXML == null))
return;
outStr += m_SourceStr.substring(0,m_SourceStr.indexOf("<!--loop-->"));
loopStr += m_SourceStr.substring(m_SourceStr.indexOf("<!--loop-->")+11,m_SourceStr.indexOf("<!--/loop-->"));
var oNodes = m_oHttp.responseXML.selectNodes("rss/channel/item");
if ((oNodes == null) || (oNodes.length == null))
return;
for (var i = 0; i < oNodes.length && i < this.element.top; i++)
{
var tempStr = loopStr.replace(/{#link}/ig,oNodes[i].selectSingleNode("link").text);
if(oNodes[i].selectSingleNode("title").text.length > this.element.leftstr)
{
tempStr = tempStr.replace(/{#title}/ig,oNodes[i].selectSingleNode("title").text.substring(0,this.element.leftstr) + "
");}
else
{
tempStr = tempStr.replace(/{#title}/ig,oNodes[i].selectSingleNode("title").text);
}
tempStr = tempStr.replace(/{#description}/ig,oNodes[i].selectSingleNode("description").text);
outStr += tempStr;
}
outStr += m_SourceStr.substring(m_SourceStr.indexOf("<!--/loop-->")+12);
divRSS.innerHTML += outStr;
}
</SCRIPT>
<div id="divRSS"></div>
