利用XMLHTTP技术为Donews Blog添加最新文章列表

80酷酷网    80kuku.com

  xml    Donews Blog的多数模版都没有显示最新文章列表的功能,下面是利用XMLHTTP技术实现这个功能的思路和代码,效果见左侧的“最新文章”一栏。因为Donews Blog和Discuz论坛一样,不同的模版各搞各的,无法给出统一的变量名(HTML Tag的ID值),因此需要在代码的基础上用CSS修饰以产生合适的效果。

  思路和技术背景

  思路很单纯,直接用XMLHTTP读出Blog的RSS文件,取出最新的文章插入到提前准备好的HTML Tag中即可。

  XMLHTTP是微软上世纪为自己的Web应用的某些效果发明的技术,去年大喇叭们给这种技术(其实是效果)起了个新名字叫Ajax,用来赞美Google的几个Web应用,却把微软扔一边了。随着微软、Firefox和Opera把XMLHTTP集成到各自的浏览器中,Web开发者不需要让用户下载ActiveX,只需要用喜欢的Web脚本直接调用即可,Ajax效果开始得以普及。

  原始代码

<h3 class="listtitle">最新文章 <span>(<a type="text/javascript"><!--
var xmlhttp = false;
function load_rss()
{
  xmlhttp = false;
  if (window.XMLHttpRequest)
  {
    xmlhttp = new XMLHttpRequest();
    if (xmlhttp.overrideMimeType)
    {
       xmlhttp.overrideMimeType('text/xml');
    }
  }
  else if (window.ActiveXObject)
  {
    try
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
      }
    }
  }
  if(!xmlhttp)
  {
    return;
  }
  xmlhttp.onreadystatechange = proc_rss;
  xmlhttp.open('GET', '/concorde/rss.aspx', true);
  xmlhttp.send(null);
}

function proc_rss()
{
  if (xmlhttp.readyState == 4)
  {
    if (xmlhttp.status == 200)
    {
      var items = xmlhttp.responseXML.getElementsByTagName('item');
      var l = 6;
      if(items.length < 6)
      {
        l = items.length;
      }
      var html = '';
      for (var i = 0; i < l; i++)
      {
        html = html + get_item(items, i);
      }
      var obj = document.getElementById('my_last_post');
      if(obj)
      {
        obj.innerHTML = html;
      }
    }
  }
}

function get_item(items, id)
{
  var link = items[id].getElementsByTagName('link').item(0).firstChild.nodeValue;
  var title = items[id].getElementsByTagName('title').item(0).firstChild.nodeValue;
  var item = '<li class="listitem"><a class="list"><li>,是用来关闭下面的代码(写在Donews Blog的模版里);代码里的'/concorde/rss.aspx'需要修改为自己或别人的Blog RSS(但不能用blog.donews.com域名之外的XML,如FeedBunrer包裹的);最后把代码放在“选项 » 配置 » 公告”中合适的位置即可。为修饰显示效果,可能需要配合合适的CSS代码。此外建议在“自定义CSS样式”中加上:.listitem{word-wrap:break-word;overflow: hidden;} 这样可以防止评论在IE中撑大页面,在Firefox中则是隐藏溢出的文字。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: