JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 12. Flickr and Google Maps

In the previous chapter, you learned the basics of Ajax: what it is, how it works, and how jQuery can simplify the process of Ajax programming. Since Ajax is all about the two-way communication between web browser and web server, understanding server-side programming is necessary if you really want to harness Ajax’s power. However, you don’t need to be a server-side programming guru to use Ajax successfully. In fact, you can take advantage of the services offered by popular websites like Flickr, Twitter, and Google Maps to retrieve photos, tweets, and maps, and place them directly inside your web pages.

Introducing JSONP

In the last chapter you learned that, for security reasons, Ajax requests are limited to the same domain. That is, the page making an Ajax request must be on the same server as the page responding to the request. This is a policy enforced by the web browser to keep one site from maliciously attempting to contact another site (like your bank). There’s one way around that however. While a web browser can’t send an XMLHTTP request to a different website, it can download resources from other sites, including pictures, style sheets, and external JavaScript files.

JSONP (which stands for JSON with padding) provides one way to retrieve information from another site. Basically, instead of making an Ajax request of the foreign site, you load a script that contains the JSON code in it. In other words, it’s like linking to an external JavaScript ...