给自己维护的一个小网站加个首页新闻，浏览器用 Ajax 或者 Ajah 从服务器取新闻异步的显示出来，同时提供 RSS 源供聚合器订阅。
XMLHTTPRequest 从上次做过一个手机模拟器后就再没碰过，这次在网上搜寻发现了一个好东西：
http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/，一个 Cross-Browser 的 XMLHttpRequest 实现，作者在创作共用条款（Creative Commons License）下发布这个库，只要你不移除脚本中作者的姓名和网址就可以自由使用，就用它了！下载 xmlhttprequest.js 以备后用。
数据可以保存在数据库中也可以简单的写入到服务器的一个文件中，为了灵活起见我就在 MySQL 中新建一个表放站内新闻了，就这么几个字段：id、title、content、time。新闻录入和从数据库中取数据提供给 Ajax/Ajah 请求略。
下面是客户端 XMLHTTPRequest 的代码：
<html><head><title>首页新闻测试</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="xmlhttprequest.js"></script></head><body><div id="News">新闻读取中……</div><script type="text/javascript">var req = new XMLHttpRequest();if( req ){req.onreadystatechange = function(){var News = "新闻读取失败";try{if( req.readyState == 4 && ( req.status == 200 || req.status == 304 ) )News = req.responseText;}catch(e){News = e.description;}document.getElementById( 'News' ).innerHTML = News;};req.open( 'GET', 'news.php' );req.send( null );}</script></body></html>
这里唯一值得说明的就是 XMLHTTPRequest 默认是用 UTF-8 传递数据的，所以你的数据源最好也用 UTF-8 否则（因为我们这里客户端已经指定了要用 GB2312 了）得到的会是乱码，这在 IE 下会引发 JavaScript 错误，在 FireFox 下却没问题，所以我用 try 和 catch 把上面的代码包住了，免得测试的时候出现错误。如果想试试的话可以用下面的代码作为 news.php：
<?phpecho iconv( "GB2312", "UTF-8", "这就是新闻" );//echo "这就是新闻";?>
如果注释掉第一句而开放第二句的话不仅看到的是乱码，在 IE 下还会出现 -1072896748 错误。有意思的是 IE 好像还会缓存由 XMLHTTPRequest 收到的内容，而 FireFox 则不会，所以在测试中会出现刷新 IE 很多次看到的还是旧数据的问题，可以在程序里加上下面 4 句话解决这个问题：
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );header( "Cache-Control: no-cache, must-revalidate" );header( "Pragma: no-cache" );
要将首页新闻提供给聚合器订阅就要将后台输入的新闻生成 RSS feed，RSS 2.0 的规范可以参考
http://feedvalidator.org/docs/rss2.html，相应的中文翻译版本可以在
http://www.cpcwedu.com/Document/WEBOfficial/095447158.htm 找到。
RSS 格式其实也是 XML 众多方言中的一种，所以也要以 开头，根节点的名称必须是 rss，符合 RSS 2.0 规范的 RSS 中这个 rss 节点要有一个 version="2.0" 的属性。rss 节点有一个名为 channel 的子节点，channel 就是一个频道。channel 有 3 个必要的子节点，分别为 title、link 和 description。以 Blog 为例，title 就是 Blog 的名字，link 是 Blog 的 URL 地址，而 description 是 Blog 的描述。
channel 可以包含若干个 item 子节点，在 Blog 中每一个 item 就对应一篇 post，我们这里每一个 item 就是一篇新闻。item 的所有子节点均为可选，但至少要包含 title 和 description，由于新闻要有时间，所以我们再给它加上一个 pubDate 节点，下面就是一个符合 RSS 2.0 规范的 RSS 文件内容：
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>The name of my site</title><link>
http://www.mysite.com</link><description>Just for testing</description><item><title>About</title><description>Hi, I'm 2ndboy. Welcome to my site!</description><pubDate>Sat, 07 Sep 2005 0:00:01 GMT</pubDate></item><item><title>New service is out!</title><description>It's great for using.</description><pubDate>Sat, 21 Sep 2005 1:23:45 GMT</pubDate></item></channel></rss>
从数据库中读取最新的新闻内容生成 RSS 的代码这里就不贴了，无非是一些字符串的拼接，当然了，你也可以用 PHP 的 XML DOM 接口来生成这个 RSS 内容。这样一来在网站上提供 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 ) );
OK，大功告成！注意，由于 XSLT 在转换时使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。