JSON

• JSON - Alternative to XML designed to be easily parsed by Javascript.
• JSON is like (though not quite) Javascript data.

• When JSON is returned by Ajax, you can convert it to a JS object (e.g. an array) using JSON.parse

   
  var obj = JSON.parse ( data );
  

  and then obj is a JS object containing all the data.
• So much easier than parsing XML. Don't need to write code to work through the JSON structure. Just call JSON.parse() and it is parsed!

Reference

• JSON at MDN
• JSON at w3schools

JSON example - Flickr JSON feeds

• Flickr API
• Public feeds as well as API methods.

• Public feed of latest images tagged with "Paris" as:
  • XML feed
  • JSON feed

• Flickr XML feeds

  
jsonFlickrFeed({
		"title": "Recent Uploads tagged louvre",
		"link": "http://www.flickr.com/photos/tags/louvre/",
		"description": "",
		"modified": "2016-02-29T15:43:47Z",
		"generator": "http://www.flickr.com/",
		"items": [
	   {
			"title": "Louvre Sunset",
			"link": "http://www.flickr.com/photos/frankwiegand/25378218695/",
			"media": {"m":"http://farm2.staticflickr.com/1624/25378218695_99bf5c58ec_m.jpg"},
			"date_taken": "2016-02-29T07:42:56-08:00",
			"description": " STRING OF HTML HERE ",
			"published": "2016-02-29T15:43:47Z",
			"author": "nobody@flickr.com (Frank Wiegand Photography)",
			"author_id": "132296773@N05",
			"tags": "autumn sunset paris france .... louvre herbst stadt wiegand"
	   },

....

JSONP - Workaround to same origin policy

• JSONP (JSON with "padding")
• Uses the fact that script does not have to be same-origin:

  <script src="http://remote_site/script.js">
  

  So script could include the data at the remote site.

How JSONP works

• A simple call for a JSON feed would look like this:

   http://site/feed  
  

  and the site would return this:

   the JSON data  
  

• With JSONP, we call a URL like this:

   http://site/feed?callback=fn 
  

  and the site (which is designed to service JSONP calls) returns exactly this:

  fn ( the JSON data )
  

• So if we include that URL as a script:

  <script src="http://site/feed?callback=fn">
  

  then fn() gets run on the JSON data.
  You write fn() yourself to do whatever you want to do with the data.
  The function is the "P" of JSONP - the "padding" around the pure JSON data.

Notes

• Since the server is returning fn ( data ) the data is probably already a JS object and does not need to be parsed with JSON.parse. You can just start looking at the object directly.

• Having the <script element pre-coded into the page is one thing. But how do we make requests to servers after page load, not just on page load? How do we get a <script element that only comes into existence in response to a user action?
  We can insert a new script element into the page at run-time:

   var script = document.createElement("script");
   script.src = url;
   document.head.appendChild(script);  
  

  and then the script gets run.

• jQuery has a one-liner way of calling a new script at run-time, with getScript