PHP和AJAX打造高级RSS聚合器_H5之家 - 中国HTML5教程资源分享第一站

　　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' onclick='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='#' onclick='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回馈的更新。另外，该回馈还能够被保存到一个数据库中并且被基于用户帐户加以检索。但是，因篇幅所限，这些功能只好留由读者您来实现了……