AJAX Requests leicht gemacht mit XHRSimple

XHRSimple ist eine eigens entwickelte Klasse um das Programmieren zu erleichtern

Legacy Code for XMLHttpRequest

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);

Code by my Class XHRSimple

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');

Eine Fortschrittanzeige wird automatisch erzeugt

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.

Objektorientierte Programmierung

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. s​os­@rolf­rost.de.