PHP和AJAX打造高級RSS聚合器

2024-05-04 21:47:26

字體：大中小

來源：轉載

供稿：網友

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>