Attesa aggiornamento DIV – Ajax
- Febbraio 03, 2010
- by
- Donatantonio
L’obiettivo è intrattenere il visitatore in attesa che un box, nel nostro caso un div, venga aggiornato tramite una richiesta Ajax.
Difatti nella maggior parte dei casi si rischia di abbandonare l’utente per un periodo variabile, in attesa che una parte della pagina venga aggiornata o modificata.
La tecnica che utilizzeremo è estremamente semplice ed applicabile a qualsiasi script già esistente; infatti non faremo uso del metodo onreadystatechange dell’oggetto xmlHttpReq ma semplicmente utilizzeremo un minimo di javascript per visualizzare un’immagine di attesa prima che il div venga rigenerato.
L’idea di base è questa:
Scriviamo nel DIV, prima di inviare la richiesta Ajax, l’immagine di loader. Una volta conclusa la richiesta l’immagine verrà sostituita dal contenuto richiesto.
Dopo aver visto il codice tratteremo brevemente pregi e difetti di questa soluzione.
<html>
<head><title>Aggiornamento DIV</title>
<script type="text/javascript">
var myRequest = null;
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
}catch(e){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
e = document.getElementById("box");
e.innerHTML = myRequest.responseText;
}
}
// la funzione che permette di ricaricare il contenuto del div BOX
function Ricarica(){
// scrivo nel BOX l'elemento di attesa
document.getElementById("box").innerHTML="<div align='center'><div align='center' style='background:#c0c0c0'><img src='loading.gif' alt='Attendi'/><br/>Sto aggiornando i dati...</div></div>";
// effettuo la richiesta AJAX
var r = Math.random();
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","aggiornamento_div.php?rand="+escape(r));
myRequest.send(null);
}
</script>
</head>
<body>
<!-- di seguito il div BOX -->
<div id='box' style='text-align:center'>
... Contenuto del DIV ...
</div>
<!-- di seguito il bottone per ricaricare il box -->
<input type='button' value='Ricarica' onclick='Ricarica()' />
</body>
</html>
La parte essenziale dello script si racchiude nella funzione Ricarica nella quale prima di effettuare la richiesta (verso una pagina fittizia aggiornamento_div.php) abbiamo la scrittura di un’immagine di attesa all’interno del div e successivamente la richiesta.
L’effetto che avremo è che dal momento in cui agiremo sul bottone di ricarica e fino all’avvenuta ricezione del contenuto aggiornato, verrà presentato all’utente un’animazione (o volendo un testo) di attesa.
Concludiamo sottolineando che qualora si volesse controllare l’attesa per evitare tempi troppo lunghi o eventualmente la mancata ricezione del contenuto, questo script non fa al nostro caso. Bensì si dovrà monitorare lo stato della richiesta con il metodo readyState.
Questa soluzione è quindi utile quando si è certi che la richiesta andrà a buon fine e lo scopo è semplicemente quello di presentare un’attesa all’utente.
E’ possibile scaricare da qui il codice completo e funzionante (con script di aggiornamento div compreso).
