RSS聚合器是一種特別適合于使用標(biāo)準(zhǔn)AJAX引擎進(jìn)行構(gòu)建的應(yīng)用程式，然而，要實(shí)現(xiàn)對RSS回饋的跨域的AJAX請求往往是非常難的。在本文中，我將向你展示怎么利用一個簡單的PHP函數(shù)來實(shí)現(xiàn)"橋接"AJAX引擎和RSS內(nèi)容。

　　一、 引言

　　目前，研發(fā)一個RSS聚合器已不再是困難的事情，不過研發(fā)一個高質(zhì)量的RSS聚合器卻仍然存在相當(dāng)?shù)碾y度。另一方面，創(chuàng)建一個制定聚合器一般不是非常難，并且在這種聚合器內(nèi)能夠提供一個你自己選擇的接口。RSS聚合代表了一類特別適合于一個AJAX應(yīng)用程式所消費(fèi)的數(shù)據(jù)，這是因?yàn)椋核荴ML格式的，并且AJAX能夠良好地顯示新的回饋而不必進(jìn)行頁面刷新。然而問題總是存在：在一個標(biāo)準(zhǔn)的AJAX引擎中實(shí)現(xiàn)跨域的AJAX請求是不可能的。在本文中，我將向你展示怎么利用一個非常簡單的PHP函數(shù)來橋接AJAX引擎和遠(yuǎn)程內(nèi)容（在本文中他指的是RSS回饋）。

　　【提示】 本文假定你已對PHP有一個基本理解并且有使用AJAX和分析XML的經(jīng)驗(yàn)。要全方面理解本文所提供的示例，你需要下載相應(yīng)的源碼文件。

　　二、 開始

　　在我們正式開始前，我想簡短地介紹一下我們將用于發(fā)出請求的AJAX引擎。該引擎能夠簡化AJAX調(diào)用并且有助于消除當(dāng)發(fā)出請求和調(diào)度響應(yīng)時存在的大量冗余。我不會周詳討論他的組成代碼，而僅向你簡短地介紹我們在本文中怎么使用他。

　　首先，我們需要導(dǎo)入構(gòu)成該引擎的所有JavaScript文件。包含在我們的index.html文件中的代碼看起來如下所示：

＜script type="text/javascript" src="http://www.knowsky.com/js/model/HTTP.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/js/model/Ajax.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/js/model/AjaxUpdater.js"＞＜/script＞

　　一旦我們導(dǎo)入該JavaScript文件，我們就能通過編寫類似下列的代碼來發(fā)出一個請求：

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

　　該AjaxUpdater是個對象，他負(fù)責(zé)處理我們的AJAX調(diào)用。我們簡單地調(diào)用他的Update方法并且傳遞請求的方法，我們請求的URL，及我們想把該響應(yīng)代理到的回調(diào)方法。

　　當(dāng)發(fā)出我們的請求時，這就是所有我們需要關(guān)心的。目前，讓我們集中于制定RSS聚合器的功能。

　　三、 入口點(diǎn)

　　指向該聚合器的入口是index.html文件，我們從瀏覽器中對他進(jìn)行調(diào)用。下面是描述該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="http://www.knowsky.com/js/model/HTTP.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/js/model/Ajax.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/js/model/AjaxUpdater.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/js/controller/Aggregator.js"＞＜/script＞
＜script type="text/javascript" src="http://www.knowsky.com/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＞

　　這個文件負(fù)責(zé)導(dǎo)入處理我們的聚合器顯示的CSS文件和所有的用于創(chuàng)建該聚合器和發(fā)出AJAX請求的JavaScript文件。

　　【提示】本文并沒有討論該CSS文件；我們只集中于討論通過JavaScript實(shí)現(xiàn)的聚合和分析。

　　然后，由該索引定義DIV標(biāo)記，這些標(biāo)記將用于描述接收到的數(shù)據(jù)的布局。他還包含一個表單，其中有一個輸入域用來輸入RSS回饋的URL，更有一個提交按鈕用于向他們發(fā)送請求。當(dāng)點(diǎn)擊該按鈕時，將發(fā)送一個請求以接收RSS回饋并且把該響應(yīng)發(fā)送到一個稱為Aggregator的對象；我們將在討論使用AJAX技術(shù)進(jìn)行遠(yuǎn)程RSS回饋檢索之后來介紹他。

　　四、 跨域AJAX請求

　　跨域AJAX請求是不可能的，不過的確存在一些方法以利用一種服務(wù)器端語言來解決這個問題。在這一節(jié)中，我要討論怎么使用PHP來創(chuàng)建AJAX請求和一個遠(yuǎn)程RSS回饋之間的一個橋接，進(jìn)而實(shí)現(xiàn)成功地跨域請求之目的。我想你非常可能會對他如此容易的實(shí)現(xiàn)感到驚訝。

　　PHP中提供了一個稱為file_get_contents的本地方法，他能夠把整個文件內(nèi)容讀取到一個字符串中。如果啟動fopen包裝器的話，這個文件能是個遠(yuǎn)程文件；在你安裝PHP時默認(rèn)情況下是啟動的。如果在php.ini文件內(nèi)把a(bǔ)llow_url_fopen設(shè)置為off他才處于禁止?fàn)顟B(tài)。下列代碼相應(yīng)于該bridge.php文件的內(nèi)容，當(dāng)提交表單時我們使用index.html發(fā)送請求：

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

