[Snippet/Javascript] sendeAnfrage – Ajax leicht gemacht

Hier ist eine Beispielhafte, minimale Implementierung des HTTPRequestObjects.
Die Funktion kann schnell eingebunden werden um Inhalte nachzuladen oder
allgemein Ajax zu ermöglichen. Zusammen mit meiner Funktion sammleDaten()
steht dem Eisatz von Ajax nichts mehr im Weg und hat sich in Zahlreichen Projekten
bewert.

/**
 *
 * Sendet eine Ajax-Anfrage an einen Server
 *
 * @param methode String POST oder GET / Wird etwas anderes übergeben wird GET verwendet
 * @param zielUrl String An Was die Anfrage geschickt werden soll (z.B. ein Skript auf dem Server)
 * @param verarbeiter CallBack Function JS-Funktion die die Rückgabe
 * des Servers verarbeitet und die Rückgabe als Parameter bekommt
 * (optional)
 * @param parameter String / Array Parameter die an den Server geschickt
 * werden sollen. Entweder einer als String Bsp.: "kekse=true" oder
 * mehrere als Array Bsp.: ["kekse=true","kuchen=false"]
 * (optional)
 * @return Rückgabe des verarbeiters, falls kein Verarbeiter gesetzt ist true
 * bei Erfolg und false bei Fehlschlag
 *
 */

function sendeAnfrage(methode, zielUrl, parameter, verarbeiter) {
    if (parameter && parameter.constructor == Function) {
        verarbeiter = parameter;
        parameter = undefined;
    }

    methode = methode.toUpperCase();
    if (methode != "POST" && methode != "GET") methode = "GET";

    var request = null;
    if (window.XMLHttpRequest) request = new window.XMLHttpRequest();
    if (window.ActiveXObject) request = new window.ActiveXObject("Microsoft.XMLHTTP");
    if (request == null) return false;

    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            var rueckgabe = request.responseText;
            if (request.status == 200) {
                if (verarbeiter != null) return verarbeiter(rueckgabe);
                return true;
            }
            return false;
        }
    }

    var uebertraeger = null;
    if (parameter !== undefined) {
        if (parameter.constructor == Array) {
            for (var i in parameter) {
                if (i > 0) uebertraeger = uebertraeger + parameter[i] + "&";
                else uebertraeger = parameter[i] + "&";
            }
        } else uebertraeger = parameter;
    }

    if (methode == "GET" && uebertraeger != null) zielUrl = zielUrl + "?" + uebertraeger;
    request.open(methode, zielUrl, true);
    if (methode == "POST") request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(uebertraeger);

}

Beispiel für die Verwendung:

 

// Initialisieren
var initialisirenFunktionen = [];
onload = function () {
    for (var i in initialisirenFunktionen) initialisirenFunktionen[i]();
}

// Erstelle LoadBereich
initialisirenFunktionen.push(function () {
    var loadContent = document.createElement("DIV");
    loadContent.id = "loadContent";
    document.body.appendChild(loadContent);
});

// Reichere AjaxButton um Anfrage-Event an
initialisirenFunktionen.push(function () {
    var sendenButton = document.getElementById("senden");
    sendenButton.onclick = function () {
        sendeAnfrage("POST", "MeinServlet", sammleDaten(document.meinForm), schreibeResponseInLoadBox);
    };
});

// CallbackFunktion für die Ajax-Anfrage (Ergebniss verarbeiten)

function schreibeResponseInLoadBox(r) {
    var loadContent = document.getElementById("loadContent");
    loadContent.innerHTML = r;
}