Ente accreditato Regione Veneto n.4271

Come creare chiamate asincrone con PHP e Javascript

La guida passo passo per usare le chiamate asincrone con framework JQuery

Pubblicato da Gianni // 14 marzo 2017 // 1.311 visualizzazioni

Si sente sempre di più parlare di chiamate asincrone e di Ajax. Anche i miei corsisti spesso mi domandano di approfondire questo argomento sempre più attuale. Per questo motivo ho deciso di creare questo articolo, con lo scopo di spiegare l’uso delle chiamate asincrone tramite PHP e jQuery.

Definizione

Per chi non sapesse, una chiamata ad una risorsa esterna si dice asincrona quando non interferisce con l’esecuzione della pagina web. Il risultato di questa chiamata avviene in “background” ed utilizzabile quando disponibile, senza che questo blocchi la normale esecuzione del codice.

Le normali chiamate nel web sono invece sincrone, cioè interferiscono direttamente con la pagina web, obbligando l’aggiornamento di tutta la pagina web.

Il Web 2.0

Le chiamate asincrone, a livello tecnico, rappresentano un elemento cardine del web 2.0. Grazie a queste, l’usabilità e l’interazione degli utenti diventa immediata e intuitiva.

La maggior parte dei siti che hanno un’alta interazione con l’utente, usano le chiamate asincrone. Ad esempio Facebook e Twitter, permettono di scrivere un post/tweet, un commento, o anche solo visualizzare gli ultimi aggiornamenti di stato senza mai ricaricare la pagina web.

I contenuti infatti sono gestiti in maniera asincrona e “inseriti” nella pagina che l’utente sta visualizzando.

Queste tipologie di chiamate hanno permesso l’evoluzione delle applicazioni web. Framework/Librerie Javascript come AngularJS e React fanno ampio uso di questo approccio.

Le chiamate asincrone in jQuery

Fatta questa premessa, che ne dite se vi mostro come eseguire questo tipo di chiamate attraverso l’uso di Javascript?
In dettaglio, useremo il framework jQuery, che semplifica di molto la gestione di queste chiamate.

jQuery infatti, mette a disposizione una serie di funzioni per facilitare e velocizzare la comunicazione asincrona verso risorse esterne.
Abbiamo infatti:

  • .load(): Esegue una chiamata asincrona ad una risorsa esterna e il suo output HTML sarà messo nell’elemento selezionato.
  • .ajax(): A differenza della funzione precedente, Possiamo decidere noi cosa fare nel risultato della chiamata.
  • .post(): Versione semplificata di “.ajax();” in cui i dati alla risorsa esterna sono inviati tramite POST.
  • .get(): Uguale alla funzione “.post();”, ma qui i dati vengono inviati in GET.

La funzione .ajax();

Ora vediamo in dettaglio la funzione ajax(); perché tra tutte è la più completa e facilmente applicabile a diverse situazioni.

Nella schermata qui sotto vedete un esempio di chiamata asincrona fatta con questa funzione. A differenza della maggior parte delle funzioni jQuery, questa non richiede la selezione di alcun elemento prima di essere eseguita.

La funzione, permette la configurazione di molti parametri, ma quelli fondamentali sono ‘url’ e ‘success’. Di seguito una carrellata dei parametri più utili:

  • url: (String) L’indirizzo della risorsa esterna da chiamare
  • data: (PlainObject /String) Indica i parametri da inviare alla risorsa esterna. possiamo inviarli come oggetto o come “query string”.
  • dataType: (String) il tipo di dato che ci si aspetta di avere dalla risorsa esterna. Non è obbligatorio ma è consigliato impostarlo ad “html” o “text” a seconda dei casi
  • method: (String) Il metodo con cui verranno passati i dati, cioè “POST” o “GET”
  • timeout: (Number) i millisecondi che siamo disposti ad attendere prima di annullare la richiesta. Non è un dato molto usato, ma in qualche caso può evitarvi di attendere troppo una risorsa.
  • beforeSend: (Function) la funzione che viene eseguita PRIMA di eseguire la richiesta. Utile ad esempio a mostrare a video un preloader per avvisare l’utente di attendere il caricamento della risorsa.
  • success: (Function) la funzione che viene eseguita se la richiesta va a buon termine. LA funzione accetta un parametro, che sarà l’output generato dalla risorsa esterna.
  • error: (Function) la funzione eseguita in caso di errore. Ad esempio se la risorsa esterna non è raggiungibile o non esiste.
  • complete: (Function) la funzione eseguita DOPO “success” o “error”. Utile ad eseguire dei comandi indipendentemente se la chiamata va a buon fine o meno.

La risorsa esterna

La risorsa che riceve la chiamata, può essere un normalissimo file PHP. Questo intercetta i parametri passati tramite “data” in GET o POST, a seconda della scelta fatta su “method” della funzione Ajax.

Da qui potete ritornare del testo, tramite dei semplici “echo”. Questo saranno il valore del parametro della funzione “success” nel comando ajax();

N.B.: Consiglio di concatenare i diversi echo in una singola variabile di testo, ed eseguire un’unica “echo” alla fine del codice, come visibile nell’esempio qui sopra.

Esempio pratico

Per capire meglio il funzionamento di questo comando, ho preparato una semplice demo, con lo scopo di convertire i colori dal formato RGB ad Esadecimale (Hex). Ogni invio del modulo lancia una chiamata asincrona, evitando quindi di ricaricare ogni volta la pagina e rendendo quindi l’interazione molto più veloce.

Oltre a Javascript, l’esercizio fa uso del linguaggio PHP, quindi assicuratevi di avere un server locale attivo per il suo corretto funzionamento (MAMP ad esempio).

Nell’esempio, sul footer, ho inserito una funzione PHP che visualizza la data dell’ultimo caricamento della pagina. Questo ai fini dell’esercizio è inutile, ma vi aiuta a notare più facilmente che la pagina non si aggiorna ad ogni invio del modulo.

Qui sotto trovate il link per scaricare la cartella compressa con l’esercizio. Nel codice troverete ulteriori commenti, utili a capire meglio i comandi e costrutti usati.

Scarica demo

Chiamate asincrone e WordPress

Nel prossimo articolo, vedremo come utilizzare le chiamate asincrone su WordPress. Questo CMS infatti prevede l’utilizzo di questa funzionalità, ma con qualche differenza rispetto alle normali chiamate fatte in PHP.

Alla prossima puntata.

 

 

Topic: , , ,

Send this to a friend