Lezioni AJAX: come gestire l’attesa

Visto il controllo sul tempo di risposta e soprattutto il modo per evitare richieste stressanti, resta da affrontare il problema dell’attesa, questa volta non rivolto alla salvaguardia del server o del codice, ma all’intrattenimento del visitatore.

Se è vero che un click non corrisposto può portare l’utente a ritentare l’operazione è altrettanto vero che un messaggio temporaneo può rassicurare il navigatore sull’avvenuta richiesta.

Evitiamo quindi che un’interazione impercettibile lasci perplessità sull’operazione appena svolta: «Avrò sbagliato a cliccare?» è solitamente la prima domanda che l’utente potrebbe porsi, «Si sarà bloccato il sito ?» la seconda.

In Flash si è aggirato il problema usando i loader: elementi grafici leggeri che eliminano la sensazione di un’attesa statica rappresentando la percentuale di caricamento con l’ausilio di una barra di progressione o con del testo esplicito.

Con AJAX si potrebbe fare altrettanto. Troviamo supporto in almeno un paio siti: mentalized.net e napyfab.com, che mettono a disposizione alcune gif animate da poter sfruttare durante l’attesa.

Un consiglio sulla scelta della giusta animazione di intrattenimento è quello di non mostrare un’immagine troppo grande, ne troppo piccola, ed è inoltre importante evitare di mostrare un’animazione troppo frenetica al fine di rispettare anche gli utenti che al posto di una crisi epilettica avrebbero voluto solo raggiungere un’informazione.

Un primo esempio di immagine utile potrebbe essere questa:

Figura 1. Led in movimento da sinistra a destra
Led in movimento da sinistra a destra

Il giusto compromesso tra la velocità dello spostamento, la grandezza in pixel e soprattutto il peso della gif la rendono una delle più usate e conosciute degli ultimi applicativi asincroni.

Un’eventuale alternatvia potrebbe essere :

Figura 2. Cilindro colorato con in movimento da destra a sinistra
Cilindro colorato con effetto movimento da destra a sinistra

Il peso eccessivo potrebbe lasciare, almeno la prima volta, la problematica irrisolta, considerando che scaricare più di 20Kb potrebbe equivalere ad un’attesa di 3 o più secondi su connessioni non ADSL, probabilmente oltre il tempo necessario per ricevere la risposta asincrona.

Ultima soluzione consigliata, al limite delle dimensioni ma molto leggera e probabilmente la meno fastidiosa, la seguente:

Figura 3. Freccie ricurve che girano lentamente
Due freccie ricurve che girano lentamente

Non solo si integra alla perfezione con la maggior parte dei contenuti, ma è anche una delle poche utilizzabili su un sito con contrasti rispettosi delle persone ipovedenti.

La scelta dell’immagine non è comunque un obbligo ed è sostituibile con del testo, sicuramente più leggero, probabilmente meno evidente. Il bello di JavaScript è che si può dare dinamicità a prescindere, senza necessariamente strafare, anche alle parti più semplici ed è grazie a questa funzione che un testo, ad esempio, può diventare di intrattenimento.

Listato 22. Costruire un loader testuale

// accetta una stringa di testo non html da mostrare
function mostraAttesa(testo) {
// variabili di funzione
var
// totale dei puntini mostrati
puntini = 0,
// elemento contenente il testo
// oppure il nodo testuale all’interno
// dello stesso elemento
testoIntrattenimento = prendiElementoDaId(“testo-temporaneo”),
// funzione per aggiungere puntini al testo scelto
animaTesto = function() {
// stringa locale contenente i vari puntini
var testoAggiunto = “”;
// ciclo per aggiungere i puntini
for(var a = 0; a < puntini; a++)
testoAggiunto += ".";
// assegnazione del nuovo testo al nodo
// comprensivo dei puntini
testoIntrattenimento.nodeValue = testo + testoAggiunto;
// controllo sul totale puntini
// se inferiori a 4
if(puntini < 4)
// si aggiunge un altro punto
puntini++;
// altrimenti si ricomincia da nessun punto
else
puntini = 0;
// richiamo alla stessa funzione con intervallo non
// inferiore ai 250 millisecondi
setTimeout(animaTesto, 300);
};
// verifica della precedente assegnazione
// del nodo testuale all'interno dell'elemento
if(testoIntrattenimento.firstChild) {
// in questo caso è necesario riassegnare
// la funzione al fine di eliminare l'intervallo
// successivo ...
animaTesto = function(){};
// ... per poi eliminare il nodo precedentemente aggiunto
testoIntrattenimento.removeChild(testoIntrattenimento.firstChild);
}
else {
// nodo inesistente, è necessario crearlo
// con il testo predefinito ...
testoIntrattenimento = document.createTextNode(testo);
// ... ed assegnarlo all'elemento
prendiElementoDaId("testo-temporaneo").appendChild(testoIntrattenimento);
// per poter richiamare la funzione
animaTesto();
};
};

Aggiungendo o scrivendo questa sola funzione e sostituendo il markup della solita pagina utilizzata negli esempi con questo:

Listato 23. Integrare il loader nella pagina

<body>
<div>
<h1>Esempio di intrattenimento testuale dinamico</h1>
<div>
<span
style="cursor: pointer;"
onclick="mostraAttesa(‘caricamento’);"
>
test di intrattenimento
</span>
<p id="testo-temporaneo"></p>
</div>
</div>
</body>

Possiamo osservare l’esempio in funzione. Cliccando sulla scritta ‘test di intrattenimento’, vediamo che nonostante non stia accadendo nulla si ha l’impressione che il comando richiesto, in questo caso il click, è stato sicuramente interpretato e che il sistema stia elaborando una qualche operazione.

La funzione proposta non è studiata, in questa versione, per AJAX, poichè in realtà la parte di codice presente nel primo controllo dovrebbe essere la stessa presente ad operazione asincrona ultimata, per comunicare visivamente la fine dell’attesa.

Infine, oltre al testo, sarebbe stato possibile semplicemente aggiungere un elemento immagine, magari con una delle gif proposte, rendendo ancora più semplice il codice da utilizzare il quale non dovrà ricorrere ad intervalli fittizzi sfruttati per emulare dinamicità, ma solo aggiungere o togliere tale immagine.

Share on Facebook