Home > Uncategorized > Using JSONP to show books from the Google API.

Using JSONP to show books from the Google API.

July 6, 2011 Leave a comment Go to comments

JSONP is one of the few technologies that allows cross-site scripting (XSS), whether this is by design or an oversight, here is an example of a Google Book Search using JSONP

<html>
  <head>
    <title>Books API Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script>
      function handleResponse(response) {
	  html = "";
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        // in production code, item.text should have the HTML entities escaped.
		html += "<hr><img src=" + item.volumeInfo.imageLinks.thumbnail + ">";
		html += "<br>" + item.volumeInfo.title;
		html += "<br>Written by ";
		for(var author in item.volumeInfo.authors)
		{
			html+= item.volumeInfo.authors[author] + " ";
		}
		html += "<br>Published by " + item.volumeInfo.publisher;
		html += "<br>Published on " + item.volumeInfo.publishedDate;
		if (item.volumeInfo.pageCount != undefined)
		{
			html += "<br>Pages " + item.volumeInfo.pageCount;
		}
		for (var identifier in item.volumeInfo.industryIdentifiers)
		{
			var isbn = item.volumeInfo.industryIdentifiers[identifier];
			if (isbn.type=="ISBN_10")
			{
				html += "<br><a href=http://www.amazon.com/exec/obidos/ASIN/" + isbn.identifier+ "/httpnetwoprog-20>";
				html += "Buy at Amazon USA</a>";
				html += "<br><a href=http://www.amazon.co.uk/exec/obidos/ASIN/" + isbn.identifier+ "/wwwxamlnet-21>";
				html += "Buy at Amazon UK</a>";
			}
		}
	  }
	  document.getElementById("content").innerHTML = html;
    }
    </script>
    <script src="https://www.googleapis.com/books/v1/volumes?q=harry+potter&callback=handleResponse"></script>
  </body>
</html>

 

Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a comment