YUI 3.x Home -

YUI Library Examples: IO: GET Transaction

IO: GET Transaction

This example demonstrates how to send HTTP GET requests, using IO. One transaction uses Global event listeners to handle the transaction lifecycles and response. The other transaction uses both Global and Transaction events.

View example in new window.

  • IO GET response data will appear here.

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:

  1. //Create a YUI instance including support for IO:
  2. YUI({base:"../../build/", timeout: 10000}).use("io-base", function(Y) {
  3. 	// Y is the YUI instance.
  4. 	// The rest of the following code is encapsulated in this
  5. 	// anonymous function.
  6. } );
//Create a YUI instance including support for IO:
YUI({base:"../../build/", timeout: 10000}).use("io-base", 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">. 

  1. //Get a reference to the DIV we are using
  2. //to report results.
  3. var d = document.getElementById('container');
  4.  
  5. /* global listener object */
  6. var gH = {
  7. 	write: function(str, args) {
  8. 			 d.innerHTML += "ID: " + str;
  9. 			 if (args) {
  10. 			 	d.innerHTML += " " + "The arguments are: " + args;
  11. 			 }
  12. 			 d.innerHTML += "<br>";
  13. 	},
  14. 	start: function(id, args) {
  15. 			 this.write(id + ": Global Event Start.", args);
  16. 	},
  17. 	complete: function(id, o, args) {
  18. 				this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
  19.     },
  20. 	success: function(id, o, args) {
  21. 			   this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
  22.     },
  23. 	failure: function(id, o, args) {
  24. 			   this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
  25.     },
  26. 	end: function(id, args) {
  27. 			 this.write(id + ": Global Event End.", args);
  28. 	}
  29. }
  30. /* end global listener object */
  31.  
  32. /* transaction event object */
  33. var tH = {
  34. 	write: function(str, args) {
  35. 			 d.innerHTML += "ID: " + str;
  36. 			 if (args) {
  37. 			   d.innerHTML += " " + "The arguments are: " + args;
  38. 			 }
  39. 			 d.innerHTML += "<br>";
  40. 	},
  41. 	start: function(id, args) {
  42. 			 this.write(id + ": Transaction Event Start.", args.start);
  43. 	},
  44. 	complete: function(id, o, args) {
  45. 				this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
  46. 	},
  47. 	success: function(id, o, args) {
  48. 			   this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
  49. 	},
  50. 	failure: function(id, o, args) {
  51. 			   this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
  52. 	},
  53. 	end: function(id, args) {
  54. 			 this.write(id + ": Transaction Event End.", args.end);
  55. 	}
  56. }
  57. /* end transaction event object */
//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 

  1. // Notice the object context of "gH" is provided as the
  2. // third argument of <code>Y.on()</code>, to preserve the proper
  3. // context of 'this' as used in <code>gH's</code> methods.
  4.  
  5. /* Subscribe to the global events */
  6. Y.on('io:start', gH.start, gH, 'global foo');
  7. Y.on('io:complete', gH.complete, gH, 'global bar');
  8. Y.on('io:success', gH.success, gH, 'global baz');
  9. Y.on('io:failure', gH.failure, gH);
  10. Y.on('io:end', gH.end, gH, 'global boo');
  11. /* End event subscription */
// 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.

  1. /* Configuration object for setting Transaction Events */
  2. var cfg = {
  3. 	on: {
  4. 		start: tH.start,
  5. 		complete: tH.complete,
  6. 		success: tH.success,
  7. 		failure: tH.failure,
  8. 		end: tH.end
  9. 	},
  10. 	context: tH,
  11. 	headers: { 'X-Transaction': 'GET Example'},
  12. 	arguments: {
  13. 			   start: 'foo',
  14. 			   complete: 'bar',
  15. 			   success: 'baz',
  16. 			   failure: 'Oh no!',
  17. 			   end: 'boo'
  18. 			   }
  19. };
/* 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,
	headers: { 'X-Transaction': 'GET Example'},
	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. 

  1. function call(e, b) {
  2. 	if (b) {
  3. 		Y.io('(assets/)get.php?user=YDN&allListeners=1', cfg);
  4. 	}
  5. 	else {
  6. 		Y.io('(assets/)get.php?user=YDN&globalListeners=1');
  7. 	}
  8. }
  9.  
  10. Y.on('click', call, "#get1", this, false);
  11. Y.on('click', call, "#get2", this, true);
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);

Full Code

The full JavaScript code for this example follows:

  1. YUI({base:"../../build/", timeout: 10000}).use(("io")>,
  2.  
  3. 	function(Y) {
  4.  
  5. 		//Get a reference to the DIV that we are using
  6. 		//to report results.
  7. 		var d = document.getElementById('container');
  8.  
  9. 		/* global listener object */
  10. 		var gH = {
  11. 			write: function(str, args) {
  12. 					 d.innerHTML += "ID: " + str;
  13. 					 if (args) {
  14. 					 	d.innerHTML += " " + "The arguments are: " + args;
  15. 					 }
  16. 					 d.innerHTML += "<br>";
  17. 				   },
  18. 			start: function(id, args) {
  19. 					 this.write(id + ": Global Event Start.", args);
  20. 				   },
  21. 			complete: function(id, o, args) {
  22. 						this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
  23. 				   },
  24. 			success: function(id, o, args) {
  25. 					   this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
  26. 					 },
  27. 			failure: function(id, o, args) {
  28. 					   this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
  29. 					 },
  30. 			end: function(id, args) {
  31. 					 this.write(id + ": Global Event End.", args.end);
  32. 			}
  33. 		}
  34. 		/* end global listener object */
  35.  
  36. 		/* transaction event object */
  37. 		var tH = {
  38. 			write: function(str, args) {
  39. 					 d.innerHTML += "ID: " + str;
  40. 					 if (args) {
  41. 					 	d.innerHTML += " " + "The arguments are: " + args;
  42. 					 }
  43. 					 d.innerHTML += "<br>";
  44. 				   },
  45. 			start: function(id, args) {
  46. 					 this.write(id + ": Transaction Event Start.", args.start);
  47. 				   },
  48. 			complete: function(id, o, args) {
  49. 						this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
  50. 				   },
  51. 			success: function(id, o, args) {
  52. 					   this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
  53. 					 },
  54. 			failure: function(id, o, args) {
  55. 					   this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
  56. 					 },
  57. 			end: function(id, args) {
  58. 					 this.write(id + ": Transaction Event End.", args.end);
  59. 			}
  60. 		}
  61. 		/* end transaction event object */
  62.  
  63. 		/* attach global listeners */
  64. 		Y.on('io:start', gH.start, gH, 'global foo');
  65. 		Y.on('io:complete', gH.complete, gH, 'global bar');
  66. 		Y.on('io:success', gH.success, gH, 'global baz');
  67. 		Y.on('io:failure', gH.failure, gH);
  68. 		Y.on('io:end', gH.abort, gH, 'global boo');
  69. 		/* end global listener binding */
  70.  
  71. 		/* configuration object for transactions */
  72. 		var cfg = {
  73. 			on: {
  74. 				start: tH.start,
  75. 				complete: tH.complete,
  76. 				success: tH.success,
  77. 				failure: tH.failure,
  78. 				end: tH.end
  79. 			},
  80. 			context: tH,
  81. 			headers: { 'X-Transaction': 'GET Example'},
  82. 			arguments: {
  83. 					   start: 'foo',
  84. 					   complete: 'bar',
  85. 					   success: 'baz',
  86. 					   failure: 'Oh no!',
  87. 					   end: 'boo'
  88. 					   }
  89. 		};
  90. 		/* end configuration object */
  91.  
  92. 		function call(e, b) {
  93. 			if (b) {
  94. 				Y.io('(assets/)get.php?user=YDN&allListeners=1', cfg);
  95. 			}
  96. 			else {
  97. 				Y.io('(assets/)get.php?user=YDN&globalListeners=1');
  98. 			}
  99. 		}
  100.  
  101. 		Y.on('click', call, "#get1", this, false);
  102. 		Y.on('click', call, "#get2", this, true);
  103. 	});
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);
	});

More IO Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings