蛙蛙推荐:迎接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>

 

它的显示如下图

蛙蛙推荐:迎接web2.0:写一个RSS.HTC组件
不可思议吧,其实我是写了一个
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 >

 

你可能感兴趣的:(Web)