sandbox/yui/xhr.html

	xhr.html revision 1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Connection Manager GET Transaction</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<script type="text/javascript" src="/build/yui.js"></script>
<script type="text/javascript" src="/build3x/dump/dump.js"></script>
<script type="text/javascript" src="/build3x/io/io.js"></script>

<!--begin custom header content for this example-->
<style>
#container li {margin-left:2em;}
</style>


<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Connection Manager GET Transaction</h1>

<div class="exampleIntro">
	<p>To create a GET transaction using <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a>, you will need to construct a querystring of key-value pairs and append it to the URL.
The following code example provides a step-by-step approach to creating a simple GET transaction.</p>

<p>Click "Send a GET Request" below to try it out, then read the description below to learn how to create a simple transaction using Connection Manager.</p>
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="container"></div>

<script>

var Y = YUI().use('dump', 'io');
var div = Y.get('#container');

var handleSuccess = function(id, o){

	Y.log("The success handler was called.  tId: " + Y.Lang.dump(Y.Array(arguments)) + ".", "info", "example");

	if(o.responseText !== undefined){
		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
		div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
		div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
		// div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
						 // " [bar] => " + o.argument.bar +" )</li>";
	}
}

var handleFailure = function(id, o){

		Y.log("The failure handler was called.  tId: " + o.tId + ".", "info", "example");

	if(o.responseText !== undefined){
		div.innerHTML = "<ul><li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li></ul>";
	}
}

var callback =
{
  on: {
      success:handleSuccess,
      failure:handleFailure
  },
  argument: { foo:"foo", bar:"bar" }
};

var sUrl = "assets/get.php?username=anonymous&userid=0";

function makeRequest(){
	var request = Y.io(sUrl, callback, 'asd');
	Y.log("Initiating request; tId: " + Y.Lang.dump(request) + ".", "info", "example");

}

Y.on('io:success', function() {
    Y.log('global: ' + Y.Lang.dump(Y.Array(arguments)));
});;

Y.log("As you interact with this example, relevant steps in the process will be logged here.", "info", "example");

</script>
<form><input type="button" value="Send a GET Request" onClick="makeRequest();"></form>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>