<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: HTTP GET to request data</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: HTTP GET to request data</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><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">
<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>
</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>
<pre class="code prettyprint">//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.
} );</pre>
<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 <code><div id="container"></code>.
</p>
<pre class="code prettyprint">//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 = '';
}
}</pre>
<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>
<pre class="code prettyprint">// 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 */</pre>
<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>
<pre class="code prettyprint">/* 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'
}
};</pre>
<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>
<pre class="code prettyprint">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);</pre>
<h4>Full Code</h4>
<p>The full JavaScript code for this example follows:</p>
<pre class="code prettyprint"><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></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Use IO to request data over HTTP.">
<a href="get.html">HTTP GET to request data</a>
</li>
<li data-description="Use IO to request XML data from a remote web service.">
<a href="weather.html">Request XML data from Yahoo! Weather</a>
</li>
<li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
<a href="xdr.html">Request JSON using Yahoo! Pipes</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
<a href="../overlay/overlay-io-plugin.html">IO Plugin</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/io',
name: 'get',
title: 'HTTP GET to request data',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('get');
YUI.Env.Tests.examples.push('weather');
YUI.Env.Tests.examples.push('xdr');
YUI.Env.Tests.examples.push('overlay-io-plugin');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>