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