PHP和AJAX打造高级RSS聚合器

 

　　 RSS 聚合器是一种特别适合于使用标准 AJAX 引擎进行构建的应用程序，然而，要实现对 RSS 回馈的跨域的 AJAX 请求往往是很难的。在本文中，我将向你展示如何利用一个简单的 PHP 函数来实现 " 桥接 "AJAX 引擎和 RSS 内容。

 

　　一、 引言

 

　　现在，开发一个 RSS 聚合器已经不再是困难的事情，但是开发一个高质量的 RSS 聚合器却仍然存在相当的难度。另一方面，创建一个定制聚合器一般不是很难，并且在这种聚合器内能够提供一个你自己选择的接口。 RSS 聚合代表了一类特别适合于一个 AJAX 应用程序所消费的数据，这是因为：它是 XML 格式的，并且 AJAX 能够良好地显示新的回馈而不必进行页面刷新。然而问题总是存在：在一个标准的 AJAX 引擎中实现跨域的 AJAX 请求是不可能的。在本文中，我将向你展示如何利用一个很简单的 PHP 函数来桥接 AJAX 引擎和远程内容（在本文中它指的是 RSS 回馈）。

 

　　【提示】 本文假定你已经对 PHP 有一个基本理解并且有使用 AJAX 和分析 XML 的经验。要全面理解本文所提供的示例，你需要下载相应的源码文件。

 

　　二、 开始

 

　　在我们正式开始前，我想简短地介绍一下我们将用于发出请求的 AJAX 引擎。该引擎能够简化 AJAX 调用并且有助于消除当发出请求和调度响应时存在的大量冗余。我不会详细讨论它的组成代码，而仅向你简短地介绍我们在本文中如何使用它。

 

　　首先，我们需要导入构成该引擎的所有 javascript 文件。包含在我们的 index.html 文件中的代码看起来如下所示：

 

＜ script type="text/javascript" src=js/model/HTTP.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/model/Ajax.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/model/AjaxUpdater.js" ＞＜ /script ＞

 

　　一旦我们导入该 JavaScript 文件，我们就可以通过编写类似下列的代码来发出一个请求：

 

AjaxUpdater.Update('GET' ， 'url' ， callbackMethod);" ＞

 

　　该 AjaxUpdater 是一个对象，它负责处理我们的 AJAX 调用。我们简单地调用它的 Update 方法并且传递请求的方法，我们请求的 URL ，以及我们想把该响应代理到的回调方法。

 

　　当发出我们的请求时，这就是所有我们需要关心的。现在，让我们集中于定制 RSS 聚合器的功能。

 

　　三、 入口点

 

　　指向该聚合器的入口是 index.html 文件，我们从浏览器中对它进行调用。下面是描述该 index 的代码：

 

＜ html ＞
＜ head ＞
＜ title ＞ RSS Aggregation with PHP and Ajax ＜ /title ＞
＜ link href="CSS/layout.css" rel="stylesheet" type="text/css" / ＞
＜ script type="text/javascript" src=js/model/HTTP.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/model/Ajax.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/model/AjaxUpdater.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/controller/Aggregator.js" ＞＜ /script ＞
＜ script type="text/javascript" src=js/view/Feed.js" ＞＜ /script ＞
＜ /head ＞
＜ body ＞

 

＜ div id="Aggregator" ＞
＜ form name="feedForm" method="post" action="javascript:AjaxUpdater.Update('GET' ， 'bridge/rss.php?feed=' + document.feedForm.feed.value ， Aggregator.Read);" ＞
＜ div class="header" ＞
＜ input type="text" name="feed" id="feed" size="50" ＞
＜ input type="submit" name="submit" value="Add Feed" ＞

 

＜ /div ＞
＜ /form ＞
＜ div class="leftColumn" ＞
＜ div id="titles" ＞＜ /div ＞
＜ div id="loading" ＞＜ /div ＞
＜ /div ＞
＜ div class="rightColumn" ＞
＜ div id="description" ＞＜ /div ＞
＜ /div ＞

 

＜ /div ＞

 

＜ /body ＞
＜ /html ＞

 

　　这个文件负责导入处理我们的聚合器显示的 CSS 文件和所有的用于创建该聚合器和发出 AJAX 请求的 JavaScript 文件。

 

　　【提示】本文并没有讨论该 CSS 文件；我们只集中于讨论通过 JavaScript 实现的聚合和分析。

 

