Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Attesa aggiornamento DIV – Ajax

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).

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×