1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

===========用AJAX技术在自己Blog上聚合并显示朋友Blog的最新文章(通过RSS)

本帖由 callcall2005-09-16 发布。版面名称:前端开发

  1. callcall

    callcall New Member

    注册:
    2005-09-04
    帖子:
    119
    赞:
    2
    来源:Andy's blog

    有时候,你的Blog可能需要这样的功能:

    在自己Blog上聚合并显示朋友Blog的最新文章,这样方便自己及时了解朋友的消息,另外,也方便访问者找到和本Blog相关的blog和文章。

    这个功能你可以叫它“Blog聚合”或者“Blog联播”,目前,实现这样功能的软件或服务都有限制:比如,Terac Sinfonia、Lilina、MXNA虽然功能都很强大,但是需要安装,不能自由定制,不能嵌入到Blog侧边栏。另一方面,目前提供这样服务的BSP只能聚合本系统内的用户,限制也很多。

    为了解决以上问题,我采用AJAX(Asynchronous JavaScript + XML)技术实现了在自己Blog上聚合并显示朋友Blog的最新文章的功能,你可以根据需要,进行自由定制。默认是支持RSS 2.0规范的,Terac Miracle、Movable Type、Word Press、Donews / 博客园 / CSDN采用的.Text系统都能很好的支持,你可以自由修改,来支持RSS 0.92、RSS 1.0、Atom 0.3。

    为什么采用AJAX呢?首先,聚合别人的RSS不能影响自己网站的速度,所以需要异步执行,其次,RSS本身就是一个很规范的XML文档,另外,由于聚合内容大小不可定,所以必须要局部刷新,最重要的一点,采用AJAX完全把加载解析XML的操作放到客户端进行处理,节省服务器带宽和资源,最后,这个功能我完全用JavaScript实现的,这样,不管你的blog是ASP、.Net、PHP、JSP、Perl,甚至纯HTML的都能用。下面说用法:

    首先,在你Blog侧边栏合适位置加入这样一段代码:

    代码:
    <script src="ajax_rss.js" type="text/javascript"></script>
    然后将下面的内容保存成“ajax_rss.js”,然后上传到服务器相应的位置:

    代码:
        //你可以自由添加符合RSS 2.0规范的 RSS
        processRSS('http://www.5iuu.com/feedrss2.asp');
        processRSS('http://www.donews.net/keso/rss.aspx');
        function processRSS(url){
          var req = getXMLHttpRequest();
          req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
              var doc=req.responseXML.documentElement; 
              parseRSS(doc);
            }
          }
          req.open("GET",url, true);
          req.send(null);
        }
        function parseRSS(doc) {
         //如果要用RSS 0.92, RSS 1.0, Atom 0.3,你需要改下面3行
          var blogName=doc.getElementsByTagName("title")[0].firstChild.data;
          var entryName=doc.getElementsByTagName("title")[1].firstChild.data;
          var entryLink=doc.getElementsByTagName("link")[1].firstChild.data;
        document.getElementById('ajax_rss').innerHTML += '<a target="_blank" href="'+entryLink+'" title="'+blogName+'">'+entryName+'</a><br/>'; }
        function getXMLHttpRequest() {
            var xmlhttp;
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    xmlhttp = false;
                }
            }
            if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
                xmlhttp = new XMLHttpRequest();
            }
            return xmlhttp;
        }
    好了,安装结束,测试一下吧!

    需要说明的是:由于网速和对方服务器的原因,AJAX不能保证一定能获得RSS,所以有时可能会显示不出来。另外,建议不要加太多的blog,由于装载和解析放到客户端,过多的blog可能会导致客户端的系统运行缓慢,甚至浏览器崩溃。

    由于安全原因,XMLHttpRequest不能cross domain,所以只能聚合当前domain上的内容,比如你在新天堂的Blog只能聚合新天堂的,在博客园上的Blog只能聚合博客园的,其实对于部分人,这已经足够了。搜了一下,我找到了解决cross domain问题的方案:方法一,用Apache mod_rewrite把other domian的RSS重写成本地的,这需要配置服务器,比较麻烦,不通用。方法二,用ASP、.Net、PHP、JSP、Perl写一个Proxy脚本。

    其实这个东西适合访问量不大的Blog使用,如果你的blog访问量很大的话,顺带着朋友blog的RSS访问量也很大,很浪费朋友Blog所在服务器的带宽^_^。当然,你可以用bloglines或feedburner中转。

    PHP代码(保存成keso.php,我聚合了Keso的,请别见怪:)

    代码:
        header( "Content-Type: text/xml" );
        //TODO 应该用Cache
        $rssData = file_get_contents("http://www.donews.net/keso/rss.aspx");
        echo $rssData;
        ?>
    
    然后上传到服务器,在ajax_rss.js里加入这一行:

    代码:
    processRSS('http://www.xintiantang.com/keso.php');
    这样就解决了XMLHttpRequest的cross domain问题。
     
  2. ffxk

    ffxk New Member

    注册:
    2005-09-06
    帖子:
    170
    赞:
    0
    有演示吗?看看使用效果
     
  3. yeshou

    yeshou New Member

    注册:
    2005-09-06
    帖子:
    7,067
    赞:
    34
    Blog使用AJAX意义大么? 除非是大型的Blog服务提供商
     
  4. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    他提供的功能作用在于聚合。