JSONP: Getting cross domain JSONP data using Y.jsonp()
This example illustrates basic use of the Y.jsonp( url, callback ) method, provided by the jsonp module.
For this example, we will use a JSONP service hosted on YUILibrary to fetch information about a random Gallery module and render some of the information on the page.
The data
The structure of the JavaScript object returned from YUILibrary's JSONP service will look like this:
{ modules: [ { url: (the url to the module), title: (the title of the module), summary: (short description of the module), ..., owner: { icon: (url to the author's thumb image), fullname: (the author's full name), rank: (YUI Team member?, Contributor? etc), ... } } ], ... }
We can use these objects to populate HTML templates with data {placeholder}s using Y.substitute( template, object ). The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as node.setContent( html ) or node.append( html ). We'll do this in the function that will receive the JSONP response (seen below).
Format the JSONP url
Typical JSONP urls are formatted like "http://example.com/service?format=json&callback=handleJSONP". To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text "{callback}".
// BEFORE var url = "http://yuilibrary.com/gallery/api/random?callback=handleJSONP"; //AFTER var url = "http://yuilibrary.com/gallery/api/random?callback={callback}";
Then simply pass the url and the function that should handle the JSONP response object to Y.jsonp(url, handleJSONP).
var url = "http://yuilibrary.com/gallery/api/random?callback={callback}"; function handleJSONP(response) { var module = response.modules[0], module_template = '<h4><a href="{url}">{title}</a></h4>' + '<p class="author">{authorHTML}</p>' + '<div>{summary}</div>'; author_template = '<img src="{icon}" height="30" width="30">' + ' {fullname} <span class="rank">({rank})</span>'; module.authorHTML = Y.substitute(author_template, module.owner); Y.one("#out").setContent( Y.substitute(module_template, module) ); }; // Click the button to send the JSONP request Y.one("#demo_btn").on("click", function () { Y.jsonp(url, handleJSONP); });
