第12章　Flickr和Google Maps

在第11章中，我们学习了Ajax的基础知识，即它是什么，它是如何工作的，以及jQuery如何简化了Ajax编程的过程。由于Ajax完全是Web浏览器和Web服务器之间的双向通信，如果真的想要驾驭Ajax的力量，理解服务器端编程是必需的。然而，要成功地使用Ajax，我们不需要成为服务器端编程的大师。实际上，你可以通过Flickr、Twitter和Google Maps等流行Web站点来获取图像、tweet和地图，并且将它们直接放置到你的Web页面中，从而利用这些服务所提供的优点。

12.1　JSONP简介

在第11章中，我们了解到，基于安全性方面的原因，Ajax请求仅限于同一域。也就是说，发送Ajax请求的页面必须与响应该请求的页面位于同一服务器上。这是Web浏览器强加的策略，为了防止一个站点带有恶意地试图联系另一个站点（例如，银行）。然而，有一种方法可以绕过这种限制。尽管Web浏览器不能向不同的站点发送一个XMLHTTP请求，但它可以从其他站点下载资源，包括图片、样式表和外部JavaScript文件。

JSONP（JSON with padding）提供了一种方式来从另一个站点获取信息。实际上，你可以载入了外部站点中包含JSON代码的一段脚本，而不是发出对外部站点的一个Ajax请求。换句话说，它就像是到Google上的一个外部JavaScript文件的链接。然而，你不能从其他站点获取任何想要的信息。要使用JSONP，外部站点必须设置为响应JSONP。大多数站点没有设置为以这种方式发送信息，但是，像GoogleMaps、Twitter、Flickr、Facebook、Netflix和YouTube这样的大站点提供了一个API，允许你使用jQuery的$.getJSON（）函数来请求诸如地图、照片、影评等数据（如图12-1所示）。

图　12-1：由于Ajax仅限于从同一域请求信息，但是一种叫做JSONP的替代方法允许我们通过从另一个站点请求一个JavaScript文件，从而获取JSON数据。这一技术允许我们从Twitter访问tweet，从Google访问地图，从Flickr获取照片，并且将它们直接嵌入到自己的Web页面中