<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Getting Cross Domain JSON Data Using Y.jsonp()</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Getting Cross Domain JSON Data Using Y.jsonp()</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style scoped>
#out {
margin-top: 1em;
}
#out caption {
color: #f80;
font-size: 123%;
display: table-caption;
*display: block;
}
</style>
<div class="intro">
<p>This example illustrates basic use of the <code>Y.jsonp( url, callback )</code> method, provided by the <code>jsonp</code> 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">
<div id="demo">
<select id="github_user">
<option value="yui">YUI Library</option>
<option value="allenrabinovich">Allen Rabinovich</option>
<option value="davglass">Dav Glass</option>
<option value="derek">Derek Gathright</option>
<option value="ericf">Eric Ferraiuolo</option>
<option value="jenny">Jenny Donnelly</option>
<option value="lsmith">Luke Smith</option>
<option value="msweeney">Matt Sweeney</option>
<option value="reid">Reid Burke</option>
<option value="rgrove">Ryan Grove</option>
<option value="sdesai">Satyen Desai</option>
<option value="tripp">Tripp Bridges</option>
</select>
<input type="button" id="demo_btn" value="Get user info">
<div id="out">
</div>
</div>
<script>
YUI().use("jsonp", "node",function (Y) {
var user = Y.one("#github_user"),
githubAPI = "https://api.github.com/users/",
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_repos}</td>' +
'<td>{public_gists}</td>' +
'<td>{followers}</td>' +
'<td>{following}</td>' +
'</tr>' +
'</tbody>' +
'</table>';
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);
});
});
</script>
</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>
<pre class="code prettyprint">{
data: {
avatar_id: "fc2cca...",
login: "username"
name: "User's Name",
...,
public_repos: 10,
public_gists: 20,
following: 30,
followers: 40
}
}</pre>
<p>We'll use these objects to populate HTML templates with data <em>{placeholder}</em>s using <code>Y.Lang.sub( template, object )</code>. The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as <code>node.setHTML( html )</code> or <code>node.append( html )</code>. 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>
<pre class="code prettyprint">// BEFORE
var url = "https://api.github.com/users/yui?callback=handleJSONP";
//AFTER
var url = "https://api.github.com/users/yui?callback={callback}";</pre>
<p>Then simply pass the url and the function that should handle the JSONP response object to <code>Y.jsonp(<em>url</em>, <em>handleJSONP</em>)</code>.</p>
<pre class="code prettyprint">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);
});</pre>
<h3 id="fullcode">Full Code Listing</h3>
<h4>HTML</h4>
<pre class="code prettyprint"><div id="demo">
<select id="github_user">
<option value="yui">YUI Library</option>
<option value="allenrabinovich">Allen Rabinovich</option>
<option value="davglass">Dav Glass</option>
<option value="derek">Derek Gathright</option>
<option value="ericf">Eric Ferraiuolo</option>
<option value="jenny">Jenny Donnelly</option>
<option value="lsmith">Luke Smith</option>
<option value="msweeney">Matt Sweeney</option>
<option value="reid">Reid Burke</option>
<option value="rgrove">Ryan Grove</option>
<option value="sdesai">Satyen Desai</option>
<option value="tripp">Tripp Bridges</option>
</select>
<input type="button" id="demo_btn" value="Get user info">
<div id="out">
</div>
</div></pre>
<h4>JavaScript</h4>
<pre class="code prettyprint"><script>
YUI().use("jsonp", "node",function (Y) {
var user = Y.one("#github_user"),
githubAPI = "https://api.github.com/users/",
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_repos}</td>' +
'<td>{public_gists}</td>' +
'<td>{followers}</td>' +
'<td>{following}</td>' +
'</tr>' +
'</tbody>' +
'</table>';
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);
});
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Get basic GitHub user info using a Y.jsonp(url, callback).">
<a href="jsonp-github.html">Getting Cross Domain JSON Data Using Y.jsonp()</a>
</li>
<li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
<a href="jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Wrapping async transactions with promises">
<a href="../promise/basic-example.html">Wrapping async transactions with promises</a>
</li>
<li data-description="Extend Y.Promise to create classes that encapsulate standard transaction logic in descriptive method names">
<a href="../promise/subclass-example.html">Subclassing Y.Promise</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/jsonp',
name: 'jsonp-github',
title: 'Getting Cross Domain JSON Data Using Y.jsonp()',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('jsonp-github');
YUI.Env.Tests.examples.push('jsonp-gallery');
YUI.Env.Tests.examples.push('basic-example');
YUI.Env.Tests.examples.push('subclass-example');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>