JSONP: Getting cross domain JSON 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 GitHub's webservice API, fetching user information about some members of the YUI team.
The data
The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:
{ user: { gravatar_id: "fc2cca...", login: "username" name: "User's Name", ..., public_repo_count: 10, public_gist_count: 20, following_count: 30, followers_count: 40 } }
{ user: { gravatar_id: "fc2cca...", login: "username" name: "User's Name", ..., public_repo_count: 10, public_gist_count: 20, following_count: 30, followers_count: 40 } }
We'll 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://github.com/api/v2/json/user/show/yui?callback=handleJSONP"; //AFTER var url = "http://github.com/api/v2/json/user/show/yui?callback={callback}";
// BEFORE var url = "http://github.com/api/v2/json/user/show/yui?callback=handleJSONP"; //AFTER var url = "http://github.com/api/v2/json/user/show/yui?callback={callback}";
Then simply pass the url and the function that should handle the JSONP response object to Y.jsonp(url, handleJSONP)
.
function handleJSONP(response) { Y.one("#out").setContent(Y.substitute(template, response.user)); } Y.one("#demo_btn").on("click", function (e) { // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback} var url = githubAPI + user.get("value") + "?callback={callback}"; Y.jsonp(url, handleJSONP); });
function handleJSONP(response) { Y.one("#out").setContent(Y.substitute(template, response.user)); } Y.one("#demo_btn").on("click", function (e) { // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback} var url = githubAPI + user.get("value") + "?callback={callback}"; Y.jsonp(url, handleJSONP); });
Full Code Listing
HTML
<div id="demo"> <select id="github_user"> <option value="yui">YUI Library</option> <option value="davglass">Dav Glass</option> <option value="lsmith">Luke Smith</option> <option value="rgrove">Ryan Grove</option> <option value="apm">Adam Moore</option> <option value="msweeney">Matt Sweeney</option> <option value="sdesai">Satyen Desai</option> <option value="jenny">Jenny Donnelly</option> <option value="allenrabinovich">Allen Rabinovich</option> <option value="tripp">Tripp Bridges</option> <option value="reid">Reid Burke</option> </select> <input type="button" id="demo_btn" value="Get user info"> <div id="out"> </div> </div>
<div id="demo"> <select id="github_user"> <option value="yui">YUI Library</option> <option value="davglass">Dav Glass</option> <option value="lsmith">Luke Smith</option> <option value="rgrove">Ryan Grove</option> <option value="apm">Adam Moore</option> <option value="msweeney">Matt Sweeney</option> <option value="sdesai">Satyen Desai</option> <option value="jenny">Jenny Donnelly</option> <option value="allenrabinovich">Allen Rabinovich</option> <option value="tripp">Tripp Bridges</option> <option value="reid">Reid Burke</option> </select> <input type="button" id="demo_btn" value="Get user info"> <div id="out"> </div> </div>
JavaScript
YUI().use("jsonp", "node", "substitute", function (Y) { var user = Y.one("#github_user"), githubAPI = "http://github.com/api/v2/json/user/show/", template = // assignment continued below '<table>' + '<caption>GitHub user <code>{login}</code> ({name})</caption>' + '<thead>' + '<tr>' + '<th>Repositories</th>' + '<th>Gists</th>' + '<th>Followers</th>' + '<th>Following</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr>' + '<td>{public_repo_count}</td>' + '<td>{public_gist_count}</td>' + '<td>{followers_count}</td>' + '<td>{following_count}</td>' + '</tr>' + '</tbody>' + '</table>'; function handleJSONP(response) { Y.one("#out").setContent(Y.substitute(template, response.user)); } Y.one("#demo_btn").on("click", function (e) { // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback} var url = githubAPI + user.get("value") + "?callback={callback}"; Y.jsonp(url, handleJSONP); }); });
YUI().use("jsonp", "node", "substitute", function (Y) { var user = Y.one("#github_user"), githubAPI = "http://github.com/api/v2/json/user/show/", template = // assignment continued below '<table>' + '<caption>GitHub user <code>{login}</code> ({name})</caption>' + '<thead>' + '<tr>' + '<th>Repositories</th>' + '<th>Gists</th>' + '<th>Followers</th>' + '<th>Following</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr>' + '<td>{public_repo_count}</td>' + '<td>{public_gist_count}</td>' + '<td>{followers_count}</td>' + '<td>{following_count}</td>' + '</tr>' + '</tbody>' + '</table>'; function handleJSONP(response) { Y.one("#out").setContent(Y.substitute(template, response.user)); } Y.one("#demo_btn").on("click", function (e) { // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback} var url = githubAPI + user.get("value") + "?callback={callback}"; Y.jsonp(url, handleJSONP); }); });