AJAX – Gestione della cache

Uno dei grandi vantaggi di AJAX è poter evitare di caricare una grande quantità di dati inutili, permettendo al client di richiedere solo quelli necessari in quel momento. In questo modo, oltre a permettere una piena personalizzazione del layout di pagina, si risparmia anche un sacco di banda.

Ipotizziamo una pagina con molti form. Invece di caricarli tutti metto a disposizione dell’utente dei collegamenti che gli permettono di visualizzare solo quelli necessari al momento. La cosa diventa ancor più utile se i form in questione contengono field list caricati tramite una query ad un database. Pensate ad un form che permette di selezionare le pratiche per cliente, avendo la lista clienti disponibile nel form.

Molto spesso, dopo aver fatto caricare il form necessario, lo facciamo anche scomparire se all’utente non serve più. Cosa succede se dopo questo all’utente riserve il form? Lo richiederà nuovamente ricliccando sul link. Ma in questo modo reinoltrerà una richiesta al server per dati che aveva già precedentemente caricato. In questo modo AJAX rischia di diventare più dispendioso di una gestione di dati caricati nella classica maniera.

Per farvi capire meglio, andare a riguardare questo esempio, inizialmente creato per spiegare come implementare un loader grafico per una chiamata AJAX.

Cliccando su "Clicca qui per inviare una richiesta GET" parte la chiamata in AJAX con relativo risultato. Possiamo nasconderla, ma per farla ricomoparire (ricliccando sul link) riavviamo lo handler AJAX inutilmente.

Per evitare un tale spreco di risorse, basta implementare un sistema di caching. Sul come, molto dipende da come gestiamo le risposte AJAX ed i vari eventi. Capirete quindi che non esiste un modo standard, ma ce lo dobbiamo inventare 🙂

Ripartiamo proprio dall’esempio di sopra. Come fare per evitare una seconda chiamata sul GET? Gestiamo il tutto con un array associativo. Creiamo l’array come elemento della cache, magari usando l’id di destinazione della chiamata AJAX come chiave associata in modo da garantirne l’unicità.

Creaiamo il nuovo array.

var cache = new Array();

E siccome siamo sfizioni, scriviamo la funzione di risposta con la cache come elemento opzionale. Quindi sarà.

function handleResponse(id,caching){
 if(myReq.readyState == 4 && myReq.status == 200){
  if(caching){
    cache[id] = true;
  } 
  document.getElementById(id).innerHTML = myReq.responseText;
 }
}

Perchè cache[‘id’] = true? Perchè usiamo la cache in funzione della gestione generale dello script. Una vota mostrato il risultato della chiamata, nascondiamo il tutto con la funzione:

function chiudi(id){
 document.getElementById(id).style.display = ‘none’;
 document.getElementById(id).style.visibility = ‘hidden’;
}

Che non fa altro che nascondere. Non distruggere. Quindi la funzione fallo() che avvia il tutto potrà essere scritta in questo modo.

function fallo(id){
 if(cache[id]){
   document.getElementById(id).style.display = ‘block’;
   document.getElementById(id).style.visibility = ‘visible’;
  }else{
   loader(id);
   setTimeout("AJAXReq(‘GET’,’loader.php’,true,function (){handleResponse(‘"+id+"’,true)});", 1000);
  }
}

Se la cache esiste, semplicemente mostra l’id. Altrimenti avvia AJAX. In questo modo è tutto facilissimo ed il risparmio di banda è assicurato. Ma non solo! Dato che la cache è rappresentata da un booleano, anche la memoria locale del browser ne risentirà pochissimo.

Senza star qui a scrivere codice (lo trovate nell’esempio finale), nel caso in cui invece il testo venga materialmente distrutto (innerHTML = ”) sarà comunque possibile usare l’elemento dell’array non come booleano, ma come una variabile di testo.

In questo secondo caso però si deve stare attenti a non creare troppi elementi dell’array cache, perchè la memoria del browser potrebbe risentirne e causare un appesantimento del sistema.

Valutare una buona strategia di pulizia della cache è un argomento importante, ma magari lo facciamo un’altra volta 🙂

Qui trovate un esempio da dove prelevare anche il file js con tutte le funzioni. Viene mostrato sia un esempio di scomparsa con soli elementi di stile, sia il caso in cui il contenuto dell’id in questione venga modificato fisicamente.