YUI 3.x Home -

YUI Library Examples: IO: POST Transaction

IO: POST Transaction

POSTing data to a server using YUI's IO utility is a simple process. Click "Send a POST Request" below to try it out, then read the description below to learn how it's done.

View example in new window.

  • IO POST response data will appear here.

Using io to Send Data and Receive the Server Response via HTTP POST

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.
} );

Assemble a Configuration Object for a POST Transaction

The IO configuration object support allows you to designate the transaction method (POST in this case) and other information, including data that should be sent as the POST body:

  1. /* Configuration object for POST transaction */
  2. var cfg = {
  3.     method: "POST",
  4.     data: "user=YDN&password=API",
  5.     headers: { 'X-Transaction': 'POST Example'}
  6. };
/* Configuration object for POST transaction */
var cfg = {
    method: "POST",
    data: "user=YDN&password=API",
    headers: { 'X-Transaction': 'POST Example'}
};

Create Handlers to Process Successful and Unsuccessful Transactions

Our handlers for the events that fire on successful and unsuccessful responses will write out information about the transaction to the innerHTML of an element on the page:

  1. //Get a reference to the Node that we are using to report results:
  2. var div = Y.Node.get('#container');
  3.  
  4. //A function handler to use for successful requests:
  5. var handleSuccess = function(ioId, o){
  6.     Y.log(arguments);
  7.     Y.log("The success handler was called.  Id: " + ioId + ".", "info", "example");
  8.  
  9.     if(o.responseText !== undefined){
  10.         var s = "<li>Transaction id: " + ioId + "</li>";
  11.         s += "<li>HTTP status: " + o.status + "</li>";
  12.         s += "<li>Status code message: " + o.statusText + "</li>";
  13.         s += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders() + "</ul></li>";
  14.         s += "<li>PHP response: " + o.responseText + "</li>";
  15.         div.set("innerHTML", s);
  16.     }
  17. };
  18.  
  19. //A function handler to use for failed requests:
  20. var handleFailure = function(ioId, o){
  21.     Y.log("The failure handler was called.  Id: " + ioId + ".", "info", "example");
  22.  
  23.     if(o.responseText !== undefined){
  24.         var s = "<li>Transaction id: " + ioId + "</li>";
  25.         s += "<li>HTTP status: " + o.status + "</li>";
  26.         s += "<li>Status code message: " + o.statusText + "</li>";
  27.         div.set("innerHTML", s);
  28.     }
  29. };
  30.  
  31. //Subscribe our handlers to IO's global custom events:
  32. Y.on('io:success', handleSuccess);
  33. Y.on('io:failure', handleFailure);
//Get a reference to the Node that we are using to report results:
var div = Y.Node.get('#container');
 
//A function handler to use for successful requests:
var handleSuccess = function(ioId, o){
    Y.log(arguments);
    Y.log("The success handler was called.  Id: " + ioId + ".", "info", "example");
 
    if(o.responseText !== undefined){
        var s = "<li>Transaction id: " + ioId + "</li>";
        s += "<li>HTTP status: " + o.status + "</li>";
        s += "<li>Status code message: " + o.statusText + "</li>";
        s += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders() + "</ul></li>";
        s += "<li>PHP response: " + o.responseText + "</li>";
        div.set("innerHTML", s);
    }
};
 
//A function handler to use for failed requests:
var handleFailure = function(ioId, o){
    Y.log("The failure handler was called.  Id: " + ioId + ".", "info", "example");
 
    if(o.responseText !== undefined){
        var s = "<li>Transaction id: " + ioId + "</li>";
        s += "<li>HTTP status: " + o.status + "</li>";
        s += "<li>Status code message: " + o.statusText + "</li>";
        div.set("innerHTML", s);
    }
};
 
//Subscribe our handlers to IO's global custom events:
Y.on('io:success', handleSuccess);
Y.on('io:failure', handleFailure);

Initiate the POST Transaction

The final step in this example is to start the IO POST transaction when a button on the page is clicked. We have a button with an ID of requestButton; we wire that button to the IO request with the following code: 

  1. //Handler to make our XHR request when the button is clicked:
  2. function makeRequest(){
  3.  
  4.     div.set("innerHTML", "Loading data from new request...");
  5.  
  6.     var request = Y.io(sUrl, cfg);
  7.     Y.log("Initiating request; Id: " + request.id + ".", "info", "example");
  8.  
  9. }
  10.  
  11. // Make a request when the button is clicked:
  12. Y.on("click", makeRequest, "#requestButton");
//Handler to make our XHR request when the button is clicked:
function makeRequest(){
 
    div.set("innerHTML", "Loading data from new request...");
 
    var request = Y.io(sUrl, cfg);
    Y.log("Initiating request; Id: " + request.id + ".", "info", "example");
 
}
 
// Make a request when the button is clicked:
Y.on("click", makeRequest, "#requestButton");

Full Code

