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.
This example demonstrates how IO can use the Cross-Origin Resource Sharing (http://www.w3.org/TR/cors/) mechanism for making cross-domain requests.
+Please note: All the browsers listed in the Browser Test Baseline (http://developer.yahoo.com/yui/articles/gbs/) support CORS with the exception of IE 6.0 and IE 7.0, and Webkit on iOS 3. In addition to browser capability, the requested resource must respond with the proper Access-Control headers for the request to succeed.
+-
+
- Content from Yahoo! Pipes feed will display here. +
Implementing a Cross-Domain Request for JSON Data
+ +In this example, we begin with a YUI instance that loads the io-xdr, json-parse, and node modules. The io-xdr module is the key module. The other modules are used to process and output the results:
//Create a YUI instance including support for IO and JSON modules:
+YUI().use("io-xdr", "json-parse", "node", 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:
+ +//element #output:
+var output = Y.one("#output ul");
+
+
+handleSuccess is the function responsible for handling the response data. The first thing we do is sanitize the data to ensure we have valid JSON.
+var oRSS = Y.JSON.parse(o.responseText);+ +
Next, we create a simple markup template and use Y.Lang.sub() to fill in the data, as we iterate through the JSON and output the results.
//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.set("innerHTML", s);
+ output.addClass("yui-null");
+}
+
+
+Create the configuration object for the cross-domain request, setting up the event handlers and instructing IO to use the browser's native cross-domain transport.
+ +var cfg = {
+ method: "GET", //If omitted, the default is HTTP GET.
+ xdr: {
+ use:'native'//For browsers that support CORS.
+ },
+ on: {
+ //Our event handlers previously defined:
+ start: handleStart,
+ success: handleSuccess,
+ failure: handleFailure
+ }
+};
+
+
+Create an event handler that will make the IO call to Yahoo! Pipes when the Load button is clicked:
+ +//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:
+ "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");
+
+
+Full Script
+ +The full script source for this example is as follows:
+ +<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.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.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.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:
+ "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>
+
+