mootools

References to Documentation

1. Native/Element.js#$
2. Remote/Ajax.js
3. Native/Element.js#Element.removeClass
4. Core/Core.js#$time
5. Core/Core.js#$random
6. Native/Element.js#Element.addClass
7. Element.js#Element.empty
8. Native/Element.js#Element.setStyle
9. Core/Core.js#$clear
10. Native/Function.js#Function.periodical

var url = 'http://demos.mootools.net/demos/Ajax_Timed/ajax_timed.php';
 
// refresh every 4 seconds
var timer = 4; 
// periodical and dummy variables for later use
var periodical, dummy; 
var start = $('start'), stop = $('stop'), log = $('log_res');
 
/* our ajax istance */
var ajax = new Ajax(url, { 
	update: log,
	method: 'get',
	onComplete: function() {
		// when complete, we remove the spinner
		log.removeClass('ajax-loading'); 
	},
	onCancel: function() {
		// when we stop timed ajax while it's requesting
		// we forse to cancel the request, so here we
		// just remove the spinner
		log.removeClass('ajax-loading'); 
	}
});
 
/* our refresh function: it sets a dummy to prevent 
   caching of php and add the loader class */
var refresh = (function() {
	// dummy to prevent caching of php
	dummy = $time() + $random(0, 100);
	// we add out fancy spinner
	log.empty().addClass('ajax-loading');
	// requests of our php plus dummy as query
	ajax.request(dummy); 
}); 
 
// start and stop click events
start.addEvent('click', function(e) {
	// prevent default
	new Event(e).stop(); 
	// prevent insane clicks to start numerous requests
	$clear(periodical); 
 
	/* a bit of fancy styles */
	stop.setStyle('font-weight', 'normal');
	start.setStyle('font-weight', 'bold');
	log.empty().addClass('ajax-loading'); 
	/* ********************* */
 
	// the periodical starts here, the * 1000 is because milliseconds required
	periodical = refresh.periodical(timer * 1000, this); 
 
	// this is the first only request, later on will be only the periodical and refresh 
	// that do the request. If we don't do this way, we have to wait for 4 seconds before 
	// the first request.
	ajax.request($time()); 
});
 
stop.addEvent('click', function(e) {
	new Event(e).stop(); // prevent default;
 
	/* a bit of fancy styles 
	   note: we do not remove 'ajax-loading' class
             because it is already done by 'onCancel'
			 since we later do 'ajax.cancel()'
	*/
	start.setStyle('font-weight', 'normal');
	stop.setStyle('font-weight', 'bold');
	/* ********************* */
 
	// let's stop our timed ajax
	$clear(periodical); 
	// and let's stop our request in case it was waiting for a response
	ajax.cancel(); 
});

<h3>Timed Ajax</h3>
<p>Pressing <strong>start</strong> button the demo will start requesting <strong>ajax_timed.php</strong> 
every 4s. Technique used allow to prevent browsers from caching php, adding a dummy query formed
by $time() and a random number from 0 to 100. So the request ajax will be something like:</p>
<blockquote>
	<p>ajax_timed.php?1192651244265</p>
</blockquote>
<p class="last">Where 1192651244265 will change at every request. However, there are several ways to prevent caching.</p>
<p class="source"><a href="demos/Ajax_Timed/ajax_timed.phps">See ajax_timed.phps</a></p>
 
<div id="form_box">
	<ul>
		<li><a id="start" href="#">start</a></li>
		<li><a id="stop" href="#">stop</a></li>
	</ul>
</div>
<div id="log">
	<h3>Ajax Response</h3>
	<div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>

#demo ul li a {
	display: block;
	text-align: center;
	margin-bottom: 12px;
	width: 60px;
	height: 20px;
	background: #E4ECF2;
	border-color: #e4e4e4 #d6d6d6 #d6d6d6 #e4e4e4;
	border-style: solid;
	border-width: 1px;
	padding: 3px 5px;
	text-decoration: none;
}
 
#demo blockquote {
	background: #F9F9F9;
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	margin: 10px;
	padding: 5px;
	font-weight: bold;
	color: green;
	font-size: 100%;
	font-family: monospace;
}
 
#demo p.last { 
	margin-bottom: 1em; 
	padding-bottom: 1em;
	border-bottom: 1px solid #EEEEEE; 
}
 
#form_box {
	float: left;
	padding: 0.5em;
	margin-top: 3px;
	margin-bottom: 2px;
}
 
#form_box div {
	height: 25px;
	padding: 0.2em 0.5em;
}
 
#form_box div.hr {
	border-bottom: 2px solid #e2e2e1;
	height: 0px;
	margin-top: 0pt;
	margin-bottom: 7px;
}
 
#form_box p {
	float: left;
	margin: 4px 0pt;
	width: 120px;
}
 
 
#log {
	float: left;
	padding: 0.5em;
	margin-left: 10px;
	width: 290px;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	margin-top: 10px;
}
 
#log_res {
	overflow: auto;
}
 
#log_res.ajax-loading {
	padding: 17px 0pt 0pt;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}
 
.source { float: right; }