Drei Demos für die Anwendung der fetch-API

  • Ich möchte an dieser Stelle drei Demos für die grundlegende Anwendung der fetch-API vorstellen. Diese ermöglicht es, Daten an den Server zu übertragen ohne die Seite durch das Abschicken eines Formulars neu zu laden. In meinen Augen ist sie einfacher und übersichtlicher als das ältere XMLHttpRequest und daher meine bevorzugte Methode. Die Demos beschränken sich jeweils auf den Kern der Sache. Erweiterte Funktionen, z. B. Validierung der Daten, müssen ggf. noch hinzu gefügt werden. Anstatt den Code im Text zu erklären, habe ich jeweils Kommentare eingefügt.


    Demo 1: Formulardaten an den Server schicken

    Demo 2: Daten ohne Formular an den Server schicken

    Für die Übertragung von Daten ist ein Formular nicht erforderlich. Sie können in das FormData-Objekt direkt eingetragen werden:

    Zum Testen der Demos verwende ich dieses kurze PHP-Skript:

    testpost.php

    PHP
    1. <?php
    2. ini_set('display_errors', '1');
    3. error_reporting(E_ALL);
    4. // Alle POST-Parameter mit var_dump ausgeben:
    5. var_dump($_POST);
    6. // Jeden einzelnen POST-Parameter mit echo ausgeben:
    7. foreach ($_POST as $key => $value) {
    8. echo $key . ": " . $value . "<br>";
    9. }

    Demo 3: Datei zum Server hochladen

    Zum Testen dieser Demo verwende ich dieses kurze PHP-Skript:

    upload.php

    Auch hier müssen ggf. noch weitere Funktionen hinzu gefügt werden: Beschränkung des Typs, z. B. auf Bilddateien, Beschränkung der Dateigröße etc.

    Hier muss auf eine Einschränkung der fetch-API hingewiesen werden: Sie unterstützt, anders als das ältere XMLHttpRequest, keine Fortschrittsanzeige.