YUI Library Examples: IO: GET Transaction

+ +

IO: GET Transaction

+ + + +

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

+ +

Create a YUI Instance

Create a YUI instance, using IO, for this example:

+ + + +

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 we are using
+//to report results.
+var d = document.getElementById('container');
+
+/* global listener object */
+var gH = {
+	write: function(str, args) {
+			 d.innerHTML += "ID: " + str;
+			 if (args) {
+			 	d.innerHTML += " " + "The arguments are: " + args;
+			 }
+			 d.innerHTML += "<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);
+	}
+}
+/* end global listener object */
+
+/* transaction event object */
+var tH = {
+	write: function(str, args) {
+			 d.innerHTML += "ID: " + str;
+			 if (args) {
+			   d.innerHTML += " " + "The arguments are: " + args;
+			 }
+			 d.innerHTML += "<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);
+	}
+}
+/* end transaction event object */
+

+ +

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.

+ + + +

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. +

+ + + +

Full Code

+ +

The full JavaScript code for this example follows:

+ +

+YUI({base:"../../build/", timeout: 10000}).use("io",
+
+	function(Y) {
+
+		//Get a reference to the DIV that we are using
+		//to report results.
+		var d = document.getElementById('container');
+
+		/* global listener object */
+		var gH = {
+			write: function(str, args) {
+					 d.innerHTML += "ID: " + str;
+					 if (args) {
+					 	d.innerHTML += " " + "The arguments are: " + args;
+					 }
+					 d.innerHTML += "<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.end);
+			}
+		}
+		/* end global listener object */
+
+		/* transaction event object */
+		var tH = {
+			write: function(str, args) {
+					 d.innerHTML += "ID: " + str;
+					 if (args) {
+					 	d.innerHTML += " " + "The arguments are: " + args;
+					 }
+					 d.innerHTML += "<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);
+			}
+		}
+		/* end transaction event object */
+
+		/* 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.abort, 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) {
+				Y.io('assets/get.php?user=YDN&allListeners=1', cfg);
+			}
+			else {
+				Y.io('assets/get.php?user=YDN&globalListeners=1');
+			}
+		}
+
+		Y.on('click', call, "#get1", this, false);
+		Y.on('click', call, "#get2", this, true);
+	});
+

YUI Library Examples: IO: GET Transaction

IO: GET Transaction

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

Create a YUI Instance

Create Handlers for Global and Transaction Events.

Subscribe to the Global events

Assemble a Configuration Object to set Transaction Event Listeners

Initiate the Transaction

Full Code

+ IO Examples:

More IO Resources: