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

　　一、 引言

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

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

　　二、 開(kāi)始

　　在我們正式開(kāi)始前，我想簡(jiǎn)短地介紹一下我們將用于發(fā)出請(qǐng)求的AJAX引擎。該引擎能夠簡(jiǎn)化AJAX調(diào)用并且有助于消除當(dāng)發(fā)出請(qǐng)求和調(diào)度響應(yīng)時(shí)存在的大量冗余。我不會(huì)周詳討論他的組成代碼，而僅向你簡(jiǎn)短地介紹我們?cè)诒疚闹性趺词褂盟?/P>

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

＜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文件，我們就能通過(guò)編寫(xiě)類似下列的代碼來(lái)發(fā)出一個(gè)請(qǐng)求：

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

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

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

　　三、 入口點(diǎn)

　　指向該聚合器的入口是index.html文件，我們從瀏覽器中對(duì)他進(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＞

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

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

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

　　四、 跨域AJAX請(qǐng)求

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

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

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

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

　　五、 Aggregator對(duì)象

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

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

　　這個(gè)方法以Feed對(duì)象作為一個(gè)參數(shù)，顯示他的標(biāo)題，然后調(diào)用另一個(gè)稱為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 /＞";
　}
}

　　這個(gè)方法接收一個(gè)回饋ID并使用他從feedCollection數(shù)組中檢索回饋并且得到他的所有標(biāo)題。一旦接收到這些標(biāo)題，我們將為該回饋中的項(xiàng)標(biāo)題創(chuàng)建一個(gè)新的DIV元素并且把他添加在相應(yīng)于特定的回饋的標(biāo)題之后。這將允許我們通過(guò)點(diǎn)擊回饋標(biāo)題來(lái)轉(zhuǎn)換顯示內(nèi)容中項(xiàng)的標(biāo)題。一旦添加該新的DIV元素，我們只需簡(jiǎn)單地遍歷所有的標(biāo)題并且把他們到添加該新的DIV即可。

　　上面兩個(gè)方法中的第一個(gè)用于實(shí)現(xiàn)轉(zhuǎn)換回饋中項(xiàng)的標(biāo)題，第二個(gè)方法負(fù)責(zé)顯示一個(gè)在index.html文件中使用我們的描述DIV元素中的回饋的內(nèi)容。這些回饋的內(nèi)容通過(guò)Feed對(duì)象的GetDetails方法進(jìn)行收集（在下一節(jié)當(dāng)我們創(chuàng)建Feed對(duì)象時(shí)再討論）。

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對(duì)象

　　這個(gè)Feed對(duì)象是個(gè)prototype。通過(guò)他的構(gòu)造器函數(shù)，F(xiàn)eed對(duì)象接收當(dāng)我們?cè)贏ggregator對(duì)象中創(chuàng)建他時(shí)傳遞的所有參數(shù)。這些參數(shù)分別相應(yīng)于回饋的ID，標(biāo)題，鏈接和項(xiàng)。在這個(gè)函數(shù)中，我們?cè)O(shè)置所有的缺省值，創(chuàng)建一些數(shù)組以備后用，并且把項(xiàng)發(fā)送到一個(gè)稱為parseItems的方法。在這個(gè)parseItems方法中，我們將檢索我們的回饋?lái)?xiàng)中的所有的值并且填充我們?cè)跇?gòu)造器中創(chuàng)建的那個(gè)數(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);
　}
}

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

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

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

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

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對(duì)象的下一步應(yīng)該是添加一個(gè)timeout以便檢查針對(duì)當(dāng)前被添加到聚合器的RSS回饋的更新。另外，該回饋還能夠被保存到一個(gè)數(shù)據(jù)庫(kù)中并且被基于用戶帳戶加以檢索。不過(guò)，因篇幅所限，這些功能只好留由讀者你來(lái)實(shí)現(xiàn)了……