agile coding

Bei HTML Formularen kann man im Grunde zwischen zwei Übermittlungsmethoden (über POST oder GET) wählen. Beide Übermittlungsmethoden laden nach dem Absenden das Skript was man im Attribut action angegeben hat. Schauen wir uns ein Beispiel an Hand eines einfachen Log-In Formulars:

Dieses Beispiel Formular fordert den Anwender einen Username und ein Passwort einzugeben. Sobald der Anwender das getan hat und den Log-in-Button betätigt, wird das Skript target.php in den Browser geladen.

Bei zeitgemäßen Webanwendungen verwendet man heute oft AJAX, um nicht die vollständige Seite zu laden, sondern nur Teil-Objekte nach zu laden. Wenn wir jetzt das vorgenannte Log-In Formular auf AJAX umstellen, tauchen wir das Attribut action gegen  onsubmit austauschen:

Wenn der Anwender nun diese Formular ausgefüllt hat und absendet, wird die AJAX-Funktion post_ajx_modal() aufgerufen. Beim Aufruf der AJAX-Funktion wird gleichzeitig das gesamte Formular als HTML Objekt übergeben. Das ist wichtig, da wir nun innerhalb der AJAX-Funktion das Formular „auseinandernehmen“ und die eingegebenen Werte des Anwenders in der AJAX-Funktion aufbereiten:

function post_ajx_modal(func) {
    if(document.getElementById('loader').style.display == 'none'){
        var new_data = '';
        var nodes = func.childNodes;
        for(i=0; i<nodes.length; i+=1) {
            if (nodes[i].value){
                new_data = new_data + '&' + nodes[i].id;
                new_data = new_data + '=' + nodes[i].value;
            }
        }
        $.ajax({
            type: "POST",
            url: "ajx.php",
            data: "function=" + func.id + new_data,
            success: function(phpData){
                document.getElementById('fancy').innerHTML = phpData;
            }
        })
    }
}

Betrachten wir die AJAX-Funktion mal Schritt für Schritt. Die Zeile prüft nach, ob ein HTML mit der ID loader gerade nicht sichtbar ist:

if(document.getElementById('loader').style.display == 'none')

Das benutze ich um sicherzustellen, dass nicht mehrere AJAX-Funktionen durch den Anwender aufgerufen werden können. Quais, wenn gerade etwas geladen wird, kann man erst keine weitere AJAX-Funktion ausführen. Somit verhindert man auch, das die gleiche AJAX-Funktion mehrfach ausgeführt wird.

var new_data = '';
var nodes = func.childNodes;
for(i=0; i<nodes.length; i+=1) {
            if (nodes[i].value){
                new_data = new_data + '&' + nodes[i].id;
                new_data = new_data + '=' + nodes[i].value;
            }
}

In diesem Abschnitt der AJAX-Funktion werden die Kinder-Elemente des übergebenen Formulars ausgewertet und jeweils die ID und der zugehörige VALUE mit Trennzeichen in die Variable new_data geschrieben. Die Variable new_data wird dann im AJAX-Aufruf wiederum an das Backendscript ajx.php übergeben:

$.ajax({
        type: "POST",
        url: "ajx.php",
        data: "function=" + func.id + new_data,
        success: function(phpData){  
        document.getElementById('fancy').innerHTML = phpData;
       })

Somit hat man eine universell verwendbare AJAX-Funktion, über die man verschiedene Input-Boxen und Werte verarbeiten kann.