XHRSimple ist eine eigens entwickelte Klasse um das Programmieren zu erleichtern
Betrachte den Code untenstehend, das ist die übliche Vorgehensweise:
let xhr = new XMLHttpRequest();
let data = new FormData(form);
data.append('upload','1');
xhr.open('POST','/xhr.html');
xhr.responseType = 'json';
xhr.onload = callback;
xhr.upload.onprogress = progress;
xhr.send(data);
let xhr = new XHR(callback, progress);
let data = new FormData(form);
data.append('upload','1');
xhr.post('/xhr.html', data, 'json');
Nur noch 4 Zeilen anstelle 8 Zeilen! Und natürlich wird auch der Code extrem einfach wenn bspw. mal eben ein Image als ArrayBuffer vom Server geholt werden soll:
let xhr = new XHR(callback);
xhr.get('/red.gif', 'arraybuffer');
Simuliere ein Upload mit diesem Button:
Die Progressbar wird wird automatisch in das Elternelement des Upload-Button eingehängt und erscheint so neben diesem solange das Upload im Gange ist.
In JavaScript implementiert jede Funktion praktisch sowohl eine eigene Klasse als auch den Konstruktor. So heißt die Funktion der hier vorgestellten Klasse schlicht und einfach XHR() und innerhalb derer sind alle weiteren Methoden für die Instanz definiert. Die Instanz bekommt eine wichtige Eigenschaft zugewiesen:
// XHR Simple
function XHR(callback, progress){
// Objekt als eine Eigenschaft zuweisen
this.xhr = new XMLHttpRequest();
// Methoden für die Instanz
this.post = function(url, data, responsetype){
this.xhr.open('POST', url);
/* usw. */
};
}
Und findet sich in jeder Methode als this.
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.