YUI 3.x Home -

Site Search (YDN & YUIBlog):

# 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:

    //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 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 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:

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

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

/* 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:

    //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);

    //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);

//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:

    //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");

    //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");

//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:

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

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

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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