Der Anti-Hype

Am meisten werden hier ja immernoch die Xajax-Artikel besucht und gefunden. Nun sind die Artikel allerdings schon etwas älter und auch Xajax hat sich inzwischen weiterentwickelt. Schon eine ganze Weile plane ich eigentlich mal neue Artikel zu veröffentlichen. Nur so richtig Themen fallen mir dabei nicht ein. Gibt es Xajax-technisch eventuell irgendwelche Wünsche denen man sich annehmen könnte?

Zum Abschluss möchte ich noch ein paar nützliche Methoden des Xajax-Objekt und des
XajaxResponse-Objekt zeigen. Dies ist natürliche keine komplette Referenz, dazu sollte
auf das Xajax-Wiki zurückgegriffen werden.

XajaxResponse Methoden zur Manipulation von Inhalten

In den Beispielaufrufen habe ich einige Standardwerte benutzt, die für folgendes stehen sollen:

id => Die ID eines HTML-Elements, die mit dem id-Attribut zugewiesen wurde, z.B. <div id="meineID">..</div>

attribut => Ein Attribut eines HTML-Elements, also z.B. innerHtml, value oder size (..)

text => Ein beliebiger Text oder HTML-Code, der irgendwo eingesetzt, ersetzt, etc.. wird.

script => Beliebiger JavaScript-Code.

URL => Eine URL

addAssign
Ein Attribut verändern
$response->addAssign("id", "attribut", "text");

addAppend
Weitere Daten anhängen
$response->addAppend("id", "attribut", "text");

addPrepend
Weitere Daten vorne anhängen
$response->addPrepend("id", "attribut", "text");

addReplace
Daten (teilweise) ersetzen
$response->addReplace("id", "attribut", "alter_text", "neuer_text");

addScript
JavaScript-Code hinzufügen
$response->addScript("script");

addClear
Leert den Inhalt eines Attribut
$response->addClear("id", "attribut");

addAlert
Eine JavaScript Alert-Box anzeigen
$response->addAlert("text");

addRedirect
(JavaScript-) Weiterleitung an eine andere URL
$response->addRedirect("url");

addRemove
Entfernt ein Element
$reponse->addRemove("id");

addCreate
Erzeugt ein neues Element innerhalb des Elements der zuerst angegebenen ID.
$response->addCreate("elternID", "neuesElement", "neueID");
$response->addCreate("haus", "div", "tuer");

addInsert
Ein Element vor einem anderen Element einfügen
$response->addInsert("vorID", "element", "id");

addInsertAfter
Ein Element hinter einem anderen Element einfügen
$response->addInsertAfter("vorID", "element", "id");

addIncludeScript
Eine JavaScript-Datei einfügen
$response->addIncludeScript("datei/url");

Nützliche Xajax-Methoden

Die Methoden debugOn(); und debugOff(); sind hilfreich für das Debugging. Dadurch, dass Xajax einen
Großteil der nötigen Aufgaben übernimmt weiß man evtl. nicht mehr an welcher Stelle
ein Problem eintritt. Mit aktiviertem Debug-Modus informieren Alert()-Boxen über jeden
Ausführungsschritt und Fehler lassen sich besser finden.

Mit der Methode setLogFile(); können die Meldungen auch in einer Datei gespeichert werden.

Um den Code sauber zu trennen möchte man eventuell Funktionen auslagern. Mit der
Methode registerExternalFunction(); können Funktionen aus anderen Dateien benutzt werden ohne
dass diese erst per include verfügbar gemacht werden müssen. Xajax fügt den entsprechenden
Code dann dynamisch ein wenn die Funktion gebraucht wird.
$xajax->registerExternalFunction("funktionsname", "datei.php");

Mit registerCatchAllFunction(); kann eine CatchAll-Funktion definiert werden, die immer aufgerufen wird,
wenn Xajax eine registrierte Funktion nicht finden kann und kann somit auch benutzt werden um dynamisch
auf Anfragen zu reagieren die nicht vorher genau definiert sind.

