searchiniz

Guida di Javascript

   Come fare per ..

Caricare pagine voluminose in maniera asincrona

Supponiamo di dover caricare una pagina piuttosto lunga, con molte informazioni o che abbia bisogno di un lungo tempo di elaborazione per preparare tutte le informazioni da visualizzare, ad esempio grafici, elenchi o risultati di operazioni complesse.
Non possiamo tenere il visitatore sulle spine e mostrargli una pagina bianca finché tutte le informazioni non sono state caricate dal browser, soprattutto se l'utente deve ricaricare quella pagina più volte.

Una possibile soluzione è quella di caricare una pagina con le sole informazioni iniziali in modo da far comunque vedere qualcosa al lettore, e di caricare il resto delle informazioni in maniera asincrona subito dopo, eventualmente anche a scaglioni successivi.

All'evento onLoad() della pagina HEML associamo una chiamata Ajax che si occuperà di caricare alcune informazioni e che, al termine, chiamerà un'altra funzione Ajax (oppure di nuovo se stessa con altri parametri) per caricare le altre informazioni in cascata.
Ciascuna funzione andrà a popolare un opportuno DIV posizionato all'interno della pagina.
Naturalmente avremo bisogno di sapere quante e quali sono le informazioni da visualizzare e i relativi blocchi DIV di ciascuna.

Supponiamo di avere una pagina con 3 informazioni "pesanti" da dover calcolare/caricare: un testo, una immagine ed un valore statistico. Nell'esempio sono informazioni di poco conto, per cui inseriamo un tempo di latenza di qualche secondo per simulare il calcolo o l'elaborazione delle informazioni.

[HTML]
<body onLoad="javascript:caricaDati(1);">

testo:
<div id="info1"></div>

immagine:
<div id="info2"></div>

statistico:
<div id="info3"></div>

La funzione caricaDati() viene chiamata inizialmente col parametro "1" che starà ad indicare il primo DIV.
Al termine, la funzione caricaDati() chiamerà se stessa col parametro "2" (parametro+1) per indicare il secondo DIV.
Infine, una volta chiamata la funzione col parametro 3, il ciclo dovrà terminare e non chiamare nessuna altra funzione.

Per fare le chiamate Ajax useremo ancora Protorype JS.


[IMPORT]
<script src="prototype.js"></script>


[JAVASCRIPT]
<script type="text/javascript">
function caricaDati(id) {
    new Ajax.Request('beCaricaVoluminosi.php', {
        method: 'get',
        parameters: { idDato: id,
        },
        onSuccess: function(transport){
            var dati = transport.responseText;
            if (dati.includes("ERRORE")) {
                alert(dati);
            } else {
                mostraDati(id, dati);
                if(id<=3) caricaDati(id+1);
            }
        },
        onFailure: function(){
            alert("Errore generico");
        }
    });
}
function mostraDati(id, dati) {
    if(id==1) {
        document.getElementById("info1").innerHTML = dati;
    } else if(id==2) {
        document.getElementById("info2").innerHTML = '<img src=" + dati + " width="120" height="80">';
    } else if(id==3) {
        document.getElementById("info3").innerHTML = dati;
    }
}
</script>

La funzione caricaDati non fa altro che effettuare una chiamata ad una funzione Ajax.Request della libreria Prototype con i suoi 5 parametri.
Quando riceve la risposta, chiama la funzione mostraDati() per visualizzare la risposta e quindi chiama se stessa dopo aver incrementato l'indice, a meno che l'indice non sia maggiore di 3, nel quale caso non fa nient'altro.

Questo sotto è quello che ci aspettiamo sulla nostra pagina.
CLICCA QUI per simulare il caricamento della pagina.
Il caricamento dovrebbe durare circa 5 secondi; inseriremo una scritta " - fine - " per indicare che tutta la pagina è stata caricata.


searchfine

Guida realizzata da   Michele Ferrara  ( © )  



Privacy Policy - Personalizza tracciamento pubblicitario