Che cos’è una callback? È uno strumento che ti assicura al 100% che un pezzetto di codice non venga eseguito prima che succeda un particolare evento. In questo articolo scopriremo assieme come funzionano ma soprattutto come utilizzarle.
Le callback sono uno strumento molto utile: specialmente per sfruttare i meccanismi asincroni legati al codice. Non per nulla se ti stai chiedendo che cos’è una callback è molto probabile che tu stia realizzando una soluzione in ambito web!
Ma prima, permettimi di presentarmi.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Che cos’è una callback? Uno strumento che merita una spiegazione approfondita
Famose e utilizzate in ogni dove per i servizi web, le callback sono uno strumento che ti permette questo. Non solo: hanno altre potenzialità.
Facciamo un passo indietro.
Per quale motivo ho bisogno di un sistema così malato?
Per assicurarti che le cose vadano per il verso giusto.
Facciamo un esempio: hai una pagina web con un bottone.
Questo bottone, quando viene cliccato dall’utente, mostra dei dati presenti su un database.
Quindi, devi fare una query.
Una volta fatta la query, quei dati devi prenderli e mostrarli sulla pagina web.
No, abbiamo saltato un pezzo: la richiesta.
Tra il click del bottone e la query al database, dobbiamo passare attraverso una richiesta HTTP.
Perchè senza di essa, non possiamo ottenere i dati dal database.
Oltre alla pagina web, scritta in HTML e JavaScript, abbiamo una pagina PHP che esegue la query e ci restituisce i famosi dati in JSON.
È immediato pensare: beh, faccio la funzione che viene invocata al click del bottone, ci metto dentro l’URL della pagina PHP e il gioco è fatto.
Ti faccio due domande.
La prima: quanto tempo ci vuole ad eseguire la funzione una volta che ho cliccato il bottone?
Teoricamente zero: è immediata la sua esecuzione.
La seconda: quanto tempo passa dal momento in cui vado alla pagina PHP al momento in cui questa mi restituisce i dati?
Purtroppo, la risposta NON è zero!
Pensaci bene, quanto tempo passa dal momento in cui digiti l’indirizzo di un sito web per poi vederlo finalmente caricato?
Dipende dalla tua connessione e no, non è mai istantaneo.
Perciò, la famosa funzione JavaScript collegata al bottone, dobbiamo metterla in attesa.
Ora che ci penso: stiamo parlando tanto di Javascript. Lo sapevi che nel mio blog c’è un’intera categoria a riguardo?
Devi sapere che i miei articoli derivano dagli errori fatti lungo la mia carriera a cui ho poi trovato una soluzione.
Soluzione che sto condividendo per esempio con te adesso. E parlando di Javascript li trovi tutti quanti qui!
Torniamo a noi.
In attesa finché la pagina PHP non restituisce la risposta, i famosi dati.
I passi da eseguire sono:
- OnClick: esegui la funzione “ottieniDati”
- “ottieniDati” esegue la chiamata HTTP alla pagina PHP
- “ottieniDati” rimane in attesa finché la pagina non gli restituisce i dati
- “ottieniDati” li riceve e li mostra finalmente a video
Vediamo un po’ come è fatta la pagina HTML:
<html>
<head>
</head>
<body>
<div id="datiDaMostrare"></div>
<button onclick="ottieniDati()">Cliccami</button>
</body>
<script type="text/javascript">
function ottieniDati(){
$.ajax({
type: "GET",
url: "./PaginaPerIDati.php",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: function (response) {
$("#datiDaMostrare").html(response);
}
});
}
</script>
</html>
Vediamo la funzione “ottieniDati” che al suo interno utilizza un metodo chiamato “ajax”: deriva dal framework jQuery e permette di eseguire chiamate HTTP.
Al suo interno notiamo il modo con cui fare questa chiamata (GET), l’URL della pagina, gli diciamo di che tipo sono i dati che ci aspettiamo di ricevere (sarà un contenuto JSON) e un ultimo parametro che si chiama “success”.
Ha qualcosa di strano questo parametro.
Notate che non ha assegnato un valore ma una funzione?
Ecco quello che succede.
La funzione viene invocata al click del mouse sul bottone ed esegue la chiamata HTTP grazie al metodo “ajax”.
Se la pagina PHP che ho chiamato “PaginaPerIDati.php” mi restituisce una risposta positiva (quindi ottengo ciò che voglio, ovvero i dati) e non mi da errori succede questo.
Nel momento in cui la pagina PHP mi risponde, la callback viene eseguita!
Se vi mettete con il debugger a eseguire la funzione una linea per volta, noterete che viene eseguita fino alla fine, ma poi non succede niente.
Provateci!
Ma provate a mettere un breakpoint su questa riga:
$("#datiDaMostrare").html(response);
È sempre una funzionalità di jQuery che fa letteralmente questo:
“jQuery, prendimi l’elemento HTML con l’ID ‘datiDaMostrare’ e buttaci dentro come contenuto HTML ciò che trovi nella variabile che si chiama ‘response’”.
Noterete che il debugger prenderà vita di nuovo fermandosi su quella riga dopo qualche frazione di secondo!
Il motivo è quello che ho esposto prima: dobbiamo aspettare che la pagina PHP venga chiamata, faccia quello che deve fare per estrapolare i dati dal database e infine darli a noi.
Ho parlato di variabile che si chiama “response”.
Se notate, la callback “success”, è una funzione (che per JavaScript è un oggetto a tutti gli effetti, non potevo non dirvelo) che ha un parametro.
Quel parametro, viene usato per ottenere il contenuto passato dalla pagina PHP.
Potete chiamarlo come volete, JavaScript riconoscerà in automatico quella variabile come contenitore per la risposta che ci darà la pagina chiamata, nel nostro caso “PaginaPerIDati.php”.
Non è l’unica callback che esiste, possiamo estendere questo esempio ad altri due casi:
- Quando la richiesta va in errore (ad esempio codice PHP è scritto male)
- Quando la richiesta fallisce (connessione persa)
Come facciamo ad utilizzare le callback?
Basta aggiungere questi due parametri al metodo “ajax” di prima:
$.ajax({
type: "GET",
url: "./PaginaPerIDati.php",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: function (response) {
$("#datiDaMostrare").html(response);
},
failure: function (response) {
alert(“ho fallito la richiesta”);
},
error: function (response) {
alert(“C’è stato un errore nella richiesta”);
}
});
Ed ecco un esempio completo di che cos’è una callback, come funziona, ma soprattutto… A che cosa serve!
2 commenti
Sei sempre il Top. Mi piacerebbe un articolo su upload foto sul server con drag and drop. Grazie
Ciao Luciano, grazie 😀
Un articolo del genere penso che sarebbe lungo da qui fino a dopodomani: è una procedura sì facile da implementare ma parecchio lunga da essere spiegata hehe.
Ci penserò, grazie del suggerimento!