<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/DUI.js"></script>
<script type="text/javascript" src="js/Stream.js"></script>
<style type="text/css">
body{font-family:arial,helvetica,sans-serif;}
h1, h2, h3 {text-align:center;}
.column {width:50%; float:left;}
#stream {border: 4px solid #90B557; margin: 0pt auto; padding: 4px; width: 300px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #ecffe1;}
#normal {border: 4px solid #5481AC; margin: 0pt auto; padding: 4px; width: 300px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #edf2ff;}
</style>
</head>
<body>
<h1>DUI.Stream: Better living through MXHR</h1>
<h3>10 chunks of 10 paragraphs of Lorem Ipsum each</h3>
<div class="column">
<h2>MXHR Stream</h2>
<div id="stream"></div>
</div>
<div class="column">
<h2>Normal</h2>
<div id="normal"></div>
</div>
<script type="text/javascript">
//COME WITH ME IF YOU WANT TO LIVE
var s = new DUI.Stream();
var content = '';
s.listen('text/html', function(payload) {
content += payload;
});
s.listen('complete', function() {
$('#stream').append('<p>Stream took: ' + ((new Date).getTime() - streamStart) + 'ms</p>' + content);
var normalStart = (new Date).getTime();
for(var i = 0; i < 9; i++) {
$.ajax({
'url': 'loremIpsum.html',
'async': true,
'type': 'GET',
'dataType': 'html',
'success' : function(html) {
$('#normal').append(html);
}
});
}
$.ajax({
'url': 'loremIpsum.html',
'async': true,
'type': 'GET',
'dataType': 'html',
'success' : function(html) {
$('#normal').append(html);
$('#normal').prepend('<p>Normal took: ' + ((new Date).getTime() - normalStart) + 'ms</p>');
}
});
});
var streamStart = (new Date).getTime();
s.load('testStreamData.php');
</script>
</body>
</html>