|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
会有很多高手的鼓励,新手的支持,慢慢你劲头就十足,有更多的信心和兴趣去学。ajax|rss|初级|函数 RSS聚合器是一种出格合适于利用尺度AJAX引擎停止构建的使用法式,但是,要完成对RSS回馈的跨域的AJAX恳求常常是很难的。在本文中,我将向你展现若何使用一个复杂的PHP函数来完成"桥接"AJAX引擎和RSS内容。
1、 引言
如今,开辟一个RSS聚合器已不再是坚苦的工作,然而开辟一个高质量的RSS聚合器却依然存在相当的难度。另外一方面,创立一个定制聚合器普通不是很难,而且在这类聚合器内可以供应一个你本人选择的接口。RSS聚合代表了一类出格合适于一个AJAX使用法式所花费的数据,这是由于:它是XML格局的,而且AJAX可以优秀地显示新的回馈而不用停止页面刷新。但是成绩老是存在:在一个尺度的AJAX引擎中完成跨域的AJAX恳求是不成能的。在本文中,我将向你展现若何使用一个很复杂的PHP函数来桥接AJAX引擎和近程内容(在本文中它指的是RSS回馈)。
【提醒】 本文假定你已对PHP有一个根基了解而且有利用AJAX和剖析XML的经历。要周全了解本文所供应的示例,你需求下载响应的源码文件。
2、 入手下手
在咱们正式入手下手前,我想冗长地引见一下咱们将用于收回恳求的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聚合器的功效。
3、 进口点
指向该聚合器的进口是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回馈检索以后来引见它。
4、 跨域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对象。
5、 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 +"<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;
6、 Feed对象
这个Feed对象是一个prototype。经由过程它的机关器函数,Feed对象吸收当咱们在Aggregator对象中创立它时传递的一切参数。这些参数分离响应于回馈的ID,题目,链接和项。在这个函数中,咱们设置一切的缺省值,创立一些数组以备后用,而且把项发送到一个称为parseItems的办法。在这个parseItems办法中,咱们将检索咱们的回馈项中的一切的值而且填充咱们在机关器中创立的谁人数组。
Feed.prototype.parseItems = function(items)
{
for(var i=0; i<items.length; i++)
{
var linkTitle = items.getElementsByTagName("title")[0].firstChild.nodeValue;
var title = "<a href='#' class='title' >" + linkTitle +"</a>";
this.titleArray.push(title);
this.linkTitleArray.push(linkTitle);
var _link = items.getElementsByTagName("link")[0].firstChild.nodeValue;
this.linkArray.push(_link);
var description = items.getElementsByTagName("description")[0].firstChild.nodeValue;
this.descriptionArray.push(description);
var pubDate = items.getElementsByTagName("pubDate")[0].firstChild.nodeValue;
this.pubDateArray.push(pubDate);
}
}
一旦咱们把一切的值存储在数组中,当咱们筹办好显示页面中的数据时咱们就可以够利用它们。这个对象中的第三个办法集中于显示回馈中的数据:
・ GetTitle担任失掉回馈题目(作为一个切换项题目的链接,经由过程挪用Aggregator的toggleTitles办法来完成)。
・ GetAllTitles复杂地从回馈中前往一切的项题目。
・ GetDetails担任完成显示该回馈一切的细节。这个办法基于作为一个参数传递的ID检索Feed对象的数组中的值。然后,这些值被格局化成一个HTML字符串并前往到挪用者,然后由该挪用者担任把它们添加到索引页面。
Feed.prototype.GetTitle = function()
{
return "<div id='title_"+ this.id +"'><br/><a href='#' >" + this.title + "</a></div>";
}
Feed.prototype.GetAllTitles = function()
{
return this.titleArray;
}
Feed.prototype.GetDetails = function(id)
{
details = "<a href='"+ this.linkArray[id] +"' target='_blank'>"+ this.linkTitleArray[id] +"</a><br/>";
details += this.descriptionArray[id] +"<br/>";
details += this.pubDateArray[id];
return details;
}
7、 小结
到如今为止,有打开面创立的Aggregator对象的下一步应当是添加一个timeout以便反省针对以后被添加到聚合器的RSS回馈的更新。别的,该回馈还可以被保留到一个数据库中而且被基于用户帐户加以检索。然而,因篇幅所限,这些功效只好留由读者您来完成了……
通过这段时间的学习实践,对软件开发有了更多新的认识,不在局限于之前的片面性。当然,现在所学到的东西其实并不多,离当一个真正的程序员,还有很大的差距。 |
|