YUI 3.x Home -

YUI Library Examples: JSONP: Getting cross domain JSON data using Y.jsonp()

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.

View example in new window.

The data

The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:

  1. {
  2.     user: {
  3.         gravatar_id: "fc2cca...",
  4.         login: "username"
  5.         name: "User's Name",
  6.         ...,
  7.  
  8.         public_repo_count: 10,
  9.         public_gist_count: 20,
  10.         following_count: 30,
  11.         followers_count: 40
  12.     }
  13. }
{
    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}".

  1. // BEFORE
  2. var url = "http://github.com/api/v2/json/user/show/yui?callback=handleJSONP";
  3.  
  4. //AFTER
  5. 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).

  1. function handleJSONP(response) {
  2.     Y.one("#out").setContent(Y.substitute(template, response.user));
  3. }
  4.  
  5. Y.one("#demo_btn").on("click", function (e) {
  6.     // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback}
  7.     var url = githubAPI + user.get("value") + "?callback={callback}";
  8.  
  9.     Y.jsonp(url, handleJSONP);
  10. });
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

  1. <div id="demo">
  2.     <select id="github_user">
  3.         <option value="yui">YUI Library</option>
  4.         <option value="davglass">Dav Glass</option>
  5.         <option value="lsmith">Luke Smith</option>
  6.         <option value="rgrove">Ryan Grove</option>
  7.         <option value="apm">Adam Moore</option>
  8.         <option value="msweeney">Matt Sweeney</option>
  9.         <option value="sdesai">Satyen Desai</option>
  10.         <option value="jenny">Jenny Donnelly</option>
  11.         <option value="allenrabinovich">Allen Rabinovich</option>
  12.         <option value="tripp">Tripp Bridges</option>
  13.         <option value="reid">Reid Burke</option>
  14.     </select>
  15.     <input type="button" id="demo_btn" value="Get user info">
  16.     <div id="out">
  17.     </div>
  18. </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

  1. YUI().use("jsonp", "node", "substitute", function (Y) {
  2.  
  3.     var user      = Y.one("#github_user"),
  4.         githubAPI = "http://github.com/api/v2/json/user/show/",
  5.         template  = // assignment continued below
  6.  
  7.     '<table>' +
  8.         '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
  9.         '<thead>' +
  10.             '<tr>' +
  11.                 '<th>Repositories</th>' +
  12.                 '<th>Gists</th>' +
  13.                 '<th>Followers</th>' +
  14.                 '<th>Following</th>' +
  15.             '</tr>' +
  16.         '</thead>' +
  17.         '<tbody>' +
  18.             '<tr>' +
  19.                 '<td>{public_repo_count}</td>' +
  20.                 '<td>{public_gist_count}</td>' +
  21.                 '<td>{followers_count}</td>' +
  22.                 '<td>{following_count}</td>' +
  23.             '</tr>' +
  24.         '</tbody>' +
  25.     '</table>';
  26.  
  27.     function handleJSONP(response) {
  28.         Y.one("#out").setContent(Y.substitute(template, response.user));
  29.     }
  30.  
  31.     Y.one("#demo_btn").on("click", function (e) {
  32.         // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback}
  33.         var url = githubAPI + user.get("value") + "?callback={callback}";
  34.  
  35.         Y.jsonp(url, handleJSONP);
  36.     });
  37.  
  38. });
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);
    });
 
});

More JSONP Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings