用 Ajax 和 RSS 攒个首页新闻——（下）

　　在做完 RSS 部分后我突然有了一个想法，为了给使用 Ajax 取数据的浏览器提供信息，服务器要针对 Ajax 的请求单独作些响应处理，那何不就让浏览器把我们前面已经生成了的 RSS 当作数据源来显示首页新闻呢？这似乎是个不错的想法，但 RSS 是个 XML 格式的文件，很显然，想达到这样的目的就要让客户端用 JavaScript 来解析 XML 文件并加以显示。

 

　　为了用 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 >

 

　　这样之后我们就可以事先写一些针对 #News 和 div.News 等等的规则来装扮首页新闻了。好了，下面看看用 JS 解析 RSS 的代码怎么写（当然，之前我们先要用 Ajax 取到 RSS 数据）：
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>
　　 </ xsl : template>
</ xsl : stylesheet>

 

　　我们上面的 JavaScript 代码还要把这个 XSLT 从服务器上取下来，之后一句话就可以搞定上面一堆 JS 代码才能完成的工作：
document.getElementById( 'News').innerHTML = xsltProcess( xmlParse( rss ), xmlParse( xslt ) );
怎么样，用 XSLT 方便吧！好了，大功告成！对了，由于 XSLT 在转换时使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。

 

　　连续几天，用三个 post 的篇幅写完了这个东西，其中省略了很多很简单的，用不着废话去描述的细节，各位感兴趣的看客不知看明白了没有。呵呵，不管怎么样，发在这里记录一下我这几天的实践过程吧。