科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道应用软件PHP和AJAX打造高级RSS聚合器

PHP和AJAX打造高级RSS聚合器

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

RSS聚合器是一种特别适合于使用标准AJAX引擎进行构建的应用程序,然而,要实现对RSS回馈的跨域的AJAX请求往往是很难的

作者:朱先忠编译 来源:天极开发 2007年10月21日

关键字:

  • 评论
  • 分享微博
  • 分享邮件
 四、 跨域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);
}

  这个方法以Feed对象作为一个参数,显示它的标题,然后调用另一个称为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 />";
 }
}

  这个方法接收一个回馈ID并使用它从feedCollection数组中检索回馈并且得到它的所有标题。一旦接收到这些标题,我们将为该回馈中的项标题创建一个新的DIV元素并且把它添加在相应于特定的回馈的标题之后。这将允许我们通过点击回馈标题来切换显示内容中项的标题。一旦添加该新的DIV元素,我们只需简单地遍历所有的标题并且把它们到添加该新的DIV即可。

  上面两个方法中的第一个用于实现切换回馈中项的标题,第二个方法负责显示一个在index.html文件中使用我们的描述DIV元素中的回馈的内容。这些回馈的内容通过Feed对象的GetDetails方法进行收集(在下一节当我们创建Feed对象时再讨论)。

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;
}
    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章