我的书签
添加书签
移除书签12.2 给站点添加一个Flickr Feed
Flickr是一个流行的照片分享站点。它已经运营多年，拥有上百万的照片。很多Web站点喜欢包含从站点所有者或Flickr群组中获取的照片（群组是多人围绕着一个共同主题，例如Web设计、风光摄影等，提交照片的一个集合）。
Flickr允许我们以几种方式来获取照片和相关的信息。最为强大但也最为复杂的方法，是使用Flickr的API来搜索照片。这种方法要求我们在Flickr注册，并且获取一个特殊的API键（这是数字和字母的一个字符串，用来识别你的身份）。还需要一些奇妙的编程才能工作。最简单的方式是使用Flickr Feed服务。Feed是让人们了解站点信息的最新更新的一种方式。例如，你可以使用RSS feed来查看站点，从而能够看到来自该站点的最新的新闻和信息。Flickr针对其照片提供了一种类似的服务，你可以获得关于一个特定的个人或群组的20幅最新照片的列表。
在本节中，我们将使用feed方法从Flickr获取照片的一个集合，并且在Web页面上显示它，并且，在此过程中，我们将学习如何使用jQuery的$.getJSON（）函数从另一个Web站点获取JSONP数据。
注意：如果你想要对选取和显示Flickr照片进行更多的控制，有大量的jQuery插件可以帮助你做到这点。jQuery Flickr Photo Gallery（http：//johnpatrickgiven.com/jquery/flickr-gallery/）就非常好。
12.2.1 构建URL
Flickr提供了几个不同的URL以访问不同类型的照片的feed（参见www.flickr.com/services/feeds/获取其完整列表）。例如，我们使用http：//api.flickr.com/services/feeds/photos_public.gne访问来自特定Flickr账户的照片（例如，你所拥有的账户，如果你有账户的话），并且使用http：//api.flickr.com/services/feeds/groups_pool.gne来访问来自特定的群组的照片（例如，Web Design群组，它提供照片和图像以激发更好的Web设计）。
一旦你知道自己喜欢哪种类型的照片feed，以及与其相对应的基本URL，你需要添加一些额外的信息以获取自己感兴趣的照片。为了做到这点，我们可以添加一个查询字符串，其中有带标记的几个信息片段（正如我们在11.3.4节所了解到的，一个查询字符串是一个URL的末尾带有一个?，随后跟着一个或多个名/值对，例如，http：//api.flickr.com/services/feeds/groups_pool.gne?id=25053835@N03＆＆format=json）。
·添加一个或更多ID。要从一个特定群组或一个或多个单个账户选取照片，我们添加id，加上一个=号，后面跟着一个个人账户号或群组账户号。例如，要访问来自Web Design群组的一组照片feed，可以使用这个群组的照片feed，并且添加该群组的ID，如下所示：
http://api. fickr.com/services/feeds/←
groups_pool. gne?id=37996591093@N01
对于个人的Flickr feed，我们使用公共照片feed并且使用一个或多个ID。例如，要访问来自Smithsonian（它拥有自己的Flickr账户）和国会图书馆的照片，我们可以使用id名称和公共照片feed，如下所示：
http://api. fickr.com/services/feeds/←
photos_public. gne?ids=8623220@N02，25053835@N03
要使用多个ID，可以用逗号将每个ID隔开。注意，只可以使用多个ID来访问个人账户，不能使用群组feed并访问多个群组的照片。
提示：如果你知道某人的Flickr用户名，你可以使用这个站点来获取其Flickr ID：http：//idgettr.com/。
·添加JSON格式。Flickr照片feed服务非常灵活，并且，可以以多种不同的格式返回照片信息，从RSS到Atom、CSV和JSON。要让Flickr知道你想要的是JSON格式，我们需要给查询字符串添加＆format=json。例如，要以JSON格式获取Smithsonian Museum的Flickr照片的feed，我们使用这个URL：
http://api. flickr.com/services/feeds/←
photos_public. gne?ids=25053835@N03＆format=json
继续进行并将上面的URL输入到一个Web浏览器中（如果你不想输入，可以直接从教程文件的chapter12文件夹下的flickr_json.txt文件进行复制和粘贴）。你将会看到很多的数据，实际上，是一个对象直接量，它包含了很多的信息。这就是我们使用$.getJSON（）函数（参见本书11.4节）的时候从Flickr所获取的信息。你需要使用JavaScript来解析该对象，然后，使用它来构建图像的一个整齐的小集合（Flickr的JSON feed的结构将在12.2.3节介绍，记住这个feed，以便可以在12.3节的教程中使用它）。
·添加对URL的一个JSONP回调。最后，为了让你的站点上的页面完全成功地从另一个Web站点请求JSON数据，你需要给这个URL添加最后一点内容：＆jsoncallback=?。记住，基于安全性方面的原因，我们不能向一个不同的域发送一个XMLHTTP请求。要解决这个问题，＆jsoncallback=?片段通知Flickr，我们想要接收JSONP数据，并且允许jQuery的$.getJSON（）函数将这个请求当做Web浏览器直接请求一个外部JavaScript文件来对待。换句话说，要获取Smithsonian Museum的最新的Flickr照片的一个feed，我们需要将如下的一个URL传递给$.getJSON（）函数：
http://api. fickr.com/services/feeds/←photos_public.gne?ids=25053835@
N03＆format=json＆jsoncallback=?
公共照片feed的其他几个选项
对于Flickr的公共照片feed，你可以添加一些其他的选项来修饰feed所返回的信息。例如，假设你和几个朋友想要拍摄花栗鼠的照片并将其发布到Flickr上，并且，你想要获取你和自己的朋友所拍摄的最新的20张花栗鼠照片。你可以通过指定一个或多个标签来过滤feed，从而做到这一点。
在Flickr上，你可以使用一个或多个单词来给任何照片添加标签。标签是一个单词或短语，描述了照片的一个要素。例如，你可以将一张特别漂亮的日落的照片标记为“sunset”。任何照片都可以有多个标签，因此，你可能会使用单词“sunset, orange, beach”来标记那张日落的照片。
注意：只能在Flickr的公有照片feed中（www.flickr.com/services/feeds/docs/photos_public/）搜索标签。例如，你不能用来自群组（例如，Flickr的Web Design群组）的一个特定标签或多个标签搜索照片。
Flickr的feed服务提供了一些选项，允许你根据特定的标签来搜索一个feed：
·Tags。给URL添加带有一个或多个逗号和隔开的关键字的tag关键字，以指定一个标签，例如＆tags=fireworks, night。假设你的Flickr ID是8623220@N02，并且你的朋友是25053835@N03。你可以通过诸如下面的一个长长的URL来获取这两个feed，并且只搜索带有“chipmunk”标签的照片：
http://api. flickr.com/services/feeds/8
photos_public. gne?ids=25053835@N03，8623220@N02←
＆tags=chipmunk＆format=json＆jsoncallback=?
·tagmode。通常，当你搜索一组标签的时候，Flickr只是获取匹配所有标签的照片。例如，假设你给一个feed添加了?tags=chipmunks, baseball, winter。这段代码只会查找花栗鼠在冬天玩棒球的照片。如果你想要花栗鼠的照片，或者棒球的照片，或者冬天的照片（换句话说，至少有一个标签），给URL添加＆tagmode=any。例如：
http://api. flickr.com/services/feeds/8
photos_public. gne?ids=25053835@N03，8623220@N02←
＆tags=chipmunk＆tagmode=any＆format=json＆jsoncallback=?
