基于PHP和AJAX創(chuàng)建RSS聚合器
2024-05-04 22:53:40
供稿：網(wǎng)友
注冊(cè)會(huì)員，創(chuàng)建你的web開(kāi)發(fā)資料庫(kù)， 想象使用一個(gè)簡(jiǎn)單html文件來(lái)把一個(gè)請(qǐng)求發(fā)送到一個(gè)服務(wù)器端腳本，收到一個(gè)基于該請(qǐng)求的定制xml文件，然后把它顯示給用戶而幾乎不需要刷新瀏覽器！本文作者將同你一起探討怎樣在普通web應(yīng)用程序中聯(lián)合php和ajax技術(shù)來(lái)創(chuàng)建實(shí)時(shí)的數(shù)據(jù)傳輸而不需要進(jìn)行瀏覽器刷新。
盡管本文所使用的是php語(yǔ)言，但是請(qǐng)記住任何服務(wù)器端語(yǔ)言都會(huì)正常工作。為了理解本文，我假定你基本理解javascript和php或一類似服務(wù)器端語(yǔ)言。
本文示例使用ajax來(lái)把一請(qǐng)求從一個(gè)rss饋送發(fā)送到一定制的php對(duì)象。該php對(duì)象復(fù)制一份在本地服務(wù)器上的該饋送并返回這一路徑。該請(qǐng)求對(duì)象收到這一路徑，分析它，并且把數(shù)據(jù)以html形式顯示給用戶。這聽(tīng)起來(lái)涉及很多步驟，其實(shí)它僅由4個(gè)小文件組成。之所以使用了4個(gè)小文件，是為了平衡它們各自特定的力量而使整個(gè)系統(tǒng)的處理極富效率性。
有些讀者可能會(huì)問(wèn)，為什么你要?jiǎng)?chuàng)建在本地服務(wù)器上的饋送的一個(gè)副本而不是簡(jiǎn)單分析最原始的饋送。原因是，這樣以來(lái)可以允許繞過(guò)xml http request對(duì)象所強(qiáng)加的跨域限制。后面，我還會(huì)解釋怎樣創(chuàng)建這個(gè)定制的php對(duì)象；但是首先，讓我們從表單創(chuàng)建開(kāi)始。
創(chuàng)建發(fā)出請(qǐng)求的表單
你要做的第一事情是，在你的html的head標(biāo)簽之間包括你可能想使用的javascript和任何css文件。我包括了一個(gè)式樣表來(lái)實(shí)現(xiàn)該聚合器的最后布局并用一個(gè)javascript文件來(lái)發(fā)出請(qǐng)求和進(jìn)行饋送分析：
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
下一步，創(chuàng)建一個(gè)表單，它針對(duì)你所選擇的一個(gè)rss饋送發(fā)出請(qǐng)求。我創(chuàng)建的表單只包括一個(gè)輸入字段和一個(gè)提交該請(qǐng)求的按鈕。該請(qǐng)求的查詢是一個(gè)字符串，它由饋送輸入值和一個(gè)將在服務(wù)器端被校驗(yàn)的口令字組成；作為一個(gè)示例，我使用了下面形式：
"password=mypassword
該代碼在每次頁(yè)面加載之時(shí)發(fā)出一次請(qǐng)求；因此，如果頁(yè)面被刷新，現(xiàn)有的在該輸入域中的饋送串將在頁(yè)面加載時(shí)被請(qǐng)求。下面是一個(gè)表單數(shù)據(jù)的示例，連同一些div標(biāo)簽用來(lái)顯示已分析的饋送的特定結(jié)點(diǎn)：
＜body password=mypassword');"＞
＜form name="feedform" method="post" action="javascript:makerequest('request.php?request=' + document.feedform.feed.value + '"password=mypassword');"＞
enter a feed: ＜input type="text" name="feed" id="feed" size="20"＞
＜input type="submit" name="submit" value="add feed"＞
＜/form＞
＜div id="logo"＞＜/div＞
＜hr/＞
＜div id="copy"＞＜/div＞
＜div id="details"＞＜/div＞
＜/body＞
我所創(chuàng)建的這三個(gè)div標(biāo)簽是logo，copy和details，其中每一個(gè)都在布局樣式表中有一個(gè)與之相關(guān)聯(lián)的樣式。當(dāng)我們分析饋送時(shí)將會(huì)用到它們，但是我們首先需要能夠存取我們所請(qǐng)求的饋送。這可以使用我前面所提到的php對(duì)象來(lái)完成。
創(chuàng)建定制的php對(duì)象
我用php創(chuàng)建了一個(gè)小型rss類，它在本地服務(wù)器上創(chuàng)建一個(gè)請(qǐng)求饋送的副本，這樣它可以為我們稍后要?jiǎng)?chuàng)建的xml http request對(duì)象所存取。典型地，你不能跨域請(qǐng)求一個(gè)文件，這意味著你要請(qǐng)求的文件需要位于本地服務(wù)器上。這個(gè)類是一種解決跨域問(wèn)題的辦法，因?yàn)樗鼊?chuàng)建該饋送的一個(gè)副本，這個(gè)副本在本地服務(wù)器上被請(qǐng)求并且把本地路徑返回到該饋送，然后它由該request對(duì)象來(lái)存取。
這個(gè)類中唯一的方法是一個(gè)請(qǐng)求方法，它僅有一個(gè)指向所請(qǐng)求的rss 饋送的url的參數(shù)。然后，它通過(guò)rss的名字來(lái)檢查是否一目錄位于本地服務(wù)器上。如果不存在，就創(chuàng)建一個(gè)并把其權(quán)限模式設(shè)置為0666，這意味著該目錄可讀寫(xiě)。當(dāng)被設(shè)置為可讀的時(shí)，該目錄就可以在以后被存取；而當(dāng)被設(shè)置為可寫(xiě)的時(shí)，就可以把該饋送的一個(gè)副本寫(xiě)向本地服務(wù)器上的目錄：
//如果不存在目錄就創(chuàng)建一個(gè)
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir， 0666);
}
注意
在一臺(tái)windows機(jī)器上，對(duì)于php 4.2.0及以上版本中模式設(shè)置是不被要求的。但是，如果它存在的話，它將被忽略；因此，我保留了它，以備該工程被遷移到一臺(tái)unix或linux服務(wù)器上。
在把饋送復(fù)制到該服務(wù)器前，我們需要一個(gè)唯一的文件名。我對(duì)這個(gè)完整的url使用了md5加密方法以確保所有饋送的名字是唯一的。通過(guò)這個(gè)新的文件名，它可以連接一個(gè)描述指向該文件的目錄的字符串；這將在創(chuàng)建該饋送的副本時(shí)使用：
//創(chuàng)建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml";
通過(guò)使用被定義在上面的路徑和到原始的被請(qǐng)求的饋送的url的參考，現(xiàn)在我們能創(chuàng)建該文件的一個(gè)副本。最后，把該路徑返回到該新文件，作為對(duì)該請(qǐng)求的響應(yīng)：
//復(fù)制饋送到本地服務(wù)器
copy($rss_url，"$path");
return $path;
following is the small， yet powerful rss class in its entirety:
＜?php
class rss
{
function get($rss_url)
{
if($rss_url != "")
{
//如果不存在目錄就創(chuàng)建一個(gè)
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir， 0666);
}
// 創(chuàng)建一個(gè)唯一的名字
$file = md5($rss_url);
$path = "$dir/$file.xml";
//復(fù)制饋送到本地服務(wù)器
copy($rss_url， "$path");
return $path;
}
}
}
?＞
為了存取該php類中的方法，需要有一個(gè)請(qǐng)求文件來(lái)?yè)?dān)當(dāng)?shù)皆擃惖囊粋€(gè)接口，這也正是我們正在請(qǐng)求的文件。這個(gè)文件首先驗(yàn)證從該請(qǐng)求查詢的一口令變量，或者返回一條指定該請(qǐng)求者不是一名經(jīng)授權(quán)的用戶的消息，或者用指向rss饋送（該饋送在由請(qǐng)求方法處理后被復(fù)制到本地服務(wù)器）的路徑作出響應(yīng)。為了響應(yīng)該rss饋送，需要包含這個(gè)rss對(duì)象并把它實(shí)例化，并且需要通過(guò)使用被請(qǐng)求的饋送的url作為一參數(shù)來(lái)激活請(qǐng)求方法:
＜?
if($password == "mypassword")
{
require_once('classes/rss.class.php');
$rss = new rss();
echo $rss-＞get($request);
}
else
{
echo "you are an unauthorized user";
}
?＞
get/post與ajax相結(jié)合
為了post請(qǐng)求，我們首先需要?jiǎng)?chuàng)建該請(qǐng)求對(duì)象。如果你沒(méi)有創(chuàng)建請(qǐng)求對(duì)象的經(jīng)驗(yàn)，那么可以讀一下我的文章《how to use ajax》或簡(jiǎn)單地研究一下本文的示例源代碼。一旦創(chuàng)建該請(qǐng)求對(duì)象，就可以調(diào)用sendfeed方法并傳遞由表單所創(chuàng)建的url：
function sendfeed(url){
post.onreadystatechange = sendrequest;
post.open("post"， url， true);
post.send(url);
}
一旦收到來(lái)自于php對(duì)象的響應(yīng)并被正確加載，則對(duì)與該響應(yīng)相應(yīng)的本地文件發(fā)出另一個(gè)請(qǐng)求。在這種情況中，post.responsetext提供給我們?cè)撔挛募穆窂剑?br>
function sendrequest(){
if(checkreadystate(post)){
request = createrequestobject();
request.onreadystatechange = onresponse;
request.open("get"， post.responsetext， true);
request.send(null);
}
}
分析響應(yīng)
由于rss饋送之間的區(qū)別，分析響應(yīng)具有一定的挑戰(zhàn)性。一些含有包含標(biāo)題和描述結(jié)點(diǎn)的圖像，而其它則沒(méi)有。因此，當(dāng)我們分析回饋時(shí)，我們需要做一點(diǎn)檢查來(lái)譯解它是否包括一圖像。如果它包括一圖像，我們就可以，與該饋送的標(biāo)題和鏈接一起，在image div標(biāo)簽中顯示該圖像：
var _logo = "";
var _title = response.getelementsbytagname('title')[0].firstchild.data;
var _link = response.getelementsbytagname('link')[0].firstchild.data;;
_logo += "＜a href='" + _link + "' target='_blank'＞" + _title + "＜/a＞＜br/＞";
if(checkfortag(response.getelementsbytagname('image')[0]))
{
var _url = response.getelementsbytagname('url')[0].firstchild.data;
_logo += "＜img src='" + _url + "' border='0'＞＜br/＞"
}
document.getelementbyid('logo').innerhtml = _logo;
我們不僅必須檢查每個(gè)圖像以顯示它，當(dāng)遍歷饋送中所有的項(xiàng)時(shí)我們還需要對(duì)之進(jìn)行檢查。因?yàn)槿绻嬖谝粋€(gè)圖像，那么所有另外的標(biāo)題和鏈接結(jié)點(diǎn)索引都將無(wú)法正常工作。因此，當(dāng)發(fā)現(xiàn)圖像標(biāo)簽時(shí)，我們應(yīng)該通過(guò)在每一次遍歷中增加索引值（+1）來(lái)調(diào)整標(biāo)題和鏈接結(jié)點(diǎn)的索引：
if(checkfortag(response.getelementsbytagname('image')[0]) "" i＞0){
var _title=response.getelementsbytagname('title')[i+1].firstchild.data;
var _link=response.getelementsbytagname('link')[i+1].firstchild.data;
}
else{
var _title =response.getelementsbytagname('title')[i].firstchild.data;
var _link = response.getelementsbytagname('link')[i].firstchild.data;
}
你可以使用checkfortag方法來(lái)檢查是否存在特定的標(biāo)簽：
function checkfortag(tag){
if(tag != undefined) {
return true;
}
else{
return false;
}
}
存在許多種進(jìn)行饋送分析的可能性。例如，你可以把項(xiàng)賦到類別上并使得該類別可折迭，這樣用戶就可以對(duì)其想觀看的內(nèi)容進(jìn)行選擇。作為一個(gè)示例，我使用日期來(lái)對(duì)項(xiàng)進(jìn)行分類-這可以通過(guò)譯解是否針對(duì)一個(gè)特定項(xiàng)的pubdate不同于前一個(gè)項(xiàng)的pubdate并且相應(yīng)地顯示一新的日期來(lái)實(shí)現(xiàn)：
if(i＞1){
var previouspubdate = response.getelementsbytagname('pubdate')[i-1].firstchild.data;
}
if(pubdate != previouspubdate || previouspubdate == undefined){
_copy += "＜div id='detail'＞" + pubdate + "＜/div＞＜hr align='left' width='90%'/＞";
}
_copy += "＜a href=/"javascript:showdetails('" + i + "');/"＞" + _title + "＜/a＞＜br/＞＜br/＞";
document.getelementbyid('copy').innerhtml += _copy;
注意，上面的最后一部分是showdetails方法，它用于當(dāng)一用戶從一個(gè)饋送中選擇一特定的項(xiàng)時(shí)進(jìn)行細(xì)節(jié)顯示。這個(gè)方法有一個(gè)參數(shù)（項(xiàng)索引值），這個(gè)索引用于發(fā)現(xiàn)在該饋送中details結(jié)點(diǎn)的索引：
function showdetails(index){
document.getelementbyid('details').innerhtml = response.getelementsbytagname('description')[index].firstchild.data;
}
結(jié)論
使用ajax發(fā)送查詢字符串到一個(gè)服務(wù)器端腳本并檢索一個(gè)基于該串的定制響應(yīng)，這對(duì)于任何者都有實(shí)現(xiàn)的可能。這樣以來(lái)，你的下一個(gè)web應(yīng)用程序也將會(huì)充滿了新的可能性。
