{{>jsonp-github-css}}
{{>jsonp-github-js-mock-config}}

<div class="intro">
    <p>This example illustrates basic use of the `Y.jsonp( url, callback )` method, provided by the `jsonp` module.</p>

    <p>For this example, we will use <a href="http://develop.github.com/">GitHub's webservice API</a>, fetching user information about some members of the YUI team.</p>

    <p><strong>Note:</strong> If the GitHub API is unavailable, you can <a href="?mock=true">try this example with mock data</a>.
</div>

<div class="example yui3-skin-sam">
{{>jsonp-github-markup}}
{{>jsonp-github-js}}
</div>

<h3>The data</h3>
<p>The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:</p>

```
{
    data: {
        avatar_id: "fc2cca...",
        login: "username"
        name: "User's Name",
        ...,

        public_repos: 10,
        public_gists: 20,
        following: 30,
        followers: 40
    }
}
```

<p>We'll use these objects to populate HTML templates with data <em>{placeholder}</em>s using `Y.Lang.sub( template, object )`.  The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as `node.setHTML( html )` or `node.append( html )`.  We'll do this in the function that will receive the JSONP response (seen below).</p>

<h3>Format the JSONP url</h3>
<p>Typical JSONP urls are formatted like</p>
<p>&quot;http://example.com/service?format=json&<em>callback=handleJSONP</em>&quot;.</p>
<p>To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text &quot;{callback}&quot;.</p>

```
// BEFORE
var url = "https://api.github.com/users/yui?callback=handleJSONP";

//AFTER
var url = "https://api.github.com/users/yui?callback={callback}";
```

<p>Then simply pass the url and the function that should handle the JSONP response object to `Y.jsonp(<em>url</em>, <em>handleJSONP</em>)`.</p>

```
function handleJSONP(response) {
    Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
}

Y.one("#demo_btn").on("click", function (e) {
    // e.g. https://api.github.com/users/yui?callback={callback}
    var url = githubAPI + user.get("value") + "?callback={callback}";

    Y.jsonp(url, handleJSONP);
});
```

<h3 id="fullcode">Full Code Listing</h3>
<h4>HTML</h4>
```
{{>jsonp-github-markup}}
```

<h4>JavaScript</h4>
```
{{>jsonp-github-js}}
```
