JsonP

docs

JsonP is a means by which to get JSON data from another domain than the one your page is on. If you try and use Ajax to request data from a different domain than the page, you'll get a security error.

One way around this is a concept some call "JsonP". This is where you include a script tag in your document. This script tag points to an external javascript source and when the script tag loads it executes (like any other script tag).

The catch is that you need to be able to tell that server what to wrap the data with so your functions can handle it.

Let's say we are on this page at clientside.cnet.com. Let's say we want to get some data from the CNET api at api.cnet.com. Here's a simple request that gets info about ipods:

api.cnet.com...productId=32069546&iod=none&viewType=json

This url will return a bunch of JSON data about that ipod that looks like this:

{"CNETResponse":{"@version":"1.0","TechProduct":{"@id":"32069546","@xlink:href":"http://api.cnet.com/restApi/v1.0/techProduct?productId=32069546&iod=offers","EditorsRating":{"$":"8.3","@outOf":"10"},"ImageURL":[{"$":"http://i.i.com.com/cnwk.1d/sc/32069546-2-60-0.gif","@width":"60"},{"$":"http://i.i.com.com/cnwk.1d/sc/32069546-2-120-0.gif","@width":"120"}],"SKU":{"$":"MA450LL/A"},"ReviewURL":{"$":"http://reviews.cnet.com/4505-6490_7-32069546.html"},"Category":{"@id":"6490","@xlink:href":"http://api.cnet.com/restApi/v1.0/category?categoryId=6490"},"EditorsChoice":{"$":"true"},"PriceURL":{"$":"http://shopper.cnet.com/4014-6490_9-32069546.html?ttag=api"},"Name":{"$":"Apple iPod (fifth-generation update, 80GB, black)"},"Manufacturer":{"@id":"272829","Name":{"$":"Apple"}},"PreferredNode":{"@id":"6490"}}}}

But it's just an object (just {...}), which, if loaded in a script tag, wouldn't do anything.

So what we can do is add to the url "callback=<myFunctionName>" and it will wrap that data with the reference to our function (this is what the CNET Api service does; other services may have a different callback=... key).

Adding callback=blah to the query string will return data like this:

blah({...json info...})

So now we can include that script tag in our body and it will execute our function ('blah') with the json data returned. Nifty, eh?

Enter JsonP, a class that works a lot like the Ajax class, but does this json stuff instead. Here's a simple example:

new JsonP('http://api.cnet.com/restApi/v1.0/techProduct?productId=32069546&iod=none&viewType=json&partKey=19926949750937665684988687810562', {
  onComplete: function(data){
    alert(data.CNETResponse.TechProduct.EditorsRating.$);
  }
}).request(); //alerts 8.3 - the rating of the ipod

Again, works pretty much like Ajax does. In order to work, you have to specify the callback string. It defaults to "callback" so I didn't have to specify it here because that's what the CNET API uses as its callback string. You can also specify a query string for the url and additional data as an object. Here's the same thing as above, but using these two other options:

new JsonP('http://api.cnet.com/restApi/v1.0/techProduct', {
  data: {
    iod: 'none',
    viewType: 'json'
  },
  queryString: 'productId=32069546&partKey=19926949750937665684988687810562',
  onComplete: function(data){
    alert(data.CNETResponse.TechProduct.EditorsRating.$);
  }
}).request(); //alerts 8.3 - the rating of the ipod