Con interazione con il PHP da JavaScript intendo: effettuare delle operazioni lato server (codice PHP) partendo da un evento lato client (come il click di un bottone, codice JavaScript) – senza dover ricaricare la pagina – tramite AJAX.
Mostrerò il codice di un file PHP che riceve dei dati, li elabora e restituisce una stringa. Vedremo – ovviamente – anche il codice Javascript che chiamerà il file PHP ed acquisirà la stringa ricevuta stampandola a schermo.
IMPORTANTE: assicurati che nel tuo file .html sia inclusa un versione di jQuery non slim (.js o .min.js vanno benissimo, .slim.min.js no).
Interagire con il server (PHP) da JavaScript
Questo è il codice del nosro file PHP (QuantiAnni.php):
<?php
if($_POST)
{
$Nome = $_POST["Nome"];
$Anni = $_POST["Anni"];
echo $Nome." ha ".$Anni." anni.";
}
?>Come vedete, il file verifica se sono presenti dei dati in $_POST e nel caso lo sono, legge i dati “Nome” e “Anni” da $_POST e restituisce una frase, molto facile.
Ora vediamo il codice Javascript per chiamare questo file PHP (in questo caso si presume che il file php sia nella stessa directory del file html/javascript):
// Funzione per provare il file PHP
function provaPHP()
{
$.post(
'QuantiAnni.php',
{ Nome: "Italo", Anni: 39 },
function( data )
{
alert(data);
});
}
// Collego la funzione al click di un oggetto
$("#bottone").click(provaPHP);Viene creata una funzione che esegue una richiesta HTTP POST verso l’indirizzo di un file PHP attraverso il metodo $.post(..). Questa funzione riceve i seguenti parametri:
– Indirizzo della richiesta (in questo caso l’indirizzo del file PHP, il file è nella stessa directory, ricordi?),
– Dati da passare via HTTP POST (in questo caso “Nome” e “Anni”),
– Funzione di callback che elaborerà i dati ricevuti alla risposta del server (in questo caso stamperà semplicemente la stringa ricevuta in un alert: Italo ha 39 anni).
L’invio della richiesta HTTP viene effettuato al click di un bottone.
AJAX più in dettaglio
L’operazione appena effettuata viene comunemente definita come una chiamata AJAX.
Le operazioni AJAX permettono di effettuare delle operazioni sul server senza ricaricare la pagina, inviando delle richieste HTTP (simili a quelle che invia il tuo browser quando navighi) e ricevendo una risposta.
Negli ultimi anni le operazioni AJAX hanno acquisito un’importanza sempre maggiore, fino ad arrivare a oggi dove vengono sviluppate le SPA.
Vale la pena di approfondire l’argomento con un buon libro che – nonostante abbia qualche anno – trasmette delle ottime basi per sviluppare pagine web con AJAX: acquista su Amazon.
Le SPA – Single Page Applications – sono siti web composti da un’unica pagina, che viene aggiornata effettuando chiamate AJAX, senza mai ricaricarsi.
Personalmente ritengo le SPA una moda e un modello di sviluppo che non offre nessun vantaggio particolare, a fronte di una complessità molto elevata.
Effettuare operazioni AJAX però offre vantaggi concreti, ad esempio per ricaricare una porzione della pagina in seguito al click un utente, senza ricaricare tutto.
I lati negativi
Le operazioni AJAX hanno dei difetti, motivo per il quale ti raccomando di non abusarne.
Gestire tante chiamate AJAX all’interno di una pagina web è molto complicato e rende lo sviluppo e la manutenzione del sito web più costosi.
Caricare intere pagine tramite AJAX solo perché non ricaricare la pagina “fa figo” è stupido, perché non c’è nessun vantaggio per l’utente.
Al contrario, si rischia di rompere l’esperienza del browser tramite le frecce indietro/avanti di navigazione e altri piccoli dettagli.
Un altro rischio riguarda la sicurezza: è capitato molte volte che un URL per una chiamata AJAX si sia rivelato vulnerabile ad attacchi, perché privo di un sistema efficace di autorizzazione.
Usa AJAX solo dove ha senso!
In bocca al lupo per tutti i tuoi progetti futuri.
