Datenübertragung an Server

Attention

Die Informationen sind etwas löchrig und es fehlt auch etwas von den erzeugten Dateien. Falls nötig, besser noch anderswo nachschlagen.

Hint

Die Beispielaufgaben hier werden über den XAMPP Apache Server gehostet. Dazu müssen die Ordner in /Applications/XAMPP/xamppfiles/htdocs/ verschoben werden.

Datenübertragung mit GET (per queryString)

Daten, welche per queryString an den Server übertragen werden, können mitgelesen werden, daher dürfen keine sensiblen Daten darüber übertragen werden.

Hint

pw-check/pw_check.php prüft, ob eine Query Parameter (pw=...) Sicherheitskriterien erfüllt.

Der Query String wird über ein Fragezeichen ? an die URL angehängt werden:

URL?queryString

Der queryString selbst besteht aus key=value Paaren, welche mit & voneinander getrennt werden:

URL?key=value&key2=value2

Hint

Starten des Apache Servers

Über XAMPP starten + auf localhost:80/server im Browser navigieren.

Important

Bestimmte Sonderzeichen, wie # haben eine besondere Bedeutung in der URL. Daher müssen diese bei Übergabe in einem queryString über encodeURIComponent() encodieren:

let encodedKeyword = encodeURIComponent(kennwort);

PHP decodiert diese Eingabe wieder, bevor der Wert verwendet wird.

Datenübertragung mit POST (per JSON)

Siehe server/JSON-schreiben.

Important

Bei POST werden die Daten über den request body versendet, bei GET können diese nur über URL Parameter (queryString) übermitteln und eignet sich daher nur für wenige Daten.

Hint

/JSON-schreiben/script.php: JSON wird erstellt, falls nicht vorhanden, ansonsten wird JSON wird geöffnet, die Werte verändert und geschlossen.

Hint

Wird ein Formular über den Submit-Button übertragen, werden die Daten im Formular validiert und versendet. Dies wollen wir hier unterbinden, um zunächst die Eingaben zu prüfen, ob diese nicht bereits im JSON vorhanden sind.

myForm.onsubmit = function() {
    submitFunc();
    // Absenden des Formulars unterbinden -> führt sonst zu Browser Refresh
    return false;
};

Das submit Ereignis wird am Formular ausgeführt, nicht am Button selbst (dieser hat lediglich das onclick Ereignis).

Aus Beispiel:

sendData(JSON.stringify(data));

// Daten an JSON übertragen
const sendData = function(data) {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
        if (xhr.status != 200) return;
        console.log("Gesendete Daten:", xhr.responseText);
    };
    xhr.open("POST", "./script.php");
    xhr.responseType = "";
    xhr.send(data);
}

Important

Werden Daten wiederholt vom Server angefragt sollte verhindert werden, dass diese Daten aus dem Browser-Cache kommen. Zum Deaktivieren des Caches für eine Server-Anfrage, kann über .setRequestHeader() eine entsprechende Option im Request-Header übergeben werden:

const submitFunc = function() {
    // console.log("Hallo Welt");

    // JSON Datei mit AJAX laden
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if (xhr.status != 200) return;
        const jsonData = xhr.response;  // schon als Objekt geparst
        console.log("Daten-Empfang:" + jsonData);
        checkData(jsonData);
    };
    xhr.open("GET", "./artists.json");
    xhr.responseType = "json";
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.send();
};