Esistono diversi approcci per passare variabili e dati da PHP a JavaScript:
- Usare AJAX per ottenere i dati necessari dal server.
- Stampare tramite PHP (echo) i dati nella pagina da qualche parte e usare JavaScript per ottenere le informazioni dal DOM.
- Stampare tramite PHP (echo) i dati direttamente in JavaScript.
In questo post, esamineremo ciascuno dei metodi di cui sopra e vedremo i pro e i contro di ciascuno, nonché come implementarli.
1. Usare AJAX per ottenere i dati necessari dal server
Questo metodo è considerato il migliore, perché gli script lato server e lato client sono completamente separati.
Pro:
- Migliore separazione tra i livelli – se si decide di smettere di usare PHP e passare a un servlet, un’API REST o qualche altro servizio, non è necessario modificaregran parte del codice JavaScript.
- Più leggibile – JavaScript è JavaScript, PHP è PHP. Senza mescolare i due, si ottiene un codice più leggibile in entrambi i linguaggi.
- Consente il trasferimento di dati asincrono – Ottenere le informazioni da PHP potrebbe essere costoso in termini di tempo/risorse. A volte semplicemente non si vuole aspettare le informazioni per caricare la pagina.
- I dati non si trovano direttamente nel markup – Ciò significa che il markup è tenuto pulito da qualsiasi dato aggiuntivo e solo JavaScript lo vede.
Contro:
- Latenza – AJAX crea una richiesta HTTP e le richieste HTTP vengono trasferite sulla rete, di conseguenza hanno latenze dovute alla rete.
- Stato – i dati recuperati tramite una richiesta HTTP separata non includeranno alcuna informazione dalla richiesta HTTP che ha recuperato il documento HTML. Si potrebbe aver bisogno di queste informazioni (ad esempio, se il documento HTML viene generato in risposta all’invio di un modulo) e, in tal caso, bisognerà trasferirle in qualche modo.
Esempio di implementazione
Con AJAX, servono due pagine, una è dove PHP genera l’output e la seconda è dove JavaScript ottiene quell’output:
get-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode('Hello World'); // In the end, you need to echo the result.
// All data should be json_encode()d.
// You can json_encode() any value in PHP, arrays, strings,
//even objects.
index.php
<!-- snip -->
<script>
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest(); // New request object
oReq.onload = function() {
// This is where you handle what to do with the response.
// The actual data is found on this.responseText
alert(this.responseText); // Will alert: 42
};
oReq.open("get", "get-data.php", true);
// ^ Don't block the rest of the execution.
// Don't wait until the request finishes to
// continue.
oReq.send();
</script>
<!-- snip -->
La combinazione dei due file genererà un alert con scritto “Hello World” al termine del caricamento del file.
2. Stampare (echo) i dati nella pagina da qualche parte e usare JavaScript per ottenere le informazioni dal DOM.
Questo metodo è meno preferibile all’AJAX, ma ha comunque i suoi vantaggi. È ancora relativamente separato tra PHP e JavaScript, nel senso che non c’è PHP direttamente in JavaScript.
Pro:
- Veloce -: le operazioni DOM sono spesso rapide ed è possibile archiviare e accedere a molti dati in tempi relativamente brevi.
Contro:
- Markup potenzialmente non semantico – Di solito, quello che succede è si utilizza una sorta di <input type=hidden> per memorizzare le informazioni, perché è più facile ottenere le informazioni da inputNode.value, ma farlo significa avere un elemento senza significato nel proprio HTML. HTML ha l’elemento <meta> per i dati sul documento e HTML 5 introduce gli attributi data-* per i dati specifici per la lettura con JavaScript che possono essere associati a elementi particolari.
- Sporca la sorgente – I dati generati da PHP vengono inviati direttamente alla sorgente HTML, il che significa che si ottiene una sorgente HTML più grande e meno focalizzata.
- Più difficile ottenere dati strutturati – I dati strutturati dovranno essere HTML validi, altrimenti si dovrà eseguire l’escape e convertire le stringhe manualmente.
- Abbina saldamente PHP alla logica dei dati – Poiché PHP viene utilizzato nella presentazione, non è possibile separare i due in modo netto.
Esempio di implementazione
Con questo, l’idea è quella di creare una sorta di elemento che non verrà visualizzato dall’utente, ma che sia visibile a JavaScript.
index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "Hello World"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. Stampare (echo) i dati direttamente in JavaScript.
Questo è probabilmente il più facile da capire.
Pro:
- Implementazione molto semplice – Ci vuole pochissimo per implementarlo e capirlo.
- Sorgente non sporca – le variabili vengono inviate direttamente a JavaScript, quindi il DOM non è interessato.
Contro:
- Abbina saldamente PHP alla logica dei dati – Poiché PHP viene utilizzato nella presentazione, non è possibile separare i due in modo netto.
Esempio di implementazione
L’implementazione è relativamente semplice:
<!-- snip -->
<script>
var data = <?php echo json_encode("Hello World", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