In den bisherigen Beispielen wurde printJavaScript(); zur Ausgabe des JavaScript-Codes
benutzt. Möchte man den JavaScript-Code nicht direkt ausgeben sondern in einer Variable vorliegen haben
um beispielsweise ein Template-System zu benutzen, dann erfüllt getJavascript(); diese Aufgabe.

Ein wichtiger Teil für die Nutzung von Ajax fehlt aber noch - die Verarbeitung von Formularen. Bei vielen Ajax-Anwendungen trägt man etwas in ein Formular ein und nach dem Abschicken passiert etwas ohne das die eigentliche Seite neuladen muss. Wie das mit Xajax geht zeigt das nächste Beispiel. Dort wird ein Login realisiert. Nach Klick auf den Login-Button werden die Eingaben an den Server geschickt - ist der Login erfolgreich so wird "Hello $username" ausgegeben und das Formular verschwindet. Ist der Login nicht erfolgreich so wird eine entsprechende Meldung ausgegeben und der Benutzer kann sich nochmals versuchen einzuloggen.

<?php

    include("xajax.inc.php");

    $xajax = new xajax();

    function login($data) {
        // (1) formular daten
        $user = $data['user'];
        $password = $data['password'];
        $response = new xajaxResponse();

        // (2) login …

        if($loginSuccess) {
            // (3) login erfolgreich
            $response->addAssign("inhalt", "innerHtml", "Hallo ".$username."!");
        }
        else {
            // (4) login nicht erfolgreich
            $response->addAssign('info', 'value', 'Login fehlgeschlagen!');
            $response->addAssign('submitButton', 'value', 'Nochmal');
            $response->addAssign('submitButton', 'disabled', false);
            $response->addAssign('userInput', 'disabled', false);
            $response->addAssign('userPassword', 'disabled', false);
        }

        return $response->getXML();
    }

    $xajax->registerFunction("login");

    $xajax->processRequests();

?>

<html>
    <head>
        <title>ajax mit xajax</title>
        <? $xajax->printJavascript(); ?>
        <script type="text/javascript">
            function doLogin() {
                // (5) Formular lokal manipulieren und abschicken
                xajax.$('submitButton').value = 'Bitte warten…';
                xajax.$('submitButton').disabled = true;
                xajax.$('userInput').disabled = true;
                xajax.$('userPassword').disabled = true;
                xajax_login(xajax.getFormValues("loginForm"));
                return false;
            }
        </script>
</head>
<body>
    <div id="inhalt">
        <span id="info"> </span><br />
        <form onSubmit="doLogin()" id="loginForm">
            Benutzer:
            <input type="text" name="user" id="userInput"><br />
            Passwort:
            <input type="password" name="password" id="passwordInput"><br />
            <input type="submit" value="Login" id="submitButton">
        </form>
    </div>
</body>
</html>

Was passiert diesmal? Wir definieren abermals eine PHP-Funktion, diesmal mit dem Namen "login". Diese Funktion bekommt einen Parameter übergeben (data), der unsere Formulardaten enthält. Woher diese kommen schauen wir uns später an. In (1) übernehmen wir die Logindaten aus dem Array in lokale Variablen und erzeugen das Response-Objekt.

In (2) würde der eigentliche Login stattfinden, bspw. eine Datenbank zu den Daten abgefragt werden. Dieser Teil ist nicht im Beispiel, weil dies mit Ajax selbst nichts zu tun hat. Im weiteren Verlauf wird angenommen, dass der Login-Teil eine Variable $loginSuccess auf true setzt für einen erfolgreichen Login und auf false für einen nicht erfolgreichen Versuch.

War der Versuch also erfolgreich, dann setzen wir in (3) den Inhalt unseres <div> mit der id "inhalt" auf "Hallo $username!". In (4) geben wir, falls der Login nicht erfolgreich war, eine Fehlermeldung in ein Extra-Element mit der id "info". Anschließend wird das Formular zurückgesetzt, wofür genau, dafür schauen wir uns am besten jetzt mal (5) an.

