YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: IO: Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes

Note: This is YUI 3.x. Looking for YUI 2.x?

## IO: Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes

In the example below, IO is employed to make a cross-domain request to Yahoo! Pipes. The output of the Pipe is an RSS-style feed formatted as JSON. We pass that output to the JSON Utility's `parse` method for sanitization and then display the contents of the Pipe in a list.

The cross-domain approach obviates the need for a server-side proxy, making it faster. And the use of IO in place of a script node allows us to retrieve the JSON data as a string and execute `JSON.parse` against it, making it safer to use; a script node would evaluate immediately in the global scope as soon as it was loaded.

View example in new window.

- Content from Yahoo! Pipes feed will display here.

## Implementing a Simple Cross-Domain Request for JSON Data

In this example, we begin with a YUI instance that loads the IO and JSON modules:

//Create a YUI instance including support for IO and JSON modules: YUI({base:"../../build/", timeout: 10000}).use("io-xdr", "substitute", "json-parse", 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:

//Data fetched will be displayed in a UL in the //element #output: var output = Y.Node.get("#output ul");

Next, we configure IO's cross-domain interface for this YUI instance. Flash is the underlying mechansim used here. Be sure to configure the `src` property to point to your `IO.swf` file.

//Configure the cross-domain protocol: var xdrConfig = { id:'flash', //We'll reference this id in the xdr configuration of our transaction. yid: Y.id, //The yid provides a link from the Flash-based XDR engine //and the YUI instance. src:'../../build/io/IO.swf?t=' + new Date().valueOf().toString() //Relative path to the .swf file from the current page. }; Y.io.transport(xdrConfig);

The configuration for our specific IO transaction contains a reference to the `xdr` configuration we created above and specifies that there will not be a need to process the response as XML (we're getting JSON instead):

var cfg = { method: "GET", xdr: { use:'flash', //This is the xdrConfig id we referenced above. responseXML:false //we're using JSON -- marginally faster, and //supported by the Pipes API }, on: { //Our event handlers previously defined: start: handleStart, success: handleSuccess, failure: handleFailure } };

The final step is to make the request:

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 );

### Full Script

The full script source for this example is as follows:

YUI({base:"../../build/", timeout: 10000}).use("io-xdr", "substitute", "json-parse", function(Y) { //Data fetched will be displayed in a UL in the //element #output: var output = Y.Node.get("#output ul"); //Configure the cross-domain protocol: var xdrConfig = { id:'flash', //We'll reference this id in the xdr configuration of our transaction. yid: Y.id, //The yid provides a link from the Flash-based XDR engine //and the YUI instance. src:'../../build/io/IO.swf' //Relative path to the .swf file from the current page. }; Y.io.transport(xdrConfig); //Event handler called when the transaction begins: var handleStart = function(id, a) { Y.log("io:start firing.", "info", "example"); output.set("innerHTML", "<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 eval'ing //it into the page): 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.substitute 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.substitute(t, oRSS.value.items[i]); } //Output the string to the page: output.set("innerHTML", s); } 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 is > 399, a //failure is reported and this function is called: var handleFailure = function(id, o, a) { Y.log("ERROR " + id + " " + a, "info", "example"); } //With all the aparatus in place, we can now configure our //io call. var cfg = { method: "GET", xdr: { use:'flash', //This is the xdrConfig id we referenced above. responseXML:false //we're using JSON -- marginally faster, and //supported by the Pipes API }, on: { //Our event handlers previously defined: start: handleStart, success: handleSuccess, failure: handleFailure } }; //Wire the buttton 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 clickHandler as soon as the xdr Flash module has //loaded: Y.on('io:xdrReady', function() { var fetch = Y.Node.get("#fetch"); fetch.set("disabled", false); Y.on("click", handleClick, fetch); }); } );

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings