bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly{{>jsonp-github-css}}
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<div class="intro">
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly <p>This example illustrates basic use of the `Y.jsonp( url, callback )` method, provided by the `jsonp` module.</p>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly <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>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly{{>jsonp-github-markup}}
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly{{>jsonp-github-js}}
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<h3>The data</h3>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<p>The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:</p>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly gravatar_id: "fc2cca...",
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly login: "username"
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly name: "User's Name",
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly public_repo_count: 10,
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly public_gist_count: 20,
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly following_count: 30,
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly followers_count: 40
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<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>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<h3>Format the JSONP url</h3>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<p>Typical JSONP urls are formatted like</p>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<p>"http://example.com/service?format=json&<em>callback=handleJSONP</em>".</p>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<p>To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text "{callback}".</p>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnellyvar url = "http://github.com/api/v2/json/user/show/yui?callback=handleJSONP";
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnellyvar url = "http://github.com/api/v2/json/user/show/yui?callback={callback}";
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<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>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnellyfunction handleJSONP(response) {
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly Y.one("#out").setContent(Y.Lang.sub(template, response.user));
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny DonnellyY.one("#demo_btn").on("click", function (e) {
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback}
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly var url = githubAPI + user.get("value") + "?callback={callback}";
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly Y.jsonp(url, handleJSONP);
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<h3 id="fullcode">Full Code Listing</h3>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly{{>jsonp-github-markup}}
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly<h4>JavaScript</h4>
bf6ad7630f65756fbcb4c8fb9936a4fe542a6308Jenny Donnelly{{>jsonp-github-js}}