The full JavaScript code for this example follows:

  1. YUI({base:"../../build/", timeout: 10000}).use("io-base",
  2.  
  3. 	function(Y) {
  4.  
  5. 		//Get a reference to the Node that we are using
  6. 		//to report results:
  7. 		var div = Y.Node.get('#container');
  8.  
  9. 		//A function handler to use for successful requests:
  10. 		var handleSuccess = function(ioId, o){
  11. 			Y.log(arguments);
  12. 			Y.log("The success handler was called.  Id: " + ioId + ".", "info", "example");
  13.  
  14. 			if(o.responseText !== undefined){
  15. 				var s = "<li>Transaction id: " + ioId + "</li>";
  16. 				s += "<li>HTTP status: " + o.status + "</li>";
  17. 				s += "<li>Status code message: " + o.statusText + "</li>";
  18. 				s += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders() + "</ul></li>";
  19. 				s += "<li>PHP response: " + o.responseText + "</li>";
  20. 				div.set("innerHTML", s);
  21. 			}
  22. 		};
  23.  
  24. 		//A function handler to use for failed requests:
  25. 		var handleFailure = function(ioId, o){
  26. 			Y.log("The failure handler was called.  Id: " + ioId + ".", "info", "example");
  27.  
  28. 			if(o.responseText !== undefined){
  29. 				var s = "<li>Transaction id: " + ioId + "</li>";
  30. 				s += "<li>HTTP status: " + o.status + "</li>";
  31. 				s += "<li>Status code message: " + o.statusText + "</li>";
  32. 				div.set("innerHTML", s);
  33. 			}
  34. 		};
  35.  
  36. 		//Subscribe our handlers to IO's global custom events:
  37. 		Y.on('io:success', handleSuccess);
  38. 		Y.on('io:failure', handleFailure);
  39.  
  40.  
  41. 		/* Configuration object for POST transaction */
  42. 		var cfg = {
  43. 			method: "POST",
  44. 			data: "user=YDN&password=API",
  45. 			headers: { 'X-Transaction': 'POST Example'},
  46. 		};
  47.  
  48. 		//The URL of the resource to which we're POSTing data:
  49. 		var sUrl = "(assets/)post.php";
  50.  
  51. 		//Handler to make our XHR request when the button is clicked:
  52. 		function makeRequest(){
  53.  
  54. 			div.set("innerHTML", "Loading data from new request...");
  55.  
  56. 			var request = Y.io(sUrl, cfg);
  57. 			Y.log("Initiating request; Id: " + request.id + ".", "info", "example");
  58.  
  59. 		}
  60.  
  61. 		// Make a request when the button is clicked:
  62. 		Y.on("click", makeRequest, "#requestButton");
  63.  
  64. 		Y.log("As you interact with this example, relevant steps in the process will be logged here.", "info", "example");
  65. 	}
  66. );
YUI({base:"../../build/", timeout: 10000}).use("io-base",
 
	function(Y) {
 
		//Get a reference to the Node that we are using
		//to report results:
		var div = Y.Node.get('#container');
 
		//A function handler to use for successful requests:
		var handleSuccess = function(ioId, o){
			Y.log(arguments);
			Y.log("The success handler was called.  Id: " + ioId + ".", "info", "example");
 
			if(o.responseText !== undefined){
				var s = "<li>Transaction id: " + ioId + "</li>";
				s += "<li>HTTP status: " + o.status + "</li>";
				s += "<li>Status code message: " + o.statusText + "</li>";
				s += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders() + "</ul></li>";
				s += "<li>PHP response: " + o.responseText + "</li>";
				div.set("innerHTML", s);
			}
		};
 
		//A function handler to use for failed requests:
		var handleFailure = function(ioId, o){
			Y.log("The failure handler was called.  Id: " + ioId + ".", "info", "example");
 
			if(o.responseText !== undefined){
				var s = "<li>Transaction id: " + ioId + "</li>";
				s += "<li>HTTP status: " + o.status + "</li>";
				s += "<li>Status code message: " + o.statusText + "</li>";
				div.set("innerHTML", s);
			}
		};
 
		//Subscribe our handlers to IO's global custom events:
		Y.on('io:success', handleSuccess);
		Y.on('io:failure', handleFailure);
 
 
		/* Configuration object for POST transaction */
		var cfg = {
			method: "POST",
			data: "user=YDN&password=API",
			headers: { 'X-Transaction': 'POST Example'},
		};
 
		//The URL of the resource to which we're POSTing data:
		var sUrl = "(assets/)post.php";
 
		//Handler to make our XHR request when the button is clicked:
		function makeRequest(){
 
			div.set("innerHTML", "Loading data from new request...");
 
			var request = Y.io(sUrl, cfg);
			Y.log("Initiating request; Id: " + request.id + ".", "info", "example");
 
		}
 
		// Make a request when the button is clicked:
		Y.on("click", makeRequest, "#requestButton");
 
		Y.log("As you interact with this example, relevant steps in the process will be logged here.", "info", "example");
	}
);

More IO Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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