Variablen von PHP nach JavaScript senden

In diesem Blog möchte ich ein wenig über verschiedene Ansätze schreiben,
um Variablen von PHP nach JavaScript zu senden.

Mit Ajax die benötigen Daten vom Server holen

Diese Methode solltet ihr bevorzugen, da serverseitige und clientseitige
Skripts vollständig separiert sind. Ihr braucht dafür ein PHP-File,
welches euch den Ouput generiert(am Besten als JSON) und ein JS-File
welches den Ouput holt.

Bsp für JavaScript-Datei:

<script>
     function reqListener () {
          console.log(this.responseText);
     }

     var oReq = new XMLHttpRequest(); //New request object
     oReq.onload = function() {
          //Hier könnt ihr machen, was ihr mit dem Response machen wollt
          //Die Daten stehen in this.responseText
          alert(this.responseText);
     };
     oReq.open("get", "getData.php", true);
      //                ^ Die PHP-Datei die den Output generiert
     oReq.send();
</script>

Vorteile:

• Bessere Seperation zwischen Layers
• Bessere Lesbakeit
• Daten können nicht im Markup gefunden werden
• Erlaubt asynchronen Datentransfer

Nachteile

• Latenzen durch HTTP Requests
• Keine Information über HTTP Request

Mit echo die Daten in Seite schreiben und in JS aus dem Dom holen

Die Methode ist weniger zu bevorzugen als die Erste. PHP und JavaScript
sind allerdings noch immer in dem Sinn getrennt, dass kein PHP direkt
in JavaScript ist. Die Idee bei der Implementierung ist, dass ein
Element erzeugt wird, welches unsichtbar für den User ist, aber sichtbar
für JavaScript.

Beispiel-Datei:

<div id="ziel" style="display: none;">
     <?php
          $output = "10";
          echo htmlspecialchars($output); // Escape ist nötig um gültiges HTML zu bekommen
     ?>
</div>
<script>
     var div = document.getElementById("ziel");
     var myData = div.textContent;
</script>

Vorteile

• Schnell, auch bei größeren Datenmengen

Nachteile

• Potentiell unsemantisches Markup
• HTML Code wird "diry"
• Schwieriger strukturierte Daten zu bekommen
• Enge Koppelung von PHP und Datenlogik

Mit echo die Daten direkt an JS senden

Ist wahrscheinlich am leichtesten zu verstehen, allerdings
schwer richtig einzusetzen. Verwendet die Methode nur, wenn
ihr wisst was ihr tut.

Bsp für Implementierung:

<script>
     var data = <?php echo json_encode("10", JSON_HEX_TAG); ?>;
</script>

Vorteile

• Leicht zu implementieren
• Macht HTML nicht "dirty"

Nachteile

• Unsicher
• Sehr enge Koppelung von PHP und Datenlogik
• Strukturierte Daten sind sehr schwierig