如何用Ajax和RSS制作一个首页新闻_AJAX教程

推荐：掌握Ajax 第1部分:Ajax简介
Brett McLaughlin , 作家，编辑, O'Reilly and Associates 2006 年 1 月 04 日 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就

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

给自己维护的一个小网站加个首页新闻，浏览器用 Ajax 或者 Ajah 从服务器取新闻异步的显示出来，同时提供 RSS 源供聚合器订阅。数据可以保存在数据库中也可以简单的写入到服务器的一个文件中，为了灵活起见我就在 MySQL 中新建一个表放站内新闻了，就这么几个字段：id、title、content、time。新闻录入和从数据库中取数据提供给 Ajax/Ajah 请求略。

下面是客户端 XMLHTTPRequest 的代码：

 
新闻读取中……




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 );

}

这里唯一值得说明的就是 XMLHTTPRequest 默认是用 UTF-8 传递数据的，所以你的数据源最好也用 UTF-8 否则（因为我们这里客户端已经指定了要用 GB2312 了）得到的会是乱码，这在 IE 下会引发 JavaScript 错误，在 FireFox 下却没问题，所以我用 try 和 catch 把上面的代码包住了，免得测试的时候出现错误。如果想试试的话可以用下面的代码作为 news.php：

echo 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 文件内容：

http://www.mysite.com

Just for testing





Hi, I'm 2ndboy. Welcome to my site!
Sat, 07 Sep 2005 0:00:01 GMT







It's great for using.
Sat, 21 Sep 2005 1:23:45 GMT





 

从数据库中读取最新的新闻内容生成 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 += "
";

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

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

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

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

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

News += ( "" + 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 在转换时使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。

分享：怎样使用JavaScript和Ajax发出异步请求
Brett McLaughlin ，作家，编辑，O'Reilly Media Inc.2006 年 2 月 16 日 多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLH