巧用Ajax和RSS做个人门户网站
作者:IT电子教育门户 来源: 最后修改于：2007-1-8 10:49:01 点击开始打印
--------------------------------------------------------------------------------
页面地址是:http://www.mldn.cn/articleview/2007-1-8/article_view_352.htm
--------------------------------------------------------------------------------
巧用Ajax和RSS做个人门户网站
为了排遣这段时间的无聊也顺便做个 RSS 应用的练习，决定给自己维护的一个小网站加个首页新闻，浏览器用 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="/oblog312/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：
<?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 众多方言中的一种，所以也要以 <?xml version="1.0"?> 开头，根节点的名称必须是 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 ) );
怎么样，用 XSLT 方便吧！好了，大功告成！对了，由于 XSLT 在转换时使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。
连续几天，用三个 post 的篇幅写完了这个东西，其中省略了很多很简单的，用不着废话去描述的细节，各位感兴趣的看客不知看明白了没有。呵呵，不管怎么样，发在这里记录一下我这几天的实践过程吧。
分享到：
相关推荐
【Ajax与RSS在个人门户网站中的应用】 Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换，提升了用户体验，使得网页...
【PHP函数实现跨域AJAX与RSS内容桥接】 在Web开发中，RSS聚合器是一种常见应用，它能实时更新并展示多个来源的新闻或博客文章。AJAX（Asynchronous JavaScript and XML）技术使得无需刷新整个页面即可动态更新内容...
【基于Ajax的RSS阅读器】 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术结合了JavaScript、XML、DOM、CSS以及XMLHttpRequest对象，使得Web应用...
**jQuery AJAX实现的RSS阅读器** 在Web开发中，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及AJAX交互。AJAX（异步JavaScript和XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况...
**Ajax RSS阅读器详解** Ajax（Asynchronous JavaScript and XML）技术是Web开发中的一个重要里程碑，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。RSS（Really Simple ...
综上所述，基于AJAX和RSS的商情网站设计是现代互联网技术与商业信息需求的结合，它通过技术创新提升用户获取和处理信息的效率，为企业和个人提供了强大的商业情报工具。同时，良好的界面设计和用户体验也是此类网站...
HTML 页面是用户与RSS阅读器交互的第一层界面。在这个例子中，HTML 结构包括一个按钮和一个用于显示RSS内容的容器。 ```html <!DOCTYPE html> , initial-scale=1.0"> <title>AJAX RSS阅读器 ...
在Web开发中，Ajax（Asynchronous JavaScript and XML）技术允许我们实现页面的部分更新，无需刷新整个页面即可与服务器进行数据交互。本实例是一个基于PHP和Ajax的RSS阅读器，它提供了一种简单的方式展示RSS订阅...
Ajax的核心在于XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。在Ajax RSS Reader中，这个对象被用来发送异步请求到RSS源，获取最新的条目数据，然后通过JavaScript处理这些数据并更新到页面上，用户...
然而，AJAX的同源策略限制了其对跨域资源的访问，这在尝试获取远程RSS馈送时成为一个挑战。本文将介绍如何通过PHP作为“桥梁”来解决这个问题。 首先，我们需要理解AJAX引擎的工作原理。在本例中，使用了一个自定义...
在本项目中，我们探讨的是如何使用ASP.NET 3.5与AJAX客户端框架来开发一个Web版的RSS阅读器。这个技术栈结合了服务器端的强大处理能力与客户端的交互性，为用户提供流畅且实时的体验。以下是关于这个主题的详细知识...
通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。使用ajax能够提高用户体验和应用性能，同时减轻服务器的负担。 RSS是一种基于XML（可扩展标记语言）的网页内容打包和发布格式。RSS文件通常用来...
### AJAX初级应用-RSS无刷新聚合器的代码与下载知识点详解 #### 一、概述 在探讨本案例之前，我们先来简要了解下几个关键概念：AJAX、RSS以及它们如何结合使用来构建一个无需刷新页面即可更新内容的应用。 **AJAX...
【Asp.Net+Ajax实现的宝宝RSS阅读器源码下载】是一个适合初学者学习的项目，它结合了Asp.Net技术和Ajax技术，用于构建一个功能完善的RSS阅读器。这个源码可以帮助开发者理解如何在Web应用中集成实时更新和异步交互，...
**Ajax 远程跨域获取 163RSS 新闻技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换，使用户体验更加流畅...
本书不仅从ajax的客户端和服务器端技术两个方面指导读者逐步掌握ajax基础应用，还通过实例详细演示了ajax表单验证、ajax聊天室、ajax suggest、使用svg实现的ajax实时绘图程序、ajax grid、ajax rss阅读器和ajax拖放...
综上所述，RSS阅读器结合RSS和Ajax技术，为用户提供了一种高效、便捷的在线新闻和信息获取方式。RSS解决了内容分发的问题，而Ajax则增强了阅读器的交互性和效率。通过不断优化和创新，RSS阅读器已成为现代互联网用户...