YUI Library Examples: Connection Manager: Connection Manager POST Transaction

Using Connection Manager to Post Data and Receive the Server Response via HTTP POST

Source file and dependencies

Load the Yahoo Global Object and Connection Manager source files:


1	<script src="yahoo.js"></script>
2	<script src="event.js"></script>
3	<script src="connection.js"></script>
	view plain \| print \| ?

Assemble the POST message

Construct an example of key-value string of username = anonymous and userid = 0:


1	/*
2	* Remember to encode the key-value string if and when
3	* the string contains special characters.
4	*/
5	var postData = "username=anonymous&userid=0";
	view plain \| print \| ?

The Callback Object

Create a callback object to handle the response and pass an array of values to success and failure as the argument.


1	var handleSuccess = function(o){
2
3	if(o.responseText !== undefined){
4	div.innerHTML = "Transaction id: " + o.tId;
5	div.innerHTML += "HTTP status: " + o.status;
6	div.innerHTML += "Status code message: " + o.statusText;
7	div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
8	div.innerHTML += "PHP response: " + o.responseText;
9	div.innerHTML += "Argument object: " + o.argument;
10	}
11	}
12
13	var callback =
14	{
15	success:handleSuccess,
16	failure: handleFailure,
17	argument: ['foo','bar']
18	};
	view plain \| print \| ?

Initiate the POST Transaction

Call YAHOO.util.Connect.asyncRequest to send the request to post.php, and the PHP script will return the readable output of $_POST via print_r(). The handleSuccess callback will print the response object's properties, including the server response data.


1	var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 42ms (+15) 8:02:52 AM:
LogReader  instance0
LogReader initialized

INFO 27ms (+1) 8:02:52 AM:

Get

Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 26ms (+0) 8:02:52 AM:

Get

attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 26ms (+23) 8:02:52 AM:
Get
_next: q0, loaded: undefined

INFO 3ms (+3) 8:02:52 AM:

example

As you interact with this example, relevant steps in the process will be logged here.

INFO 0ms (+0) 8:02:52 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.