基于php和ajax创建rss聚合器_ajax教程
想象使用一个简单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" type="text/css" />
<script src="http://www.knowsky.com/js/request.js"></script>
下一步,创建一个表单,他针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是个字符串,他由馈送输入值和一个将在服务器端被校验的口令字组成;作为一个示例,我使用了下面形式:
"password=mypassword
该代码在每次页面加载之时发出一次请求;因此,如果页面被刷新,现有的在该输入域中的馈送串将在页面加载时被请求。下面是个表单数据的示例,连同一些div标签用来显示已分析的馈送的特定结点:
<body password=mypassword);">
<form method="post" action="javascript:makeRequest(request.php?request= + document.feedForm.feed.value + "password=mypassword);">
Enter a feed: <input type="text" size="20">
<input type="submit" value="Add Feed">
</form>
<div></div>
<hr/>
<div></div>
<div></div>
</body>
我所创建的这三个div标签是logo,copy和details,其中每一个都在布局样式表中有一个和之相关联的样式。当我们分析馈送时将会用到他们,不过我们首先需要能够存取我们所请求的馈送。这能使用我前面所提到的PHP对象来完成。
创建制定的PHP对象
我用PHP创建了一个小型RSS类,他在本地服务器上创建一个请求馈送的副本,这样他能为我们稍后要创建的XML HTTP Request对象所存取。典型地,你不能跨域请求一个文件,这意味着你要请求的文件需要位于本地服务器上。这个类是一种解决跨域问题的办法,因为他创建该馈送的一个副本,这个副本在本地服务器上被请求并且把本地路径返回到该馈送,然后他由该Request对象来存取。
这个类中唯一的方法是个请求方法,他仅有一个指向所请求的RSS 馈送的URL的参数。然后,他通过rss的名字来检查是否一目录位于本地服务器上。如果不存在,就创建一个并把其权限模式设置为0666,这意味着该目录可读写。当被设置为可读的时,该目录就能在以后被存取;而当被设置为可写的时,就能把该馈送的一个副本写向本地服务器上的目录:
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
注意
在一台视窗系统机器上,对于PHP 4.2.0及以上版本中模式设置是不被需求的。不过,如果他存在的话,他将被忽略;因此,我保留了他,以备该工程被迁移到一台UNIX或Linux服务器上。
在把馈送复制到该服务器前,我们需要一个唯一的文件名。我对这个完整的URL使用了md5加密方法以确保所有馈送的名字是唯一的。通过这个新的文件名,他能连接一个描述指向该文件的目录的字符串;这将在创建该馈送的副本时使用:
//创建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml";
通过使用被定义在上面的路径和到原始的被请求的馈送的URL的参考,目前我们能创建该文件的一个副本。最后,把该路径返回到该新文件,作为对该请求的响应:
//复制馈送到本地服务器
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 != "")
{
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
// 创建一个唯一的名字
$file = md5($rss_url);
$path = "$dir/$file.xml";
//复制馈送到本地服务器
copy($rss_url, "$path");
return $path;
}
}
}
?>
为了存取该PHP类中的方法,需要有一个请求文件来担当到该类的一个接口,这也正是我们正在请求的文件。这个文件首先验证从该请求查询的一口令变量,或返回一条指定该请求者不是一名经授权的用户的消息,或用指向RSS馈送(该馈送在由请求方法处理后被复制到本地服务器)的路径作出响应。为了响应该RSS馈送,需要包含这个RSS对象并把他实例化,并且需要通过使用被请求的馈送的URL作为一参数来激活请求方法:
<?
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相结合
为了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="http://www.knowsky.com/ + _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应用程式也将会充满了新的可能性。