#

# Example: HTTP GET to request data

This example demonstrates how to send HTTP GET requests using YUI 3's IO module. One transaction uses global event listeners to handle the transaction's lifecycle and response. The other transaction uses both global and transaction-level events.

- IO GET response data will appear here.

## Using IO for HTTP GET Requests, and Handling the Response via Event Listeners.

### Create a YUI Instance

We create a YUI instance and use `io-base` for this example, since we only need to basic IO functionality:

    //Create a YUI instance including support for IO:
    YUI({ filter:'raw' }).use("io-base", "node", function(Y) {
        // Y is the YUI instance.
        // The rest of the following code is encapsulated in this
        // anonymous function.
    } );

### Create Handlers for Global and Transaction Events

We will create one object to handle the Global Events, and one object to handle Transaction Events. Each object defines methods to handle the events in a transction's lifecycles. The results are logged to `<div id="container">`.

    //Get a reference to the DIV that we are using
    //to report results.
    var d = Y.one('#container'),
        gStr = '',
        tStr = '',
        state;

    /* global listener object */
    var gH = {
        write: function(s, args) {
                 gStr += "ID: " + s;
                 if (args) {
                    gStr += " " + "The arguments are: " + args;
                 }
                 gStr += "<br>";
               },
        start: function(id, args) {
                 this.write(id + ": Global Event Start.", args);
               },
        complete: function(id, o, args) {
                    this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
               },
        success: function(id, o, args) {
                   this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
                 },
        failure: function(id, o, args) {
                   this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
                 },
        end: function(id, args) {
                 this.write(id + ": Global Event End.", args);
                 if (state === 'global') {
                     flush(gStr);
                 }
        }
    };
    /* end global listener object */

    /* transaction event object */
    var tH = {
        write: function(s, args) {
                 tStr += "ID: " + s;
                 if (args) {
                    tStr += " " + "The arguments are: " + args;
                 }
                 tStr += "<br>";
               },
        start: function(id, args) {
                 this.write(id + ": Transaction Event Start.", args.start);
               },
        complete: function(id, o, args) {
                    this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
               },
        success: function(id, o, args) {
                   this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
                 },
        failure: function(id, o, args) {
                   this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
                 },
        end: function(id, args) {
                 this.write(id + ": Transaction Event End.", args.end);
                 flush(gStr + tStr);
        }
    };
    /* end transaction event object */

    /* Output the results to the DIV container */
    function flush(s) {
        d.set("innerHTML", s);

        if (state === 'global') {
            gStr = '';
        }
        else {
            gStr = '';
            tStr = '';
        }
    }

### Subscribe to the Global events

With the handler object `gH`

    // Notice the object context of "gH" is provided as the
    // third argument of <code>Y.on()</code>, to preserve the proper
    // context of 'this' as used in <code>gH's</code> methods.

    /* Subscribe to the global events */
    Y.on('io:start', gH.start, gH, 'global foo');
    Y.on('io:complete', gH.complete, gH, 'global bar');
    Y.on('io:success', gH.success, gH, 'global baz');
    Y.on('io:failure', gH.failure, gH);
    Y.on('io:end', gH.end, gH, 'global boo');
    /* End event subscription */

### Assemble a Configuration Object to set Transaction Event Listeners

Use a configuration object to define which Transaction Events you wish to handle, for the specific transaction.

    /* Configuration object for setting Transaction Events */
    var cfg = {
        on: {
            start: tH.start,
            complete: tH.complete,
            success: tH.success,
            failure: tH.failure,
            end: tH.end
        },
        context: tH,
        arguments: {
                   start: 'foo',
                   complete: 'bar',
                   success: 'baz',
                   failure: 'Oh no!',
                   end: 'boo'
                   }
    };

### Initiate the Transaction

