get.mustache revision 7dc244d17dfc7119d0f4d4d62604cf189a94e6fa
<style type="text/css" scoped>
#container li {margin-left:2em;}
#container { background-color:#FFFFFF; border:1px dotted #666666; padding:1em; margin-bottom:1em;}
</style>
<div class="intro">
<p>This example demonstrates how to send HTTP GET requests using <a href="http://developer.yahoo.com/yui/3/io/" title="YUI 3: IO">YUI 3's IO module</a>. One transaction uses global event listeners to handle the transaction's lifecycle and response. The other transaction uses both global and transaction-level events.</p>
</div>
<div class="example">
{{>io-get-source}}
</div>
<h2 class="first">Using IO for HTTP GET Requests, and Handling the Response via Event Listeners.</h2>
<h3>Create a YUI Instance</h3>
<p>We create a YUI instance and use <code>io-base</code> for this example, since we only need to basic IO functionality:</p>
```
//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.
} );
```
<h3>Create Handlers for Global and Transaction Events</h3>
<p>
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">`.
</p>
```
//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 = '';
}
}
```
<h3>Subscribe to the Global events</h3>
<p>With the handler object <code>gH</code defined, we can now subscribe to the Global events.</p>
```
// 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:complete', gH.complete, gH, 'global bar');
Y.on('io:success', gH.success, gH, 'global baz');
Y.on('io:failure', gH.failure, gH);
/* End event subscription */
```
<h3>Assemble a Configuration Object to set Transaction Event Listeners</h3>
<p>Use a configuration object to define which Transaction Events you wish to handle, for the specific transaction.</p>
```
/* 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'
}
};
```
<h3>Initiate the Transaction</h3>
<p>
Finally, we set up two buttons -- one for each type of transaction -- and add a "click" listener to each of them. The handler -- function <code>call()</code> -- make an
IO request, based on which button was clicked.
</p>
```
function call(e, b) {
if (b) {
state = 'all';
}
else {
state = 'global';
}
}
Y.on('click', call, "#get1", this, false);
Y.on('click', call, "#get2", this, true);
```
<h4>Full Code</h4>
<p>The full JavaScript code for this example follows:</p>
```
{{>io-get-source}}
```