YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: IO: POST Transaction

Note: This is YUI 3.x. Looking for YUI 2.x?

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

### 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'}, };

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

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

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

Copyright © 2009 Yahoo! Inc. All rights reserved.

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