Multiple AJAX Requests asynchronous

Mehrere Ajax-Requests parallel absetzen um Ladezeiten zu verkürzen

Mehrere Ajax-Requests nebeneinander können die Performance beschleunigen, wenn schon asynchron, dann richtig ;)

Von Vorteil ist es, dass im Message-Body gesendete Bytesequenzen Oktetten beliebiger Wertigkeiten enthalten können und so kann ein einzelner Ajax-Request beispielsweise eine Grafikdatei transportieren oder einen anderen multimedialen Inhalt am Stück. Wenn es jedoch darum geht, die Response einem bestimmten Request eindeutig zuordnen zu können, sind ein paar Überlegungen notwendig: Der Request muss mit einer Entity (ID) getagged werden und dafür gibt es mehrere Möglichkeiten.

Die ID wird über den Request geschleift

Mit id=123 beispielsweise wird ein eigener Parameter erzeugt und wie gewöhnlich an den URL gehängt als QUERY_STRING. Eine solche Vorgehensweise empfiehlt sich für den Request, serverseitig muss dann dafür gesorgt werden, dass Daten sowohl über den Message-Body als auch über den URI zu verarbeiten sind. Ein Content-Type: application/body+query sozusagen und ein proprietärer Parser wird einfach um diesen Content-Type erweitert.

Unabhängig von Parametern im URI oder Message-Body kann aber auch ein eigener HTTP-Header für die Übertragung genutzt werden, es ist jedoch darauf zu achten, dass der Wert eines solchen Headers nur ASCII-Zeichen enthalten darf, hierzu kann vorteilhaft die Prozentkodierung verwendet werden.

Custom Request-Header

    xhr.setRequestHeader('x-param','id=123');

    /* Objekt zu einem QUERY_STRING machen */
    function query4request(request){
        var query  = '';
        var attval = [];
        for(var att in request){
            for(var i in request[att]){
                var val = encodeURIComponent( request[att][i] );
                attval.push( att+'='+val );
            }
        }
        query = attval.join(';');
        return query;
    }

Serverseitig ergibt sich ein so gesendeter QUERY_STRING aus der Server-Umgebungs-Variablen HTTP_X_PARAM und kann wie üblich geparst werden.

Custom Response-Header

Mit xhr.getResponseHeader('x-param'); gelangt auch diese Information wieder zurück zum Client. Untenstehend ein erprobter Parser:

function qparse(query, d = ';'){
    var param = {};
    var pairs = query.split(d);
    for (var i = 0; i < pairs.length; ++i){
        var [key, val] = pairs[i].split("=");
        param[key] = param[key] ? param[key] : [];
        param[key].push(decodeURIComponent(val));
    }
    return param;
}

Dem XHR-Objekt wird eine eigene ID verpasst

Wenn eine Progressbar mit dem Fortschritt des Uploads eines XHR-Objekts bedient werden soll, ist der Request noch unterwegs und die Response noch gar nicht angekommen. Aus diesem verständlichen Grund kann ja eine ID gar nicht über den Request geschleift werden sondern das XHR-Objekt muss seine eigene ID selbst kennen.

    var xhr  = new XMLHttpRequest();
    xhr.myid = 123;
    xhr.upload.myid = 123;

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.