zoukankan      html  css  js  c++  java
  • 蛙蛙推荐:迎接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>

  • 相关阅读:
    strftime和strptime函数对时间的转换操作
    第四章文件和目录学习笔记
    getenv和putenv在获取和设置环境变量中的使用
    SQL 常用语句以及函数(个人收藏)
    详测 Generics Collections TQueue (2): Create、Count、Clear、TrimExcess
    详测 Generics Collections TQueue (1): Enqueue、Dequeue、Peek
    详测 Generics Collections TList (9): BinarySearch
    详测 Generics Collections TList (8): Sort
    详测 Generics Collections TList (4): AddRange、InsertRange、DeleteRange
    详测 Generics Collections TList (7): Items、Contains
  • 原文地址:https://www.cnblogs.com/onlytiancai/p/259112.html
Copyright © 2011-2022 走看看