分享
 
 
 

巧用Ajax和RSS做个人门户网站

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

为了排遣这段时间的无聊也顺便做个 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="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 的篇幅写完了这个东西,其中省略了很多很简单的,用不着废话去描述的细节,各位感兴趣的看客不知看明白了没有。呵呵,不管怎么样,发在这里记录一下我这几天的实践过程吧。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有