Demo

Left

Center

Status: None



Right

Footer


json.php
<?php
header('Content-type: application/json');
echo '{';
foreach ($_REQUEST as $k => $v)
	echo '"'.$k.'":"'.$v.'",';
echo '"x":"end"}';
?>

error.php
<?php
header("HTTP/1.0 503 Service Not Available");echo 'Server side error';
exit();
?>

timeout.php
<?php
sleep(3);
?>

demo.php
<!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>Demo</title>
    <style type="text/css">
	@import "http://o.aolcdn.com/dojo/1.2/dijit/themes/tundra/tundra.css";
	@import "http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css";
body
{
	font-family:verdana,arial,sans-serif;
	width:1024px;
	height:768px;
	padding:0;
	margin:0;
}
#dHeader,#dFooter 
{
	width:100%;
	height:50px;
	padding:25px 0;
	background-color:#aaa;
}
#dMain
{
	width:100%;
	height:500px;
}
#dLeft,#dRight
{
	width:25%;
	height:100%;
	float:left;
	background-color:#ccc;
}
#dCenter
{
	width:480px;
	padding:10px;
	height:468px;
	float:left;
	border:6px solid #000;
	background-color:#eee;
}
#dSource
{
	margin:25px;
}
h1,h2,label,span
{
	padding:15px;
}
.break
{
	float:none;
	clear:both;
	height:1.2em;
}
hr
{
	color:#222;
	margin:1.0em 0; 
}
pre
{
	border: 1px solid #777;
}
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js"
	djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
	dojo.require("dojo.parser");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.form.Form");
	dojo.require("dijit.form.ValidationTextBox");
    </script>
</head>
<body class="tundra">
	<div id="dHeader"><h1>Demo</h1></div>
	<div id="dMain">
	<div id="dLeft"><h2>Left</h2></div>
	<div id="dCenter">
	<h2>Center</h2>

	<p>Status: <span id="spStatus" name="spStatus">None</span></p>
	
	<hr />

	<button dojoType="dijit.form.Button" name="btnCount" id="btnCount" onclick="Count();">Count</button>

	<hr />

	<form dojoType="dijit.form.Form" name="frmDemo" id="frmDemo">
		<label for="sText">Text
		<input type="text" name="sText" id="sText" class="medium" 
			value="<?=isset($_REQUEST['sText'])?$_REQUEST['sText']:''?>"
			dojoType="dijit.form.ValidationTextBox"
			regExp="[\w]+"
			required="true"
			invalidMessage="Invalid"
			promptMessage="Please enter some text"
			errorMessage="Error">
		</label>
		<div class="break"></div>
		<button dojoType="dijit.form.Button" name="btnGo" id="btnGo" onclick="Go('json.php');">Go</button>
		<button dojoType="dijit.form.Button" name="btnGoError" id="btnGoError" onclick="Go('error.php');">Go Error</button>
		<button dojoType="dijit.form.Button" name="btnGoTimeout" id="btnGoTimeout" onclick="Go('timeout.php');">Go Timeout</button>
	</form>
	</div>
	<div id="dRight"><h2>Right</h2></div>
	</div>
	<div id="dFooter"><h3>Footer</h3></div>
	<div id="dSource">
	<?php
        $aServerSideFiles=array('json.php','error.php','timeout.php','demo.php');
        foreach ($aServerSideFiles as $k => $v)
        {
                echo '<br /><strong>'.$v.'</strong><br />'."\n";
                echo '<pre>'.htmlentities(file_get_contents($v)).'</pre>'."\n";
        }
        ?>
	</div>
</body>
<script>
var i,iGlobal=7;
function Count()
{
	console.debug('Count to '+iGlobal);
	for (i=0;i<iGlobal;i++)
		dojo.byId('spStatus').innerHTML='Counting: '+i;
	console.debug('End Count');
}
function Go(sURL) {
	dojo.byId('spStatus').innerHTML='Waiting ...';
	var ajax = {
		form: dojo.byId("frmDemo"),
		url: sURL,
		handleAs:"json",
		load: function(response){
			dijit.byId('frmDemo').attr('value',response);
			dojo.byId('spStatus').innerHTML='Received response';
		},
		error: function(data){
			if (typeof data.status != 'undefined')
				sMsg='Error: '+data.status+': '+data.responseText;
			else
				sMsg='Timeout/no response';
			dojo.byId('spStatus').innerHTML=sMsg;
		},
		timeout: 2000
		};
	dojo.xhrPost(ajax);
}
</script>
</html>