--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/io/io-xdr_clean.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,155 @@
+
+<!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>