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.
Note: If the GitHub API is unavailable, you can try this example with mock data.
The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:
``` { data: { avatar_id: "fc2cca...", login: "username" name: "User's Name", ..., public_repos: 10, public_gists: 20, following: 30, followers: 40 } } ```We'll use these objects to populate HTML templates with data {placeholder}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).
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}".
``` // BEFORE var url = "https://api.github.com/users/yui?callback=handleJSONP"; //AFTER var url = "https://api.github.com/users/yui?callback={callback}"; ```Then simply pass the url and the function that should handle the JSONP response object to `Y.jsonp(url, handleJSONP)`.
``` 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); }); ```