While working on a Social Media News Release (SMNR) for Doritos on Friday, I found out a very useful parameter to use when making JSON (JavaScript Object Notation) calls to a remote web service, which just happened to be YouTube, Technorati and Twitter.
For this SMNR, there were three areas on the page that needed to be populated with information from the three services above and the easiest way to accomplish this was to make a JSON call to each web service using the much beloved jQuery framework. It seems live I have everything in order, right? Well thats what I thought until I ran a few tests on the page once I had inserted all the web service calls.
Error! Error! Error!
I had completely forgotten that, because of browser security, it is not possible to make a call to a remote server when using a client-side methodology (JavaScript). How on earth was I going to get around this problem?
Enter the callback parameter. By attaching this parameter to the end of the URL for each web service I’m able to wrap the entire response in an object that can be interpreted by the function I defined with the callback parameter.
// URL of the Web service (Yahoo! Pipe)
var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=DqYNueL53RGgBBpd3rVd_w&_render=json&_callback=?'
// Anonymous function points to the callback parameter
$.getJSON(url, function(response){
...
});
This isn’t a browser hack, but an accepted format that can be used cross-browser. For more information, I recommend you check out an article on Yahoo! called Using JSON (JavaScript Object Notation) with Yahoo! Web Services that goes into more detail on this subject.