　　然后，由该索引定义 DIV 标记，这些标记将用于描述接收到的数据的布局。它还包含一个表单，其中有一个输入域用来输入 RSS 回馈的 URL ，还有一个提交按钮用于向它们发送请求。当点击该按钮时，将发送一个请求以接收 RSS 回馈并且把该响应发送到一个称为 Aggregator 的对象；我们将在讨论使用 AJAX 技术进行远程 RSS 回馈检索之后来介绍它。

 

　　四、 跨域 AJAX 请求

 

　　跨域 AJAX 请求是不可能的，但是的确存在一些方法以利用一种服务器端语言来解决这个问题。在这一节中，我要讨论如何使用 PHP 来创建 AJAX 请求和一个远程 RSS 回馈之间的一个桥接，进而实现成功地跨域请求之目的。我想你很可能会对它如此容易的实现感到惊讶。

 

　　 PHP 中提供了一个称为 file_get_contents 的本地方法，它能够把整个文件内容读取到一个字符串中。如果启动 fopen 包装器的话，这个文件可以是一个远程文件；在你安装 PHP 时默认情况下是启动的。如果在 php.ini 文件内把 allow_url_fopen 设置为 off 它才处于禁止状态。下列代码相应于该 bridge.php 文件的内容，当提交表单时我们使用 index.html 发送请求：

 

＜ ?
header("Content-Type: application/xml; charset=UTF-8");
echo file_get_contents($_GET['feed']);
? ＞

 

　　上面代码中的第一行是一个头（ header ），它负责把响应的内容类型设置为针对我们的请求对象的有效的 XML 。然后，调用 file_get_contents ，并结合回馈 URL- 这是通过我们的从 index.html 文件内的表单发出的请求进行传递的。一旦这些数据就绪， AJAX 引擎即把它们代理到回调方法 - 我们的 Aggregator 对象。

 

　　五、 Aggregator 对象

 

　　该 Aggregator 对象负责从 AJAX 引擎中接收响应。下列代码展示了该对象 ( 一个称为 feedCollection 的数组，它将用来存储所有的通过被检索的回馈创建的回馈对象 ) 的创建，还有一个称为 Read 的方法 ( 相应于从 index.html 表单中发出的请求的回调方法 ) 。当该回调发生时，通过一个定制 AJAX 对象方法（它使用一个描述显示加载消息的 DIV 元素的字符串作为参数）检查请求的 readyState 。

 

Aggregator = new Object();
Aggregator.feedCollection = new Array();
Aggregator.Read = function()
{
　 if(Ajax.checkReadyState('loading') == "OK")
　 {
　　 var title = Ajax.getResponse().getElementsByTagName('title')[0].firstChild.data;
　　 var _link = Ajax.getResponse().getElementsByTagName('link')[0].firstChild.data;
　　 var items = Ajax.getResponse().getElementsByTagName('item');

 

　　 var feed = new Feed(Aggregator.feedCollection.length ， title ， _link ， items);
　　 Aggregator.feedCollection.push(feed);
　　 Aggregator.displayFeedTitles(feed);
　 }
}

 

　　在该 Read 方法中，我们要做的第一件事情是分析 RSS 回馈中的标题，链接和项。一旦我们拥有这些值，我们就可以创建一个新的 Feed 对象（我们将在后面集中讨论）。这个对象使用了 feedCollection 的长度（作为一个 ID ），以及标题，链接和来自回馈的项。然后，该 Feed 对象被添加到 feedCollection 和一个称为 displayFeedTitles 的方法中以便在该 Feed 对象中显示相应于每一项的标题。

 

Aggregator.displayFeedTitles = function(feed)
{
　 document.getElementById('titles').innerHTML += feed.GetTitle();
　 Aggregator.DisplayTitles(feed.id);
}

 

　　这个方法以 Feed 对象作为一个参数，显示它的标题，然后调用另一个称为 DisplayTitles 的方法：

 

Aggregator.DisplayTitles = function(id)
{
　 var titleArray = Aggregator.feedCollection[id].GetAllTitles();
　 var titles = document.createElement("div");
　 titles.id = "subTitle_"+ id;
　 document.getElementById('title_'+id).appendChild(titles);
　 for(var i=0; i ＜ titleArray.length; i++)
　 {
　　 titles.innerHTML += titleArray[i] +" ＜ br / ＞ ";
　 }
}

 

