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