Static JSON with Callback
1 April 2008JSONP has become a well known technique for loading JSON data from other sites. JSONP defines that a parameter should name a callback function to be called from the script returned from the web service provider. Yahoo, Flickr, and many other public web services provide some form of JSONP with their web services. However, there a couple significant difficulties with JSONP:
- It is impossible to make a static file available as a JSONP service
- There is no ability to attach metadata to the results
I have previously discussed a way to attach metadata to JSONP results. However, JSONP precludes the use of a static file because the client provides a dynamic name for the callback, and therefore the callback must be created dynamically based on the provided parameter. In addition, usually any given JSON file may be accessed directly (through XHR) or through JSONP, so in some situations, there should be no callback. Therefore, I propose an alternate technique for cross-site loading of JSON data.
Rather than using a client provided callback name, the callback name can simply be the full URL of the resource that is being accessed. By using the full URL, conflicts can be avoided with other resources being loading with JSONP simultaneously. Full URLs are also rarely used as global variables, and therefore make a good choice for the callback. In addition, a simple OR operator can be used to call the callback when available, or return the JSON data otherwise. The syntax for creating static JSON with a callback is this:
(window["<full url>"]||function(val){return val}) (<json data>)
So if you start with the following JSON data:
{foo:"bar"}
And if you want to make this JSON data available to XHR and cross-site script loading, you can simply add the following prefix and parenthesis around the JSON data:
(window["http://www.somesite.com/foobar"]||function(val){return val})
({foo:"bar"})
XHR can load this resource and perform an eval to parse the JSON without any modification. If the callback is not available, the pass-through function will return the JSON data and the JSON parsing eval will function operate exactly as before. If you want to load this JSON data using cross-site loading. Simply define your callback as the name of URL you are loading:
window["http://www.somesite.com/foobar"] = function(jsonData) {
handleJson(jsonData);
}
And then load the script:
var scriptTag = document.createElement("script");
scriptTag.setAttribute("src", url);
document.body.appendChild(scriptTag);
When the script is loaded the callback will be called with the JSON data passed in as the parameter.
By using this technique we can create a single static file that can provide JSON data to XHR-based JSON loaders as well dynamic script tag loaders in cross-site situations.
Update:
After discussions with Dustin Machi, I think it is worth noting that this technique is not appropriate for non-cacheable, non-idempotent requests. However, such requests would not be used against a static resource, they are inherently dynamic resources, and therefore the standard JSONP technique would not be problematic in these cases. For static resources, my proposal should still be an effective way to create a static JSON resource that is cross-site accessible.
2 Responses to “Static JSON with Callback”
April 3rd, 2008 at 1:41 am
This is a thoughtful and interesting post. Thanks, Kris.
May 10th, 2008 at 8:26 am
13852066be0b…
13852066be0b68802874…