#

# Example: Request JSON using Yahoo! Pipes

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>