蛙蛙推荐:迎接web2.0:写一个RSS.HTC组件

 现在web2.0已经渐渐流行起来了,很多人都在自己的网站上直接用RSS聚合其它站点的内容来显示给浏览者,我开发了一个htc控件来方便大家实现这个功能。

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的地址,我这里使用的是中文MSDNrss地址,top属性表示最多显示几条记录,leftstr属性表示消息标题(title)的最大长度,超过这个长度就用省略号表示。然后呢,开标签和闭标签之间的内容是模板,你可以定义循环节,它包含在<!--loop--><!--/loop-->之间,这里面的内容是重复显示的,其中{#link}被替换成链接的地址,{#description}替换成描述,{#title}替换成消息标题,其它的就没了,因为RSS1RSS2有很大的不同,所以为了实现最大兼容就实现了这几个标签。也没写什么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>

 

posted @ 2005-10-21 13:50  蛙蛙王子  Views(2948)  Comments(9Edit  收藏