Weniger Programmieraufwand mit dem neuen Objekt FormData
Senden Sie das Formular ...
Formulareingaben werden als Schlüssel-Werte-Paare übertragen. Sofern das mit Ajax erfolgen soll, müssen diese Eingaben serialisiert werden und dies erledigte vor HTML5 eine Library über den dedizierten Zugriff auf jedes einzelne Formularelement deren Daten schließlich im Enctype application/x-www-form-urlencoded übertragen werden konnten.
Mit dem neuen JS-Objekt FormData vereinfacht sich diese Angelegenheit enorm. Dem Konstruktor wird ganz einfach das "Formular" übergeben:
Und das wars auch schon. Aber schauen wir mal hinter die Kulissen, wie das beim Server ankommt, das sehen Sie mit einem Klick auf den ersten Button oben im Formular. Das Popup zeigt Ihnen exakt die gesendeten Daten, die serverseitig bei einem POST aus STDIN gelesen werden. Wenn Sie FormData verwenden, funktioniert das verständlicherweise nur bei einem POST mit dem enctype="multipart/form-data".
Zum weiteren Verständnis: Der clientseitig codierte enctype ergibt den HTTP-Request-Header Content-Type, womit der serverseitige Prozess erkennen kann, wie die Eingaben zu parsen sind, dafür wird auch die Boundary im Request-Header mitgeliefert. Ein Content-Type-Reponse-Header hingegen gibt dem Client bekannt, welche Inhalte zu erwarten sind, z.B. text/html oder image/gif.
Das FormData-Objekt ermöglicht das Upload über Inputfelder vom type="file" oder auch ohne dass eine Datei physikalisch über formular-input-type-file eingefügt wird. Der serverseitige Prozess erkennt ein Upload daran, dass es im Komponenten-Header den Parameter filename gibt. Zur Erinnerung: Der Enctype="multipart/form-data" beschreibt eine Multipart-Message, sie besteht aus mehreren Komponenten. Jede Komponente (subpart) hat einen eigenen Header, welcher optional den Content-Type beschreibt und die einzelnen Komponenten sind mit einer boundary voneinander getrennt, Beispiel siehe oben.
Maßgeblich dafür, dass ein solches Upload emuliert wird: Aus den Eingaben ins DOM wird ein Blob erstellt:
formData.append('file', new Blob([data], { type: 'text/plain; charset=UTF-8' }));
Und damit die Methode FormData.append() aufgerufen. Grundsätzlich überträgt HTTP keine Objekte sondern Bytesequenzen, egal ob JSON oder XML. Für obenstehende DEMO wird ein FormData-Objekt im scalaren Kontext gesendet und auch wieder empfangen. Das heißt: Übertragen werden serialisierte Daten, nicht jedoch das Objekt an sich.
Die übertragene Bytesequenz enthält jedoch alle Daten, die eine Wiederherstellung abstrakter Datenstrukturen ermöglichen. Letztendlich jedoch, gibt es zweckmäßigere Lösungen zum Serialisieren komplexer und insbesondere zyklischer Datenstukturen. Für einen asynchronen Request werden verschiedene Response-Types akzeptiert (Default ist text):
xhr.responseType = 'text' || ['arraybuffer', 'blob', 'document']
Der callback-Funktion wird dann callbackfunktion(xhr.response); übergeben, wenn responseType klassifiziert wurde.
Eine FormData-Instanz kapselt die Formulardaten im Enctype multipart/form-data. Sofern der Wunsch besteht, diesen Enctype umzuwandeln in den Default-Enctype application/x-www-form-urlencoded, kann dies mit untenstehendem CODE gemacht werden:
// multipart/form-data
var fdata = new FormData(form);
var q = new URLSearchParams();
for (const [key, val] of fdata.entries()) {
q.append( key, val );
}
// application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send( q );
Hinweis: Wenn das URLSearchParams() Objekt übergeben wird, also nicht der String, generiert xhr spontan den richtigen Content-Type-Header.
Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de und wenn Sie möchten daß mein Prepaid nicht verfällt dürfen Sie mich auch gerne anrufen 01625 26 40 76.