蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网络编程 >> PHP >> 正文

PHP和AJAX打造高级RSS聚合器

作者:佚名    文章来源:网络转载    更新时间:2007-11-26 23:45:11
RSS聚合器是一种特别适合于使用标准AJAX引擎进行构建的应用程序,然而,要实现对RSS回馈的跨域的AJAX请求往往是很难的。在本文中,我将向你展示如何利用一个简单的PHP函数来实现"桥接"AJAX引擎和RSS内容。

  一、 引言

  现在,开发一个RSS聚合器已经不再是困难的事情,但是开发一个高质量的RSS聚合器却仍然存在相当的难度。另一方面,创建一个定制聚合器一般不是很难,并且在这种聚合器内能够提供一个你自己选择的接口。RSS聚合代表了一类特别适合于一个AJAX应用程序所消费的数据,这是因为:它是XML格式的,并且AJAX能够良好地
显示新的回馈而不必进行页面刷新。然而问题总是存在:在一个标准的AJAX引擎中实现跨域的AJAX请求是不可能的。在本文中,我将向你展示如何利用一个很简单的PHP函数来桥接AJAX引擎和远程内容(在本文中它指的是RSS回馈)。

  【提示】 本文假定你已经对PHP有一个基本理解并且有使用AJAX和分析XML的经验。要全面理解本文所提供的示例,你需要
下载相应的源码文件。

  二、 开始

  在我们正式开始前,我想简短地介绍一下我们将用于发出请求的AJAX引擎。该引擎能够简化AJAX调用并且有助于消除当发出请求和调度响应时存在的大量冗余。我不会详细讨论它的组成代码,而仅向你简短地介绍我们在本文中如何使用它。

  首先,我们需要导入构成该引擎的所有javascript文件。包含在我们的index.html文件中的代码看起来如下所示:

<script type="text/javascript" src="js/model/HTTP.js"></script>
<script type="text/javascript" src="js/model/Ajax.js"></script>
<script type="text/javascript" src="js/model/AjaxUpdater.js"></script>

  一旦我们导入该javascript文件,我们就可以通过编写类似下列的代码来发出一个请求:

AjaxUpdater.Update('GET', 'url',callbackMethod);">

  该AjaxUpdater是一个对象,它负责处理我们的AJAX调用。我们简单地调用它的Update方法并且传递请求的方法,我们请求的URL,以及我们想把该响应代理到的回调方法。

  当发出我们的请求时,这就是所有我们需要关心的。现在,让我们集中于定制RSS聚合器的功能。

  三、 入口点

  指向该聚合器的入口是index.html文件,我们从浏览器中对它进行调用。下面是描述该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="js/model/HTTP.js"></script>
<script type="text/javascript" src="js/model/Ajax.js"></script>
<script type="text/javascript" src="js/model/AjaxUpdater.js"></script>
<script type="text/javascript" src="js/controller/Aggregator.js"></script>
<script type="text/javascript" src="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>


  这个文件负责导入处理我们的聚合器显示的CSS文件和所有的用于创建该聚合器和发出AJAX请求的javascript文件。

  【提示】本文并没有讨论该CSS文件;我们只集中于讨论通过javascript实现的聚合和分析。

  然后,由该索引定义DIV标记,这些标记将用于描述接收到的数据的布局。它还包含一个表单,其中有一个输入域用来输入RSS回馈的URL,还有一个提交按钮用于向它们发送请求。当点击该按钮时,将发送一个请求以接收RSS回馈并且把该响应发送到一个称为Aggregator的对象;我们将在讨论使用AJAX技术进行远程RSS回馈检索之后来介绍它。

  四、 跨域AJAX请求

  跨域AJAX请求是不可能的,但是的确存在一些方法以利用一种
服务器端语言来解决这个问题。在这一节中,我要讨论如何使用PHP来创建AJAX请求和一个远程RSS回馈之间的一个桥接,进而实现成功地跨域请求之目的。我想你很可能会对它如此容易的实现感到惊讶。

  PHP中提供了一个称为file_get_contents的本地方法,它能够把整个文件内容读取到一个字符串中。如果启动fopen包装器的话,这个文件可以是一个远程文件;在你安装PHP时默认情况下是启动的。如果在php.ini文件内把allow_url_fopen设置为off它才处于禁止状态。下列代码相应于该bridge.php文件的内容,当提交表单时我们使用index.html发送请求:

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

  上面代码中的第一行是一个头(header),它负责把响应的内容类型设置为针对我们的请求对象的有效的XML。然后,调用file_get_contents,并结合回馈URL-这是通过我们的从index.html文件内的表单发出的请求进行传递的。一旦这些数据就绪,AJAX引擎即把它们代理到回调方法-我们的Aggregator对象。

  五、 Aggregator对象

  该Aggregator对象负责从AJAX引擎中接收响应。下列代码展示了该对象(一个称为feedCollection的数组,它将用来存储所有的通过被检索的回馈创建的回馈对象)的创建,还有一个称为Read的方法(相应于从index.html表单中发出的请求的回调方法)。当该回调发生时,通过一个定制AJAX对象方法(它使用一个描述显示加载消息的DIV元素的字符串作为参数)检查请求的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回馈中的标题,链接和项。一旦我们拥有这些值,我们就可以创建一个新的Feed对象(我们将在后面集中讨论)。这个对象使用了feedCollection的长度(作为一个ID),以及标题,链接和来自回馈的项。然后,该Feed对象被添加到feedCollection和一个称为displayFeedTitles的方法中以便在该Feed对象中显示相应于每一项的标题。

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

[1] [2] 下一页


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★