使用API创建一个混搭,它可以作为一个小部件内嵌在网站上。

  • API(Application Programming Interface):带有文档的接口,让第三方开发者使用产品的功能。
  • 混搭(Mashup):一种服务,结合两个或多个不同API提供的功能。
  • 小部件(Widget):一个可以内嵌在网站上的自包含小应用。

Flickr API

Flickr 社群具有超過 50 億張相片 (其中許多包含具有價值的描述資訊,例如標籤、地理位置和 Exif 資料),建立了非常豐富的資料。
Flickr API 是可讓你存取該資料的工具。 事實上,幾乎所有使 flickr.com 得以運作的功能都可透過 API 取得。 並且API 的使用完全免費,是專為我們的會員以及開發人員和其他整合者提供的服務,使他們可以創造出 flickr.com 所未能提供的更多其他相片互動方式。

Flickr API 文档
Google地图 API 文档

JSON

Douglas Crockford认识到大部分现代编程语言共享了相同的数据结构核心:数值、字符串、布尔型、数组及键值对容器(又叫做记录、结构、字典、哈希表、哈希或关系数组)。JSON标准重用javascript语法来定义一个微型语言以表示那些和语言无关的数据结构。

eval函数是将JSON字符串转成javascript对象的最快速的方式,但是它只能用在可以信任的JSON源上。如果JSON字符串来自不可信任的地方,可能包含恶意javascript代码。一个安全的替代直接调用的方式是使用parseJSON方法,其使用正则表示式检查JSON字符串是否安全,然后再传递给eval。

同源限制

传统Ajax调用(使用XMLHttpRequest对象)有一个重要的限制:它们只允许和提供源代码的域进行通信。
如果没有同源限制,当一个用户在公司内部网络中访问一个恶意网站时,公共因特网上的恶意网页可以使用XMLHttpRequest从私有wiki上偷取信息。如果浏览器不强制同源限制,很多私有网站可能会被偷数据。
对于依赖外部域的操作,JSON可以让我们绕过这个限制,方法包括跨域JSONJSON-P(“JSON with padding”缩写)。
永远不要从一个不信任的网站加载JSON-P文档,这样做可能让你受到恶意的跨站脚本攻击。

为了提供跨域JSON,一个网站只需要在普通的JSON对象外面包裹一个命名函数的调用。通过定义自己的jsonfeed函数,并用HTML中的script标签引入。

示例

用户输入标签后显示包含该tag的20张图片
使用下面的URL获取被打标签的照片

http://api.flickr.com/services/feeds/photos_public.gne?tags=[TAG]

详细代码

全局变量

window是全局变量,所以给window设置属性相当于创建了一个全局变量。还可以通过省略变量声明中的var关键字来创建一个全局变量,不过这样难以区分。
在javascript中最好尽量避免使用全局变量。

函数工厂

闭包允许创建一个函数捕捉一个或多个必须的变量。
函数工厂指一个创建并返回另外一个函数的函数。
利用该技巧可以创建需要的回调函数。回调函数接受一个参数ev,它是浏览器创建的事件对象。可以用它阻止浏览器的默认行为。

demo详细代码