Schlagwort: Ajax

[Snippet/Javascript] sendeAnfrage – Ajax leicht gemacht

André Schreib einen Kommentar

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

[Snippet/Javascript] sammleDaten

André Ein Kommentar

Wenn man ein Formular mit Ajax abschicken will kommt man schnell in die Situation,
dass man sich die Daten oder einen Datensatz selbst zusammenbauen muss.
Mit jQuery ist das kein Problem, ohne sieht die Sache da aber schon ganz anders aus.

Meine Funktion geht Rekursive das übergebene HTMLElement durch und guckt ob es ein
Typisches Formular Element ist (Textarea, Input und Selextbox). Ist das der Fall wird der
Value mit dem Namen in einem Array gespeichert und am Ende zurückgegeben.

/**
 *
 * Liefert alle Daten aus einem Formular in einem Array
 *
 * @param formular HTMLElement Formular in dem nach Daten gesucht werden soll
 * @return Array Im Format ["key=value","key=value"]
 *
 */

function sammleDaten(formular) {
    var daten = [];
    var ue = formular.childNodes;
    for (var i in ue) {
        if (ue[i].tagName && ue[i].name &&
            (ue[i].tagName == "INPUT" || ue[i].tagName == "TEXTAREA" || ue[i].tagName == "SELECT")) {
            var inhalt = null;
            if (ue[i].value) {
                inhalt = ue[i].value;
            }
            daten.push(ue[i].name + "=" + inhalt);
        }
        daten = daten.concat(sammleDaten(ue[i]));
    }
    return daten;
}