荷塘月色

作者 Neot 写于 2006-08-04 | 3,007 次浏览 | 分类 » 软件开发 |

搬到Blogger.com的这段时间，我给自己的Blog新加了”文章分类”、”Trackback “、”RSS订阅”、”邮件订阅”、”计数器”和”交换链接”等功能。看起来，已经不错了。可以，还有一个重要功能，我一直没有能够实现。那就是”最新文章”列表。Google了一下，好像也没有找到相关文章。没办法，只有自己捣腾一下了。

了解Blogger.com的一些特征后，我决定利用它的rss.xml文件。用Ajax读取根目录下的rss.xml文章，就能读取最新文章了。代码如下：

<div id=”newlinks”>
</div>
<script type=”text/javascript”>
// rss.xml的路径，blogger.com 中在站点根目录下：/rss.xml
var url = “/rss.xml”;
var xmlHttp;

function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(” Microsoft.XMLHTTP “);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(“GET”, url, true);
xmlHttp.send(null);
}catch(exception){
alert(exception);
}
}

function handleStateChange(){
if(xmlHttp.readyState == 4){
if ( xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得XML的DOM对象
var xmlDOM = xmlHttp.responseXML;

// 取得XML文档的根
var root = xmlDOM.documentElement;

try
{
// 取得<info>结果
var channels = root.getElementsByTagName(“channel”);
var items = null;
var titles = null;
var links = null;
var newlinks = document.getElementById(“newlinks”);

if(newlinks && channels.length > 0){
items = channels[0].getElementsByTagName(“item”);
for(var i=0;i<items.length && i<10;i++){
titles = items[i].getElementsByTagName(“title”);
links = items[i].getElementsByTagName(“link”);
if(titles.length >0 && links.length>0){
newlinks.innerHTML += “<li><a href=\”" + links[0].firstChild.data + “\”>” + titles[0].firstChild.data + “</a></li>”;
}
}
}
}catch(exception)
{

}
}
}
}

// 开始读取
startRequest();
</script>

<div id=”newlinks”>用来存放读取的”最新文章”列表，url变量存放rss.xml所在的路径，xmlHttp用存放Ajax对象，handleStateChange方法解析xml文件并读取标题和链接数据。如果您对Ajax不太了解，可参考其它文章。

rss的rss.xml文章一般记录的是你最近修改（包括新增）过文章列表。所以这种方法读取的列表，实际上是”最近更新”列表。但是，如果总是新增文章，很少对旧文章进行修改的话。那么，这个列表就能到到”最新文章”列表的效果。为了不给读者造成误会，我主页上也没有用”最新文章”，而是用”新近更新”作为标题。

注意，在Blogger.com中”预览”是看不到效果的。因为”预览”的路径是：http://www.blogger.com/blog- preview.g，这个路径并不属于你自己Blogger的地址，程序没有访问rss.xml文章的权限。

你也可以把url变量设置成完整路径。以我的网站为例，可设置：

var url = “ http://blog.tanggaowei.com/rss.xml “;

示例代码下载： http://tanggaowei.googlepages.com/blogger-new-files.rar
(注：IE要把代码放在WEB服务上才有效，Firefox可直接浏览)

[ 标签： ajax, blogger ]
[ 固定链接：http://blog.tanggaowei.com/2006/08/ajaxbloggercom.html ]