<div id="demo" class="yui3-skin-sam">
    <p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p>
    <p><button>Get Messages</button></p>
    <div id="demo-messages"></div>
</div>

<script>
// Create business logic in a YUI sandbox using the 'io' and 'json' modules
YUI().use("node", "io", "dump", "json-parse", function (Y) {

    // capture the node that we'll display the messages in
    var target = Y.one('#demo-messages');

    // Create the io callback/configuration
    var callback = {

        timeout : 3000,

        on : {
            success : function (x,o) {
                Y.log("RAW JSON DATA: " + o.responseText);

                var messages = [],
                    html = '', i, l;

                // Process the JSON data returned from the server
                try {
                    messages = Y.JSON.parse(o.responseText);
                }
                catch (e) {
                    alert("JSON Parse failed!");
                    return;
                }

                Y.log("PARSED DATA: " + Y.Lang.dump(messages));

                // The returned data was parsed into an array of objects.
                // Add a P element for each received message
                for (i=0, l=messages.length; i < l; ++i) {
                    html += '<p>' + messages[i].animal + ' says "' +
                                    messages[i].message + '"</p>';
                }

                // Use the Node API to apply the new innerHTML to the target
                target.setHTML(html);
            },

            failure : function (x,o) {
                alert("Async call failed!");
            }

        }
    };

    // Attach a click event listener to the button #demo_btn to send the request
    Y.one('#demo button').on('click',function (e) {
        // Make the call to the server for JSON data
        Y.io("{{componentAssets}}/json-connect-response.json", callback);
    });

});
</script>