　　这个方法接收一个回馈 ID 并使用它从 feedCollection 数组中检索回馈并且得到它的所有标题。一旦接收到这些标题，我们将为该回馈中的项标题创建一个新的 DIV 元素并且把它添加在相应于特定的回馈的标题之后。这将允许我们通过点击回馈标题来切换显示内容中项的标题。一旦添加该新的 DIV 元素，我们只需简单地遍历所有的标题并且把它们到添加该新的 DIV 即可。

 

　　上面两个方法中的第一个用于实现切换回馈中项的标题，第二个方法负责显示一个在 index.html 文件中使用我们的描述 DIV 元素中的回馈的内容。这些回馈的内容通过 Feed 对象的 GetDetails 方法进行收集（在下一节当我们创建 Feed 对象时再讨论）。

 

Aggregator.ToggleTitles = function(id)
{
　 var titles = document.getElementById('subTitle_'+id);
　 titles.style.display = (titles.style.display == '') ? 'none' : '';
}
Aggregator.DisplayFeed = function(feedId ， id)
{
　 var details = Aggregator.feedCollection[feedId].GetDetails(id);
　 document.getElementById('description').innerHTML = details;
}
　　六、 Feed 对象

 

　　这个 Feed 对象是一个 prototype 。通过它的构造器函数， Feed 对象接收当我们在 Aggregator 对象中创建它时传递的所有参数。这些参数分别相应于回馈的 ID ，标题，链接和项。在这个函数中，我们设置所有的缺省值，创建一些数组以备后用，并且把项发送到一个称为 parseItems 的方法。在这个 parseItems 方法中，我们将检索我们的回馈项中的所有的值并且填充我们在构造器中创建的那个数组。

 

Feed.prototype.parseItems = function(items)
{
　 for(var i=0; i ＜ items.length; i++)
　 {
　　 var linkTitle = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
　　 var title = " ＜ a href='#' class='title' οnclick='Aggregator.DisplayFeed("+ this.id +" ， "+ i +");' ＞ " + linkTitle +" ＜ /a ＞ ";
　　 this.titleArray.push(title);
　　 this.linkTitleArray.push(linkTitle);

 

　　 var _link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
　　 this.linkArray.push(_link);

 

　　 var description = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
　　 this.descriptionArray.push(description);

 

　　 var pubDate = items[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue;
　　 this.pubDateArray.push(pubDate);
　 }
}

 

　　一旦我们把所有的值存储在数组中，当我们准备好显示页面中的数据时我们就能够使用它们。这个对象中的第三个方法集中于显示回馈中的数据：

 

　　 · GetTitle 负责得到回馈标题（作为一个切换项标题的链接，通过调用 Aggregator 的 toggleTitles 方法来实现）。

 

　　 · GetAllTitles 简单地从回馈中返回所有的项标题。

 

　　 · GetDetails 负责实现显示该回馈所有的细节。这个方法基于作为一个参数传递的 ID 检索 Feed 对象的数组中的值。然后，这些值被格式化成一个 HTML 字符串并返回到调用者，然后由该调用者负责把它们添加到索引页面。

 

Feed.prototype.GetTitle = function()
{
　 return " ＜ div id='title_"+ this.id +"' ＞＜ br/ ＞＜ a href='#' οnclick='Aggregator.ToggleTitles("+ this.id +");' ＞ " + this.title + " ＜ /a ＞＜ /div ＞ ";
}

 

Feed.prototype.GetAllTitles = function()
{
　 return this.titleArray;
}

 

Feed.prototype.GetDetails = function(id)
{
　 details = " ＜ a href='"+ this.linkArray[id] +"' target='_blank' ＞ "+ this.linkTitleArray[id] +" ＜ /a ＞＜ br/ ＞ ";
　 details += this.descriptionArray[id] +" ＜ br/ ＞ ";
　 details += this.pubDateArray[id];
　 return details;
}

 

　　七、 小结

 

　　到现在为止，有关上面创建的 Aggregator 对象的下一步应该是添加一个 timeout 以便检查针对当前被添加到聚合器的 RSS 回馈的更新。另外，该回馈还能够被保存到一个数据库中并且被基于用户帐户加以检索。但是，因篇幅所限，这些功能只好留由读者您来实现了 ……

参考示例 : http://www.5h6.com/article/27984.html