在Craig最近有关Ajax数据格式的系列文章中,我们了解了JSON,JSON是一种用于处理Ajax页面中数据的干净高效的格式。 但是,如果您要处理博客,新闻来源或常见的内容管理系统,则RSS仍然是事实上的标准,并且JSON可能不可用。 您可以破解您的源以使用JSON吐出所需的数据,也可以编写一段中间件为您转换RSS,但这有时是不可能的或不切实际的。
如果是这样,为什么不查看Google的Feed API? 这是一种获取RSS feed并将其立即用作JSON对象的快速简便的方法:您无需费力,费解或奇怪的解析工作! 您正在检索Google的RSS缓存副本,因此它快速可靠。 这样一来,它对启动Feed的网站的影响也将减少。 为了向您展示它的简单性,我们将使用SitePoint的RSS feed中的最新新闻来构建一个快速的JavaScript标题小部件。
首先,您需要获取Google API密钥。 它是可选的,但又方便快捷,Google强烈建议您这样做。
要开始在我们的页面中使用Feed API,我们需要在文档的head
添加Google加载程序。 将该API密钥添加为脚本的src
URL上的变量:
<script type="text/javascript" src="https://www.google.com/jsapi?key=YOURKEY"></script>
接下来,在我们自己的脚本中,我们将像这样加载Google Feed API:
google.load("feeds", "1");
此行指定了我们想要的模块( feeds
)和版本,在此阶段仍为版本1。这个google.load
东西看起来很熟悉吗? 如果您以前曾经看过,则可能是因为您花了一些时间在应用程序中使用Google Maps,或者您可能想使用Google托管的JavaScript库或Web字体。 有很多不同的模块可用,因此,如果您使用多个模块,则可以继续将它们一起加载,如下所示:
google.load("feeds", "1");
google.load("jquery", "1.5.1");
google.load("maps", "2");
接下来,我们需要指定一个函数,以在文档完全加载后执行—我们使用google.setOnLoadCallback
进行此操作。 出于一些不寻常的事情,我将使用一个名为showFeed
的函数来显示供稿:
google.setOnLoadCallback(showFeed);
showFeed
将是执行所有操作的地方,我们可以在这里研究Google Feed API可以为我们提供的一些选项。 我们的第一步是建立一个名为feed
的新对象。 它只需要一个参数,即URL:
function showFeed() {
var feed = new google.feeds.Feed("http://www.sitepoint.com/feed/");
}
默认情况下,API将仅从Feed中提供四个项目。 使用setNumEntries
方法,我们将要求更多—假设是十个:
function showFeed() {
var feed = new google.feeds.Feed("http://www.sitepoint.com/feed/");
feed.setNumEntries(10);
}
有一个setResultFormat
方法可以让我们指定一种格式:XML,JSON或两者的组合结果。 由于该API默认提供JSON,因此无需实际指定它。 但是,如果您好奇,它将看起来像这样:
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
如果您想查找较旧的RSS条目,Google可以在Feed中返回其先前项目的存储副本。 真是个绝招! SitePoint的供稿包含足以供我们使用的条目,因此我们可以在脚本中跳过它,但是您可以像这样使用它:
feed.includeHistoricalEntries();
我们已经设置了获取提要所需的所有内容-现在让我们继续进行加载。 我们希望每个RSS条目以列表项的形式显示在ID为headlines
的列表中,以显示每个项目的标题,链接和作者。 该API可以提供所有这些以及更多内容-内容,类别,发布日期和媒体。 值得一提的是,能够为我们自动创建每个条目内容的摘要,这很不错。 我们也把它扔在那里!
.load
方法要求提要并提供结果。 结果,我们将收到一个不错的胖JSON对象,如果失败,将收到错误代码和消息。 回调对该结果起作用:如果成功,我们将遍历JSON对象中的每个项目,并为每个项目插入一个列表项目。 否则,我们将礼貌地失败,并带有指向SitePoint的链接:
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var li = document.createElement("li");
li.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a>' + <cite>by ' + entry.author + '</cite></h3>';
li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(li);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li><a href="http://www.sitepoint.com">Get your geek news fix at SitePoint</a></li>';
}
});
而已! 您可以在我们的演示中看到此脚本的完整示例。 总共花了几分钟才完成-比在这篇文章中解释它所花费的时间要短得多!
我们仅看到了Feed API可以提供的功能的一部分,但Feed API文档中还有很多内容可以找到。 这是轻松的提要解析!
如果您想从Raena了解更多信息,请订阅我们的每周技术新闻通讯Tech Times 。
From: https://www.sitepoint.com/no-stress-rss-with-the-google-feed-api/