Dort haben wir eine eigene JavaScript-Funktion geschrieben, die mittels des onSubmit-Attribut des form-Element das Abschicken des Formulars für uns abfängt. Auf den ersten Blick scheint das ganze etwas kryptisch auszusehen, aber eigentlich rufen wir eine Funktion $() auf, die uns das xajax-JavaScript-Objekt zur Verfügung stellt. Die $()-Funktion ist eigentlich nur eine Abkürzung für document.getElementById() und liefert uns also eine Objektrepräsentation eines Elements an Hand seiner ID.

Wir holen uns also 3 Elemente: Zunächst den Submit-Button, dessen Text wir von "Login" auf "Bitte warten…" setzen. Zusätzlich deaktivieren wir ihn, damit der Benutzer nicht erneut drauf klicken kann. Dann holen wir uns die Eingabefelder für Benutzername und Passwort. Auch diese deaktivieren wir.

Schließlich rufen wir die von Xajax erzeugte Funktion xajax_login auf, die sich darum kümmert unsere login()-PHP-Funktion auf dem Server aufzurufen. Als Parameter müssen wir noch die Formulardaten als Array übergeben - dabei hilft uns wiederum eine einfache Methode des Xajax-Objekt: getFormValues(). Dieser Methode brauchen wir nur noch die ID des Formulars übergeben und den Rest übernimmt nun wieder Xajax.

Abschließend nochmal zurück zu (4). Da wir die Formularfelder und den SubmitButton deaktivieren, müssen wir diese bei einem Fehlversuch wieder aktivieren, damit der Benutzer überhaupt die Möglichkeit hat sich noch einmal einzuloggen und dies ist was Dort passiert. Statt auf "Login" setzen wir den SubmitButton-Text diesmal auf "Nochmal" und aktivieren ihn sowie die Eingabefelder wieder.

Schauen wir uns direkt die veränderte Hülle aus Teil 2.1 an.

<?php

include("xajax.inc.php");

$xajax = new xajax();

function helloWorld() {
    // (1) xajaxRespone Objekt erzeugen
    $response = new xajaxResponse();
    // (2) Rueckgabe definieren.
    $response->addAssign("inhalt", "innerHTML", "Hello World!");
    // (2) XML-Code zurueckgeben
    return $response->getXML();
}

$xajax->registerFunction("helloWorld");

$xajax->processRequests();

?>
<html>
<head>
    <title>ajax mit xajax</title>
    <? $xajax->printJavascript(); ?>
</head>
<body>
    <div id="inhalt">
        <a href="#" onClick="xajax_helloWorld()">Hello!</a>
    </div>
</body>
</html>

Das Beispiel ist ähnlich wie das Erste aufgebaut, deshalb schauen wir uns diesmal nur an was sich innerhalb der helloWorld()-PHP-Funktion tut. Zunächst erzeugen wir in (1) ein xajaxResponse-Objekt. Dies wird wiederum alles Nötige für die Rückgabe von uns abschirmen und wir brauchen uns nur darum zu kümmern, was zurückgegeben werden soll und was sich tun soll nach dem Aufruf, das "Wie" überlassen wir Xajax.

