--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/io/get.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,588 @@
+<!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>