　　上面代碼中的第一行是個頭（header），他負(fù)責(zé)把響應(yīng)的內(nèi)容類型設(shè)置為針對我們的請求對象的有效的XML。然后，調(diào)用file_get_contents，并結(jié)合回饋URL-這是通過我們的從index.html文件內(nèi)的表單發(fā)出的請求進(jìn)行傳遞的。一旦這些數(shù)據(jù)就緒，AJAX引擎即把他們代理到回調(diào)方法-我們的Aggregator對象。

　　五、 Aggregator對象

　　該Aggregator對象負(fù)責(zé)從AJAX引擎中接收響應(yīng)。下列代碼展示了該對象(一個稱為feedCollection的數(shù)組，他將用來存儲所有的通過被檢索的回饋創(chuàng)建的回饋對象)的創(chuàng)建，更有一個稱為Read的方法(相應(yīng)于從index.html表單中發(fā)出的請求的回調(diào)方法)。當(dāng)該回調(diào)發(fā)生時，通過一個制定AJAX對象方法（他使用一個描述顯示加載消息的DIV元素的字符串作為參數(shù)）檢查請求的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回饋中的標(biāo)題，鏈接和項(xiàng)。一旦我們擁有這些值，我們就能創(chuàng)建一個新的Feed對象（我們將在后面集中討論）。這個對象使用了feedCollection的長度（作為一個ID），及標(biāo)題，鏈接和來自回饋的項(xiàng)。然后，該Feed對象被添加到feedCollection和一個稱為displayFeedTitles的方法中以便在該Feed對象中顯示相應(yīng)于每一項(xiàng)的標(biāo)題。

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

　　這個方法以Feed對象作為一個參數(shù)，顯示他的標(biāo)題，然后調(diào)用另一個稱為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數(shù)組中檢索回饋并且得到他的所有標(biāo)題。一旦接收到這些標(biāo)題，我們將為該回饋中的項(xiàng)標(biāo)題創(chuàng)建一個新的DIV元素并且把他添加在相應(yīng)于特定的回饋的標(biāo)題之后。這將允許我們通過點(diǎn)擊回饋標(biāo)題來轉(zhuǎn)換顯示內(nèi)容中項(xiàng)的標(biāo)題。一旦添加該新的DIV元素，我們只需簡單地遍歷所有的標(biāo)題并且把他們到添加該新的DIV即可。

　　上面兩個方法中的第一個用于實(shí)現(xiàn)轉(zhuǎn)換回饋中項(xiàng)的標(biāo)題，第二個方法負(fù)責(zé)顯示一個在index.html文件中使用我們的描述DIV元素中的回饋的內(nèi)容。這些回饋的內(nèi)容通過Feed對象的GetDetails方法進(jìn)行收集（在下一節(jié)當(dāng)我們創(chuàng)建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。通過他的構(gòu)造器函數(shù)，F(xiàn)eed對象接收當(dāng)我們在Aggregator對象中創(chuàng)建他時傳遞的所有參數(shù)。這些參數(shù)分別相應(yīng)于回饋的ID，標(biāo)題，鏈接和項(xiàng)。在這個函數(shù)中，我們設(shè)置所有的缺省值，創(chuàng)建一些數(shù)組以備后用，并且把項(xiàng)發(fā)送到一個稱為parseItems的方法。在這個parseItems方法中，我們將檢索我們的回饋項(xiàng)中的所有的值并且填充我們在構(gòu)造器中創(chuàng)建的那個數(shù)組。

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);
　}
}

　　一旦我們把所有的值存儲在數(shù)組中，當(dāng)我們準(zhǔn)備好顯示頁面中的數(shù)據(jù)時我們就能夠使用他們。這個對象中的第三個方法集中于顯示回饋中的數(shù)據(jù)：

　　? GetTitle負(fù)責(zé)得到回饋標(biāo)題（作為一個轉(zhuǎn)換項(xiàng)標(biāo)題的鏈接，通過調(diào)用Aggregator的toggleTitles方法來實(shí)現(xiàn)）。

　　? GetAllTitles簡單地從回饋中返回所有的項(xiàng)標(biāo)題。

　　? GetDetails負(fù)責(zé)實(shí)現(xiàn)顯示該回饋所有的細(xì)節(jié)。這個方法基于作為一個參數(shù)傳遞的ID檢索Feed對象的數(shù)組中的值。然后，這些值被格式化成一個HTML字符串并返回到調(diào)用者，然后由該調(diào)用者負(fù)責(zé)把他們添加到索引頁面。

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;
}

　　七、 小結(jié)

　　到目前為止，有關(guān)上面創(chuàng)建的Aggregator對象的下一步應(yīng)該是添加一個timeout以便檢查針對當(dāng)前被添加到聚合器的RSS回饋的更新。另外，該回饋還能夠被保存到一個數(shù)據(jù)庫中并且被基于用戶帳戶加以檢索。不過，因篇幅所限，這些功能只好留由讀者你來實(shí)現(xiàn)了……