用 Ajax和 RSS制作一个首页新闻

从数据库中读取最新的新闻内容生成 RSS 的代码这里就不贴了，无非是一些字符串的拼接，当然了，你也可以用 PHP 的 XML DOM 接口来生成这个 RSS 内容。这样一来在网站上提供 RSS 订阅就搞定了。

为了用 JavaScript 来操控 XML，我决定使用 Google 的一个开源项目——AjaXSLT（http://goog-ajaxslt.sourceforge.net/），更多 Google 开源项目可以访问 http://code.google.com/。Google 提供的这个 AjaXSLT 项目用 JS 实现了一个 XML 的 DOM 接口和一个 XSLT 实现，下面把里面的几个主要文件做个简单介绍：

misc.js：一些常量定义和 helper 函数，还有 log 的实现。dom.js：XML DOM 接口的 JS 实现，主要的函数是 xmlParse( XMLString )，调用成功后就可以用标准 DOM 方式来操控返回的 XDocument 了。

xpath.js：XPath 的 JS 实现。

xslt.js：XSLT 的 JS 实现，要用到里面的 xsltProcess( XML, XSLT )，给定 XML 和 XSLT 得到转换的结果。

你可以只使用其中的 DOM 实现部分，而 dom.js 又依赖于 misc.js，所以要先载入 misc.js 再载入 dom.js。为了在首页上显示好看的新闻，我们要用 CSS 来打扮一下新闻的外观，所以要对新闻的数据组织方式有些要求，比如说要把得到的新闻最终组织成下面这个样子

<div id="News">

<div class="News">

<span class="Title">title</span>

<span class="Time">time</span>

<span class="Content">content</span>

</div>

</div>

var News = "";

var doc = xmlParse( rss );

items = doc.getElementsByTagName( "item" );

for( var i = 0; i < items.length; i++ )

{

News += "<div class='News'>";

title = items[i].getElementsByTagName( "title" );

News += ( "<span class='Title'>" + title[0].firstChild.nodeValue + "<\/span>" );

time = items[i].getElementsByTagName( "pubDate" );

News += ( "<span class='Time'>" + time[0].firstChild.nodeValue + "<\/span>" );

description = items[i].getElementsByTagName( "description" );

News += ( "<span class='Content'>" + description[0].firstChild.nodeValue + "<\/span>" );

News += "<\/div>";

}

document.getElementById('News').innerHTML = News;

好了，到现在为止我们的首页新闻就算完工了，但是既然 AjaXSLT 提供了 XSLT 的 JS 实现，我们拿来试试。先照着《XML 高级编程》写个 XSLT：

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<xsl:apply-templates select="//item"/>

</xsl:template>
<xsl:template match="item">

<div class="News">

<xsl:apply-templates select="title"/>

<xsl:apply-templates select="pubDate"/>

<xsl:apply-templates select="description"/>

</div>

</xsl:template>
<xsl:template match="title">

<span class="Title"><xsl:value-of select="."/></span>

</xsl:template>

<xsl:template match="pubDate">

<span class="Time"><xsl:value-of select="."/></span>

</xsl:template>
<xsl:template match="description">

<span class="Content"><xsl:value-of select="."/></span>
9 
7 
3 
1
2
3
 4 
 8 
:
 
			
  把此文章收藏到：