[AJAX] Creare un loader grafico

La capacità di AJAX di aggiornare il contenuto di una pagina web senza dover ricaricare tutto il file è la sua vera forza! Il risparmio di banda sul server può risultare notevole, ottenendo il doppio vantaggio di maggior velocità di esecuzione delle pagine e risparmio di tanti soldini da parte del titolare del server. Perchè sappiamo tutti che la differenza di prezzo fra server e server molto spesso dipende dalla banda disponibile.

Può capitare che per l’espletamento di una richiesta passino pochi secondi. Spesso passa meno di un secondo, ma sono infiniti attimi in cui visivamente non succede niente.

Se ricordate (se non ricordate andate a ripassare 😉 ) il risultato testuale della richiesta viene visualizzato solo alle seguenti condizioni.

if(myReq.readyState == 4 && myReq.status == 200)

A richiesta terminana (readyState == 4) ed andata a buon fine (status == 200). A parità di server e condizioni istantanee, cronometro alla mano una richiesta AJAX sarà per forza di cose più veloce di una richiesta normale, se non per il solo fatto di caricare una quantità di dati inferiore rispetto al dover processare la richiesta e ricaricare tutti i dati della pagina, anche quelli non necessari.

[MORE] 

Ma la psicologia umana è stravagante e bastarda 🙂 . Spesso l’utente che vede la pagina bloccata per un paio di secondi, o anche meno, ipotizza mal funzionamenti. In realtà niente sta funzionando male. E’ solo la richiesta che si sta processando in background.

Come fare per evitare di dare l’impressione che sia tutto bloccato o che a tratti l’applicazione funzioni a scatti? Semplicissimo: notifichiamo all’utente che la richiesta è stata inoltrata e ci si sta lavorando.

In parole povere, dobbiamo creare un loader che appaia non appena la richiesta viene inviata e scompaia per sostituirsi alla risultanza, nel momento in cui la richiesta sia stata evasa correttamente.

Per prima cosa dobbiamo trovare una bella gif animata che dia l’idea del dinamismo della pagina. Immancabile fra i vostri bookmark dovrà essere AJAXLoad.info. Ottima web application che permette di generare in un istante le meravigliose gif animate in dimensioni piccolissime. Questo ultimio aspetto per noi è fondamentale, dato che non possiamo aspettare troppo per il caricamento del loader, sarebbe un controsenso 🙂  .

A questo punto creeremo una funzione che andrà a piazzare l’immagine scelta all’interno dell’id che vogliamo.

function loader(id){
  document.getElementById(id).style.display = ‘block’;
  document.getElementById(id).style.visibility = ‘visible’;
  document.getElementById(id).innerHTML = ‘<img alt="loader" src="loader.gif" />’;
}

Le prima due righe ci fanno star certi che il loader si vedrà. La terza si occupa di piazzare nel id scelto, codice html adeguato.

Adesso, la funzione che richiama l’handler AJAX dovrà contenere anche le istruzioni per il loader. Niente di più semplice.

function fallo(id){
  loader(id);
  AJAXReq(‘GET’,’loader.php’,true,function (){handleResponse(id)});
}

Partiranno una dopo l’altra le due funzioni. Solo che loader() si manifesterà subito con il loader, mentre AJAXReq avrà il suo compimento visivo solo alle condizioni poste sopra.

E se AJAXReq è troppo veloce?

Dobbiamo infatti tener conto anche del problema opposto. Ovvero che la richiesta AJAX si esegua in pochissimi millesimi di secondo. In realtà non possiamo sapere quanto tempo ci metterà perchè dipende non solo dal server, ma anche dal client che fa la richiesta.

Per evitare che il loader diventi uno schizzo frenetico di pochissimi centesimi, infastidendo più che altro, possiamo fissare una sua durata in termini di tempo minimo di espletamento della richiesta AJAX.

Basta usare setTimeout alla funzione AJAXReq.

function fallo(id){
  loader(id);
  setTimeout("AJAXReq(‘GET’,’loader.php’,true,function (){handleResponse(‘"+id+"’)});", 1000);
}

La funzione AJAXReq in questo caso si eseguirà dopo un secondo, dando almeno un secondo di vita al loader. All’espletamento di quel secondo AJAX si metterà in azione ed il loader rimarrà fin quando il contenuto dell’id non si aggiornerà con le risultanze della richiesta asincronica.

Notate che scritta in questo modo, la funzione non pone un timeout finale al loader, ma un countdown iniziale ad AJAX. La cosa assicura un minimo di vita prefissata al loader.

Come sempre, eccovi un facile esempio pratico.