Ajax RSS 阅读器

lastwinner · 发表于 2006-7-11 23:33

同样，在命令行中运行此脚本后，会看到如清单 14 所示的输出。
清单 14. read_js.php 的输出
[php]
addFeed( 1,
[ { title:'War',
link:'http://www.muttmansion.com/ds/archives/002816.html',
description:'The...' }, ... ] );

.......
[/php]
为简洁起见，我截短了这段代码，但您可以抓住要点。以提要的 ID 和使用 JavaScript 格式编码的文章数据调用 addFeed 函数。

lastwinner · 发表于 2006-7-11 23:34

有了这些新的用 JavaScript 实现的服务，现在就可以创建一个新页面来使用这些服务了。清单 15 展示了这一新页面。
清单 15. script.html
[php]
<html> <head> <title>Script Component Test</title>
<style>
...
</style>
<script>
var g_homeDirectory = 'http://localhost/rss/';

function loadScript( url ) {
  var elScript = document.createElement( 'script' );
  elScript.src = url;
  document.body.appendChild( elScript );
}

function addFeed( id, articles ) {
  var ela = document.getElementById( 'elArticles' );
  ela.innerHTML = '';

  var elTable = document.createElement( 'table' );
  var elTBody = document.createElement( 'tbody' );
  elTable.appendChild( elTBody );

  for( var a in articles ) {
var title = articles[a].title;
var link = articles[a].link;
var description = articles[a].description;

// Create elements as before...
  }

  ela.appendChild( elTable );
}

function setFeeds( feeds ) {
  var elfl = document.getElementById( 'elFeedList' );
  elfl.innerHTML = '';

  var firstId = null;
  for( var f in feeds ) {
var elOption = document.createElement( 'option' );
elOption.value = feeds[f].id;
elOption.innerHTML = feeds[f].name;
elfl.appendChild( elOption );

if ( firstId == null ) firstId = feeds[f].id;
  }
  loadFeed( firstId );
}

function loadFeed( id ) { loadScript( g_homeDirectory+'read_js.php?id='+id ); }

function getFeedList() { loadScript( g_homeDirectory+'list_js.php' ); }
</script> </head> <body>
<div class="rssControl"> <div class="rssControlTitle">
<select id="elFeedList"
  onchange="loadFeed( this.options[this.selectedIndex].value )">
</select> </div> <div id="elArticles"> </div> </div>
<script> getFeedList(); </script>
</body> </html>

........
[/php]

此页面与最初的 idnex.html 页面非常类似。但未使用 loadXMLDoc 函数，而是使用了名为 loadScript 的新函数，用于动态创建 <script> 标记。<script> 标记随后从指定的 URL 加载 JavaScript 代码。

这些脚本标记调用 read_js.php 和 list_js.php 页面。而这些页面又创建在主页中回调 setFeeds 和 addFeed 函数的 JavaScript 代码。

lastwinner · 发表于 2006-7-11 23:34

转到此页面时，浏览器显示效果如图 6 所示。
图 6. 为数据使用<script>标记的 RSS 阅读器

此代码最大的优点就是任何人都可以使用 View Source 命令来查看页面中的脚本，并且能将这些代码复制到自己的页面中。随后其页面将使用返回 JavaScript 代码的 PHP 服务来更新页面。

lastwinner · 发表于 2006-7-11 23:35

结束语

在这篇文章中，我演示了如何使用两种不同的技术动态地访问 Web 页面中的数据，从而在页面上创建一个 RSS 阅读器。如果一切顺利，您能够使用本文给出的理念和代码丰富您自己的应用程序，而不必彻底重组您的代码。这正是 Ajax 真正的价值所在 —— 如果您熟悉 Web 技术，即可轻松通过服务器端的一些新服务和客户端的一点点代码使交互性得以升级。

lastwinner · 发表于 2006-7-11 23:36

下载
描述 Source code
名字 x-ajaxrss-code.zip
大小 8KB
下载方法HTTP

关于下载方法的信息

Get Adobe® Reader®

lastwinner · 发表于 2006-7-11 23:36

参考资料

学习

您可以参阅本文在 developerWorks 全球站点上的英文原文。
在 Wikipedia 的出色页面中阅读关于 Ajax 的内容。
快速获得使用 DHTML 与 XML 制作 Ajax 幻灯片（developerWorks，2006 年 5 月），了解如何动态创建栩栩如生的客户端幻灯片。
查看 RSS 1.0 标准。
了解 Resource Description Framework (RDF) 的有关内容，它与 RSS 密切相关。
访问 developerWorks 中国 XML 专区，那里有面向 XML 开发人员的更多资源。

获得产品和技术

访问 PHP 主页，这是了解 PHP 的好地方。
使用 IBM 试用软件构建您的下一个开发项目，可直接从 developerWorks 下载获得。

讨论

查看 ajaxian，这是一个追踪 Ajax 应用程序开发的绝妙博客。
通过参与 developerWorks blogs 加入 developerWorks 社区。

关于作者

Jack Herrington 是一名高级软件工程师，有着二十余年的经验，他撰写了三本图书：Code Generation in Action、Podcasting Hacks h PHP Hacks。他的作品还包括三十多篇文章。您可以通过 jherr@pobox.com 与他联系。

lastwinner · 发表于 2006-7-11 23:42

原文地址 http://www-128.ibm.com/developerworks/cn/xml/x-ajaxrss/index.html
全文完

okone96 · 发表于 2006-7-12 14:38

搂住把blog搬到这里了吧

lastwinner · 发表于 2006-7-12 19:21

最初由 okone96 发布
[B]搂住把blog搬到这里了吧 [/B]

俺Blog上不放这些东西

不过你倒提醒我了
改天搬到Blog中去

[参考文档] Ajax RSS 阅读器