<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", "substitute", "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.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 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.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);
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");
}
//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");
// 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:
cfg
);
}
//add the click handler to the Load button.
Y.on("click", handleClick, "#pipes");
}
);
</script>