{{>jsonp-github-css}}
<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>
</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>
```
{
user: {
gravatar_id: "fc2cca...",
login: "username"
name: "User's Name",
...,
public_repo_count: 10,
public_gist_count: 20,
following_count: 30,
followers_count: 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.setContent( 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>"http://example.com/service?format=json&<em>callback=handleJSONP</em>".</p>
<p>To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text "{callback}".</p>
```
// BEFORE
//AFTER
var url = "http://github.com/api/v2/json/user/show/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("#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);
});
```
<h3 id="fullcode">Full Code Listing</h3>
<h4>HTML</h4>
```
{{>jsonp-github-markup}}
```
<h4>JavaScript</h4>
```
{{>jsonp-github-js}}
```