Finally, we set up two buttons -- one for each type of transaction -- and add a "click" listener to each of them. The handler -- function `call()` -- make an IO request, based on which button was clicked.

    function call(e, b) {
        if (b) {
            state = 'all';
        }
        else {
            state = 'global';
        }

        Y.io('../assets/io/get.txt', cfg);
    }

    Y.on('click', call, "#get1", this, false);
    Y.on('click', call, "#get2", this, true);

#### Full Code

The full JavaScript code for this example follows:

    <div id="container">
        <ul>
            <li>IO GET response data will appear here.</li>
        </ul>
    </div>
    <form>
        <input id="get1" type="button" value="GET with Global Listeners. " />
        <input id="get2" type="button" value="GET with Global and Transaction Listeners" />
    </form>

    <script>
    YUI().use("io-base", "node",

        function(Y) {

            //Get a reference to the DIV that we are using
            //to report results.
            var d = Y.one('#container'),
                gStr = '',
                tStr = '',
                state;

            /* global listener object */
            var gH = {
                write: function(s, args) {
                         gStr += "ID: " + s;
                         if (args) {
                            gStr += " " + "The globally-defined arguments are: " + args;
                         }
                         gStr += "<br>";
                },
                start: function(id) {
                         // When transaction listeners are handled, its user-defined arguments
                         // are accessible in the arguments collection.  The following detection
                         // logic determines whether the output should account for transaction
                         // arguments.
                         args = state === 'global' ? arguments[1] : arguments[2];
                         this.write(id + ": Global Event Start.", args);
                },
                complete: function(id, o) {
                         args = state === 'global' ? arguments[2] : arguments[3];
                         this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
                },
                success: function(id, o) {
                          args = state === 'global' ? arguments[2] : arguments[3];
                          this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
                },
                failure: function(id, o) {
                          args = state === 'global' ? arguments[2] : arguments[3];
                          this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
                },
                end: function(id) {
                         args = state === 'global' ? arguments[1] : arguments[2];
                         this.write(id + ": Global Event End.", args);
                         if (state === 'global') {
                             flush(gStr);
                         }
                }
            };
            /* end global listener object */

            /* transaction event object */
            var tH = {
                write: function(s, args) {
                         tStr += "ID: " + s;
                         if (args) {
                            tStr += " " + "The arguments are: " + args;
                         }
                         tStr += "<br>";
                       },
                start: function(id, args) {
                         this.write(id + ": Transaction Event Start.", args.start);
                       },
                complete: function(id, o, args) {
                            this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
                       },
                success: function(id, o, args) {
                           this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
                         },
                failure: function(id, o, args) {
                           this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
                         },
                end: function(id, args) {
                         this.write(id + ": Transaction Event End.", args.end);
                         flush(gStr + tStr);
                }
            };
            /* end transaction event object */

            /* Output the results to the DIV container */
            function flush(s) {
                d.set("innerHTML", s);
                if (state === 'global') {
                    gStr = '';
                }
                else {
                    gStr = '';
                    tStr = '';
                }
            }

            /* attach global listeners */
            Y.on('io:start', gH.start, gH, 'global foo');
            Y.on('io:complete', gH.complete, gH, 'global bar');
            Y.on('io:success', gH.success, gH, 'global baz');
            Y.on('io:failure', gH.failure, gH);
            Y.on('io:end', gH.end, gH, 'global boo');
            /* end global listener binding */

            /* configuration object for transactions */
            var cfg = {
                on: {
                    start: tH.start,
                    complete: tH.complete,
                    success: tH.success,
                    failure: tH.failure,
                    end: tH.end
                },
                context: tH,
                headers: { 'X-Transaction': 'GET Example'},
                arguments: {
                           start: 'foo',
                           complete: 'bar',
                           success: 'baz',
                           failure: 'Oh no!',
                           end: 'boo'
                           }
            };
            /* end configuration object */

            function call(e, b) {
                if (b) {
                    state = 'all';
                }
                else {
                    state = 'global';
                }

                Y.io('../assets/io/get.txt', cfg);
            }

            Y.on('click', call, "#get1", Y, false);
            Y.on('click', call, "#get2", Y, true);
        });
    </script>