利用PHP和AJAX创建RSS聚合器

　　想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本，收到一个基于该请求的定制XML文件，然后把它显示给用户而几乎不需要刷新浏览器！本文作者将同你一起探讨怎样在普通Web应用程序中联合PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。

　　尽管本文所使用的是PHP语言，但是请记住任何服务器端语言都会正常工作。为了理解本文，我假定你基本理解JavaScript和PHP或一类似服务器端语言。

　　本文示例使用AJAX来把一请求从一个RSS馈送发送到一定制的PHP对象。该PHP对象复制一份在本地服务器上的该馈送并返回这一路径。该请求对象收到这一路径，分析它，并且把数据以HTML形式显示给用户。这听起来涉及很多步骤，其实它仅由4个小文件组成。之所以使用了4个小文件，是为了平衡它们各自特定的力量而使整个系统的处理极富效率性。

　　我想，有些读者可能会问，为什么你要创建在本地服务器上的馈送的一个副本而不是简单分析最原始的馈送。原因是，这样以来可以允许绕过XML HTTP Request对象所强加的跨域限制。后面，我还会解释怎样创建这个定制的PHP对象；但是首先，让我们从表单创建开始。

　　创建发出请求的表单
　
　　你要做的第一事情是，在你的HTML的head标签之间包括你可能想使用的JavaScript和任何CSS文件。我包括了一个式样表来实现该聚合器的最后布局并用一个JavaScript文件来发出请求和进行馈送分析：

＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞

　　下一步，创建一个表单，它针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是一个字符串，它由馈送输入值和一个将在服务器端被校验的口令字组成；作为一个示例，我使用了下面形式：

"password=mypassword

　　该代码在每次页面加载之时发出一次请求；因此，如果页面被刷新，现有的在该输入域中的馈送串将在页面加载时被请求。下面是一个表单数据的示例，连同一些div标签用来显示已分析的馈送的特定结点：

＜body onload="javascript:makeRequest('request.php?request=' + document.feedForm.feed.value + '"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＞

　　我所创建的这三个div标签是logo，copy和details，其中每一个都在布局样式表中有一个与之相关联的样式。当我们分析馈送时将会用到它们，但是我们首先需要能够存取我们所请求的馈送。这可以使用我前面所提到的PHP对象来完成。

＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞

"password=mypassword

　　GET/POST与AJAX相结合

　　为了POST请求，我们首先需要创建该请求对象。如果你没有创建请求对象的经验，那么可以读一下我的文章《How To Use AJAX》或简单地研究一下本文的示例源代码。一旦创建该请求对象，就可以调用sendFeed方法并传递由表单所创建的URL：

function sendFeed(url){
　post.onreadystatechange = sendRequest;
　post.open("POST"， url， true);
　post.send(url);
}

　　一旦收到来自于PHP对象的响应并被正确加载，则对与该响应相应的本地文件发出另一个请求。在这种情况中，post.responseText提供给我们该新文件的路径：

function sendRequest(){
　if(checkReadyState(post)){
　　request = createRequestObject();
　　request.onreadystatechange = onResponse;
　　request.open("GET"， post.responseText， true);
　　request.send(null);
　}
}

　　分析响应

　　由于RSS馈送之间的区别，分析响应具有一定的挑战性。一些含有包含标题和描述结点的图像，而其它则没有。因此，当我们分析回馈时，我们需要做一点检查来译解它是否包括一图像。如果它包括一图像，我们就可以，与该馈送的标题和链接一起，在image div标签中显示该图像：

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;

　　我们不仅必须检查每个图像以显示它，当遍历馈送中所有的项时我们还需要对之进行检查。因为如果存在一个图像，那么所有另外的标题和链接结点索引都将无法正常工作。因此，当发现图像标签时，我们应该通过在每一次遍历中增加索引值（+1）来调整标题和链接结点的索引：

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方法来检查是否存在特定的标签：

function checkForTag(tag){
　if(tag != undefined) {
　　return true;
　}
　else{
　　return false;
　}
}

　　存在许多种进行馈送分析的可能性。例如，你可以把项赋到类别上并使得该类别可折迭，这样用户就可以对其想观看的内容进行选择。作为一个示例，我使用日期来对项进行分类-这可以通过译解是否针对一个特定项的pubDate不同于前一个项的pubDate并且相应地显示一新的日期来实现：

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方法，它用于当一用户从一个馈送中选择一特定的项时进行细节显示。这个方法有一个参数（项索引值），这个索引用于发现在该馈送中details结点的索引：

function showDetails(index){
　document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}

　　结论

　　使用AJAX发送查询字符串到一个服务器端脚本并检索一个基于该串的定制响应，这对于任何web开发者都有实现的可能。这样以来，你的下一个web应用程序也将会充满了新的可能性。

上一篇：PHP.MVC的模板标签系统之标签行为调度
下一篇：PHP开发中关于文件操作的疑难问答