Example: Request JSON using Yahoo! Pipes

Implementing a Cross-Domain Request for JSON Data

In this example, we begin with a YUI instance that loads the io-xdr, json-parse, and node modules. The io-xdr module is the key module. The other modules are used to process and output the results:

//Create a YUI instance including support for IO and JSON modules:
YUI().use("io-xdr", "json-parse", "node", function(Y) {
 // Y is the YUI instance.
 // The rest of the following code is encapsulated in this
 // anonymous function.
});

We'll also get a Node reference to the container we'll be using to output the data we retrieve:

//element #output:
var output = Y.one("#output ul");

handleSuccess is the function responsible for handling the response data. The first thing we do is sanitize the data to ensure we have valid JSON.

var oRSS = Y.JSON.parse(o.responseText);

Next, we create a simple markup template and use Y.Lang.sub() to fill in the data, as we iterate through the JSON and output the results.

//From here, we simply access the JSON data from where it's provided
//in the Yahoo! Pipes output:
if (oRSS && oRSS.count) {
 var s = "<!--begin news stories fetched via Yahoo! Pipes-->",
 //t in this case is our simple template; this is fed to
 //Y.Lang.sub() as we loop through RSS items:
 t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";
 for (var i=0; i<oRSS.count; i++) {
 s += Y.Lang.sub(t, oRSS.value.items[i]);
 }
 //Output the string to the page:
 output.set("innerHTML", s);
 output.addClass("yui-null");
}

Create the configuration object for the cross-domain request, setting up the event handlers and instructing IO to use the browser's native cross-domain transport.

var cfg = {
 method: "GET", //If omitted, the default is HTTP GET.
 xdr: {
 use:'native'//For browsers that support CORS.
 },
 on: {
 //Our event handlers previously defined:
 start: handleStart,
 success: handleSuccess,
 failure: handleFailure
 }
};

Create an event handler that will make the IO call to Yahoo! Pipes when the Load button is clicked:

//Wire the button to a click handler to fire our request each
//time the button is clicked:
var handleClick = function(o) {
 Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");
 // Remove the default "X-Requested-With" header as this will
 // prevent the request from succeeding; the Pipes
 // resource will not accept user-defined HTTP headers.
 Y.io.header('X-Requested-With');
 var obj = Y.io(
	//this is a specific Pipes feed, populated with cycling news:
	"http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",
	cfg
 );
}
//add the click handler to the Load button.
Y.on("click", handleClick, "#pipes");

Full Script

The full script source for this example is as follows:

<button id="pipes">Load RSS news feed from Yahoo! Pipes.</button>
<div id="output">
 <ul>
 <li>Content from Yahoo! Pipes feed will display here.</li>
 </ul>
</div>
<script language="javascript">
YUI({ filter:'raw' }).use("io-xdr", "json-parse", "node",
 function(Y) {
 //Data fetched will be displayed in a UL in the
 //element #output:
 var output = Y.one("#output ul");
 //Event handler called when the transaction begins:
 var handleStart = function(id, a) {
 Y.log("io:start firing.", "info", "example");
 output.setHTML("<li>Loading news stories via Yahoo! Pipes feed...</li>");
 }
 //Event handler for the success event -- use this handler to write the fetched
 //RSS items to the page.
 var handleSuccess = function(id, o, a) {
 //We use JSON.parse to sanitize the JSON (as opposed to simply performing an
 //JavaScript eval of the data):
 var oRSS = Y.JSON.parse(o.responseText);
 //From here, we simply access the JSON data from where it's provided
 //in the Yahoo! Pipes output:
 if (oRSS && oRSS.count) {
 var s = "<!--begin news stories fetched via Yahoo! Pipes-->",
 //t in this case is our simple template; this is fed to
 //Y.Lang.sub() as we loop through RSS items:
 t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";
 for (var i=0; i<oRSS.count; i++) {
 s += Y.Lang.sub(t, oRSS.value.items[i]);
 }
 //Output the string to the page:
 output.setHTML(s);
 output.addClass("yui-null");
 } else {
 //No news stories were found in the feed.
 var s = "<li>The RSS feed did not return any items.</li>";
 }
 }
 //In the event that the HTTP status returned does not resolve to,
 //HTTP 2xx, a failure is reported and this function is called:
 var handleFailure = function(id, o, a) {
 Y.log("ERROR " + id + " " + a, "info", "example");
 if (o.status === 0) {
 output.setHTML('<li>The service might be down - ' + 
 'would you like to <a href="xdr.html?mock=true">try this '+
 'example with mock data</a>?</li>');
 }
 }
 //With all the apparatus in place, we can now configure our
 //IO call. The method property is defined, but if omitted,
 //IO will default to HTTP GET.
 var cfg = {
 method: "GET",
 xdr: {
 use:'native'
 },
 on: {
 //Our event handlers previously defined:
 start: handleStart,
 success: handleSuccess,
 failure: handleFailure
 }
 };
 //Wire the button to a click handler to fire our request each
 //time the button is clicked:
 var handleClick = function(o) {
 Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");
 var obj = Y.io(
 //this is a specific Pipes feed, populated with cycling news:
 "http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",
 cfg
 );
 }
 //add the click handler to the Load button.
 Y.on("click", handleClick, "#pipes");
 }
);
</script>