动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   Xml → 阅读文章

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

作者来源: 
阅读 数 427 人次 , 2006-4-19 17:35:00 

  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 href="http://blog.donews.com/concorde/archive/2006/02/15/727247.aspx">如何实现?</a>)</span></h3>
<ul class="list" id="my_last_post"></ul><ul class="list"><li>
<script 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 href="' + link + '">' + title + '</a></li>';
  return item;
}
load_rss();
file://-->
</script>

  代码第二行有一个开放的<ul 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中则是隐藏溢出的文字。

  
 本文Tagsxmlhttp  blog  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:技术新知:AJAX基础教程
· 下一篇:WAP中级教程
· XSLT轻松入门第一章:XSLT的概念(2)
· 用ASP、VB和XML建立互联网应用程序(3)
· 用ASP、VB和XML建立互联网应用程序
· xml css htc 的综合运用
· XML技术上传文件


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077