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