Auf unserem Xajax-Objekt benutzen wir die Methode addAssign(). Damit sagen wir, dass wir von dem HTML-Element mit der ID "inhalt" (siehe <div id="inhalt">…</div&gt den inneren HTML-Code (innerHTML) durch etwas anderes (Hello World!) ersetzen möchten. Anschließend geben wir mit der Methode getXML() den nötigen XML-Code zurück. Den wird Xajax auf der Client-Seite annehmen und die entsprechenden Änderungen ausführen.

Was passiert also im Beispiel? Im div-Element mit der ID "inhalt" ist ein Link mit dem Titel "Hello", der beim Aufruf über die oben genannte Kette ersetzt wird durch den Text "Hello World!"

Seit Xajax 0.2 ist eine Rückgabe mit der getXML-Methode return $response->getXML(); nicht mehr nötig und es reicht direkt das Response-Objekt zurückzugeben return $response;

Wegen einiger Probleme mit WordPress beim Einfügen von vorfomatiertem Code habe ich den zweiten Teil in 4 Unterteile aufgeteilt, das erleichtert dann etwas die Arbeit ohne das bei jedem Editieren wieder die ganze Formatierung weg ist.

Nachdem Teil 1 eine kurze Einführung in Ajax war, gibt es jetzt in Teil 2 endlich ein wenig Code zu sehen. Und los geht's
<?php

    // (1) xajax einfuegen
    include("xajax.inc.php");

    // (2) xajax objekt erzeugen
    $xajax = new xajax();

    /**
     * (3)
     * Eine "normale" PHP-Funktion, die spaeter mittels
     * JavaScript im Hintergrund aufgerufen werden soll
     */
    function doMagicAjax() {
        // code
    }

    // (4) funktion "registrieren"
    $xajax->registerFunction("doMagicAjax");

    // (5) "ajax-anfragen" bearbeiten
    $xajax->processRequests();

?>
<html>
<head>
    <title>ajax mit xajax</title>
<?
    // (6) noetigen javascript code ausgeben
    $xajax->printJavascript();
?>
</head>
<body>
    <a href="#" onClick="xajax_doMagicAjax()">Let's do some magic</a>
</body>
</html>

Der obere Code zeigt ein kleine Hülle für eine Xajax-Anwendung. In (1) fügen wir den Xajax-Code ein um in (2) ein Xajax-Objekt zu erzeugen. In (3) definieren wir eine "normale" PHP-Funktion, diese soll später über Javascript auf dem Server aufgerufen werden, oder genauer: Per XMLHttpRequest bauen wir eine Verbindung zum Server auf und sagen ihm bzw. Xajax, dass wir genau diese Funktion jetzt ausführen möchten. Darum müssen wir uns aber nicht kümmern, denn in (4) "registrieren" wir die Funktion bei Xajax und Xajax wird den entsprechenden Code selbst generieren. In (5) soll Xajax eventuell auftretende Requests bearbeiten. Das soll bedeuten, falls ein solcher XMLHttpRequest abgesetzt wird, wird wiederum die aktuelle Seite für die Bearbeitung "aufgerufen". An dieser Stelle soll Xajax die weitere Ausführung stoppen und eventuelle Anfragen bearbeiten und wenn nötig entsprechende Funktionen aufrufen. In (6) brauchen wir mittels der Methode printJavascript() lediglich den JavaScript-Code ausgeben lassen.

Im unteren HTML-Teil des Beispiels ist ein Link definiert, der bei Klick die Javascript-Funktion xajax_doMagicAjax() aufruft, dies entspricht der automatisch von Xajax erzeugten Funktion für unsere PHP-Funktion doMagicAjax(). Was also nun nur noch nötig ist, ist das entsprechende Aufrufen des Funktionsnamen mit dem Prefix xajax_ und den Rest bis zur Ausführung der PHP-Funktion übernimmt Xajax.

Bisher wird sich nicht viel tun, schließlich ist die Funktion noch leer und ohne Möglichkeit etwas Zurückzugeben und auch HTML zu manipulieren ist das noch nicht so spannend. Also schauen wir im nächsten Teil ein weiteres Beispiel an.

Erstmal: Ein großes Sorry ein alle Leute, die täglich den "Ajax mit Xajax"-Artikel aufrufen. Ihr, die ihr hauptsächlich von Carsten Dobschat kommt (Danke für die Visits :)). Ich glaube ihr wartet teilweise sicherlich auf Teil 2 und ich habe mir auch einiges an Zeit gelassen.

Der Beispiel-Code ist fertig, nur ein wenig Zeit fehlte mir um noch den Text für drumherum zu schreiben. Aber dafür habe ich mir morgen Zeit reserviert. Wenn nichts schief geht, dann bekommt ihr morgen garantiert den zweiten Teil

Ajax (Asynchronous Javascript and XML) ist definitiv ein Hype. Also ist es längst einmal an der Zeit sich anzuschauen was Ajax überhaupt ist und am Beispiel eines Frameworks (xajax) anzuschauen wie man das ganze umsetzen kann.
Read the rest of this entry »