<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#output li {margin-left:2em;}
#output { background-color:#FFFFFF; border:1px dotted #666666; padding:1em; margin-top:1em;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes</h1>
<div class="exampleIntro">
<p>In the example below, IO is employed to make a cross-domain request to <a href="http://pipes.yahoo.com">Yahoo! Pipes</a>. The output of the Pipe is an RSS-style feed formatted as JSON. We pass that output to the JSON Utility's <code>parse</code> method for sanitization and then display the contents of the Pipe in a list.</p>
<p>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 <code>JSON.parse</code> against it, making it safer to use; a script node would evaluate immediately in the global scope as soon as it was loaded.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<button id="fetch" disabled="disabled">Load JSON 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({base:"../../build/", timeout: 10000}).use("io", "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?t=' + new Date().valueOf().toString() //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);
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 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.
},
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);
});
}
);
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>