hasematzel.de

Für das Nachladen meiner del.icio.us-Bookmarks in der rechten Spalte hatte ich zunächst das kleine JavaScript-Framework moo.fx, bzw. mootools vorgesehen. Selbst inklusive des AJAX-Moduls des moo-Bundles, ergaben die Dateien zusammen nur 4,83 KB – was ich für das Laden eines Frameworks für geradezu vorbildlich halte.

Doch die Mailingliste der Webkrauts und Dirk Ginader brachten mich auf jQuery, eine weitere Bibliothek neben dem bekannten prototype, moo.fx und all’ den anderen. Gerrit van Aaken beschreibt in Wort und Bild eindrucksvoll die Unterschiede der Bibliotheken und die Eigenschaften von jQuery. Grund genug also, die auf 18 KB komprimierten Zeilen einmal auszuprobieren.

Serverseitig

Da ich die del.icio.us-API nicht so gerne mag und möglichst wenig mit client-seitigen Skripten machen will, nutze ich PHP und MagpieRSS, um mir die Liste meiner Bookmarks im RSS-Format von del.icio.us zu holen. Ein paar wenige Zeilen php-Code reichen aus:

$feedurl = "http://del.icio.us/rss/Hasematzel/";
$num_items = 10;
$rss = fetch_rss ($feedurl);
$items = array_slice ($rss->items, 0, $num_items);

Damit habe ich meine letzten 10 del.icio.us-Einträge im Array $items. Mit einer foreach-Schleife werden diese nun durchlaufen und direkt ausgegeben. Zugegeben: Mit dem “X” aus AJAX hat das nun nicht mehr viel zu tun. Stattdessen wird der gelieferte Output einfach in das DOM geschrieben.

Clientseitig

Zu diesem Zweck wird die komprimierte jQuery-Klasse geladen. Ziemlich einfach erzeugt man mit jQuery einen Event-Handler für das Laden des Dokumentes:

$(document).ready (function ()
{
    // ...myfunction
});

Ist JavaScript im Browser nicht eingeschaltet oder nicht verfügbar, erfolgt ein entsprechender Hinweis, der sollte aber tunlichst schnell verschwinden, wenn das Skript ablaufen darf. Dazu dient die Methode hide():

$(document).ready (function ()
{
    $('#mylinks').hide();
});

Wie man sieht, verwendet jQuery eine ähnlich Notation wie CSS. Dadurch wird vielen Leuten der Einstieg leichter fallen als bei den anderen Bibliotheken. Erklärung: Ist das Dokument geladen, wird das Element #mylinks so schnell wie möglich versteckt. Danach erfolgt der HTTP-Aufruf der Links vom zuvor erstellten PHP-Dokument (die Einfachheit hat mich ein wenig verblüfft):

$('#mylinks').load(
'http://hasematzel.de/sandbox/rss/ajax-delicious.php',
function(){
  $('#mylinks').show('slow');
});

Der Methodenaufruf von load folgt also dem üblichen Schema: …(URI,Params,Callback). Die Zusammensetzung der Parameter gleichen sich bei vielen der Bibliotheken. Das ganze Skript könnt ihr euch hier ansehen – wahrlich keine Zauberei. Auch die weiteren Eigenschaften von jQuery sind sehr interessant. Erwähnenswert ist sicherlich die umfangreiche Dokumentation, unter anderem auch für das AJAX-Modul, die den Einstieg in die Bibliothek vereinfacht. Ob die Art des Frameworks nun 18 KB JavaScript (gegenüber z. B. ca. 4 KB von moo.fx) rechtfertigt, kann ich derzeit noch nicht sagen. Für Ein- und Umsteiger sei noch ein Getting started-Text erwähnt, der die ersten Schritte mit jQuery vereinfacht.