Der Anti-Hype

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.

In den Suchwörtern mit denen Besucher auf die Seite kommen tauchen manchmal Fragen auf, die wurden hier nie beantwortet geschweige denn gestellt. Aber ich versuch mal ein paar davon zu beantworten

• wie lange läuft Verlibt in Berlin noch

Verliebt in Berlin läuft bist Frühherbst 2006 mit super toller Finalshow. Vermutlich wird es danach neue Geschichten mit neuen Hauptdarstellern geben (Quelle: Wikipedia)

• Mail xajax

Ich vermute mal es geht darum eine Mail per Xajax zu versenden, beispielsweise ein Kontaktformular, welches ohne neuladen der Seite etwas mailt?

In den “xajax mit Ajax”-Artikel finden sich beispiele für Xajax, besonders die Formular-Beispiele sollten hilfreich sein. Mit mail() sollte man dann auch eine Mail verschicken können. Aufpassen sollte man aber, dass man die Formulardaten ausreichend validiert, weil unsichere Kontaktformulare u.ä. gerne fürs Spamming missbraucht werden.

• php sichere Zufallszahlen

rand() erzeugt nur Pseudozufallszahlen, die Funktion mt_rand() soll immerhin bessere Zufallszahlen erzeugen, “die auch kryptografischen Ansprüchen genügen sollten”.

• man /dev/random

Sowas sollte man eventuell eher in seine Shell eingeben statt in die Suchmaschine ;), aber dann eventuell lieber “man urandom”. Ansonsten Manpages kann man auch Online lesen:

http://unixhelp.ed.ac.uk/CGI/man-cgi

• Tokio Hotel stundenplan

Hmz!! Okay. Hier:

[Bild nicht mehr online! Sorry!]

Da erinnerte ich mich beim Abschicken des letzten Postings doch an was. Hier nun also für die Fans und Antifans wertvolles Material nach dem wohl hier gesucht wird.

[Bild nicht mehr online! Sorry!]

Damals gesehen bei Dobschat.

Plötzlich machte es Klick und sie waren da - gleich hier auf der Seite! Wer? Die Tokio-Hotel-Fans, jedenfalls wenn man der Statistik glauben mag, denn da tauschen nun jede menge Suchwörter auf:

• stundenplan tokyo hotel download
• stundenpläne tokiohotel
• stundenpläne von tokio hotel
• interviews zum free download tokio hotel
• routine tokio hotel
• Anti Tokio Hotel
• tokiohotel stundenplan
• tokio hotel interviews
• tokio hotel anti

… und noch viele mehr!

Liebe Tokio Hotel Fans und Hasser,

hier auf der Seite gibt es weder Tokio Hotel Stundenpläne noch Interviews zum Download. Auch anderes gibt es hier nicht zum Thema Tokio Hotel. Eigentlich überhaupt nichts. Ihr seid aber trotzdem herzlich willkommen. Bitte beachtet aber, dass hier weiterhin keine Kommentare hinterlassen werden sollten.

Gruß,

Der Anti-Hype

Das hier schon mal kurz erwähnte neue Bookmarksystem Places von Firefox wird jetzt doch erst in Version 3.0 erscheinen statt wie bisher geplant in der nächsten großen Version 2.0.

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.

Als ich mich entschied diesen kleinen Anti-Hype-Blog ganz spontan zu starten wollte ich nicht groß irgendwelche Software einrichten sondern sofort loslegen und "einfach mal was schreiben".

Also kramte ich kurz in meinen Erinnerungen und da fiel mir Blogger.com ein, die ja inzwischen zu Google gehören. Zu Google kann man inzwischen stehen wie man möchte, jedoch ist die Qualität der Web-Anwendungen eigentlich immer gut.

Und so war ich kurzer Hand registriert bei Blogger.com. Nachdem ich dann angefangen hatte fiel mir auf, dass ich keine direkte Möglichkeit hatte zu überprüfen wieviele Leute jetzt überhaupt den Blog lesen. Die Möglichkeit das ganze Stylesheet anzupassen war allerdings ganz nett. Leider unterstützte Blogger.com weder Pingbacks noch Trackbacks, die ich als Neu-Blogger doch gerne mal getestet hätte.

Schließlich suchte ich mir eine neue Plattform. Blog.de - wie naheliegend - war mein neues Ziel. Dort konnte ich Trackbacks nutzen, allerdings fand ich die Standard-Designs nicht gerade ansprechend und auch mit Google-Anzeigen war man nicht gerade sparsam. Teilweise wurde das Design regelrecht zerlegt und einige Text-Bereiche überlagerten wiederum andere. Auch dort fühlte ich mich nicht wohl.

In Erinnerung hatte ich da noch die WordPress-Software, die unter anderem ja auch Spreeblick einsetzt. Mein erstes Ziel war also wordpress.com während ich überlegte doch den aufwändigeren Weg zu gehen und irgendwas selbst einrichten zu müssen, was eventuell wieder Sicherheitslücken mitbringt. Erstaunt musste ich feststellen, dass wordpress.com selbst nur ein Service war, bei dem man seinen eigenen Blog erstellen konnte - mittels WordPress. Die eigentliche Software gab es bei wordpress.org.

Nach kurzer Zeit war ich also auch bei wordpress.com registriert. Und ich war erstaunt. Die Software übersichtlich. Schicke Designs. Pingbacks und Trackbacks. Zwar nicht totale Anpassungsmöglichkeiten wie bei blogger.com, aber dafür zu 100% ebenfalls werbefrei. Und seit ich registriert bin wurde auch fleissig am Backend gebastelt. Ich bin doch recht zufrieden.

Ein abschliessendes Fazit möchte ich nun nicht geben - eine Meinung bildet man sich am besten selbst und aus mehreren Quellen. Soviel nur dazu von mir - aus dieser Quelle ;)