Nahezu jede große Website verzichtet nicht mehr darauf und bei über 98% der Internetnutzer ist es aktiviert. Die Rede ist von Javascript, oder um es in den Worten der Web-2.0-Blase zu sagen Ajax (Asynchronous JavaScript and XML). Wie bereits im Wort selber vorhanden geht es hier darum Inhalte von Websites asynchron nachzuladen, das heißt nur ein gewisser Teil einer Seite wird aktualisiert.

Doch in vielen Projekten wird von Anfang an keine Rücksicht darauf genommen später eventuell Inhalte mit Ajax nachzuladen. Die Folge ist ein erheblicher Aufwand, der vermieden werden könnte wäre die Seite von Anfang an Modular aufgebaut.

Modular bedeutet in diesem Zusammenhang, die strikte Trennung von bestimmten Seitenteilen, die dann in einer Masterdatei zusammengefügt werden. Bei einer Standard Hompage mit Kopf-, Navigations-, Inhalts- und Fußbereich hätte man also fünf Seiten die anzulegen sind. Die fünfte Seite wäre die Master oder wenn man so will die Index-Seite in der alle anderen Module per include eingefügt werden.

Bereits seit Einführung von CSS-Standards versucht man Seiten Modular zu gestalten, doch die Kapselung in verschieden physische Dateien ist eine neue Art der Websiteerstellung.

Was passiert nun, wenn ich Ajax benutzen will?
Da jedes Modul unabhängig voneinander nun  geladen werden kann, so ist es nun möglich (prinzipiell wie früher bei Frames) nun auf die Navigation zu klicken und nur den Contentbereich zu laden, was in dieser Form nur wenig Sinn macht, aber man stelle sich vor ein Shopsystem programmieren zu wollen. Wenn man nun Produkte in einen Warenkorb legt, macht es wenig Sinn die gesamte Seite neu zu laden, an dieser Stelle wäre es von Vorteil nur den Warenkorb zu aktualisieren ohne unnötig alle Produktbilder neu laden zu müssen.

Es ist also sehr sinnvoll bei Erstellung einer neuen Seite darauf zu achten mögliche Teile/Module nachladen zu können.

Bei der Ausgabe von Daten in tabelarischer Form ist es oft gewünscht die Daten sortieren zu können.
Kommen die Daten aus einer Datenbank, z.B. einer MySql Tabelle, kann man die Daten über "ORDER BY" sortieren. Der Nachteil an dieser Technik ist, dass die Seite bei jeder neuen Sortierung auch neu geladen werden muss und wenn die Datenmengen recht überschaubar sind, sollte es nicht notwendig sein, die gesamte Seite neu zu laden.

Wer mit jQuery arbeitet, für den habe ich hier ein PlugIn gefunden, das einfacher nicht zu implementieren sein könnte: tableSorter von Motherrussia! ist in der zweiten Version verfügbar und ein wirklich einfaches Tool zur Sortierung von Tabellen.

Zu beachten gibt es lediglich, dass die Sortierung anhand der Tabellenheader erfolgt, was bedeutet, dass diese auch erstellt werden muss:

 
<table id="table" border="0">
<thead>
<th>Name</th>
<th>Vorname</th>
</thead>
 
...
...
 

Anhand der Header Spalten kann dann per Klick sortiert werden.
Die Initialisierung des Javascript erfolgt über:

 
<script>
$(document).ready(function() {
	$('#table').tableSorter();
});
</script>
 

Ab jetzt erkennt das PlugIn die Tabelle und ihre Werte (Daten, Zahlen, Strings, URLs, usw) automatisch und sortiert danach.
In der Dokumentation finden sich noch zahlreiche Anpassungsmöglichkeiten, die keinen Wunsch offen lassen.

UPDATE: Der Vollständigkeit halber sollte vielleicht erwähnt werden, dass auch und gerade weil es eine Javascript-Lösung ist, die Ladezeit bei großen Datenmengen ebenfalls imens steigt. Vor allem bei Browsern, deren Javascript-Engine recht langsam arbeitet sollte man in jedem Fall die serverseitige Sortierung vorziehen!

Wer viel mit Ajax arbeitet wird früher oder später versuchen einige Variablen mit zu schicken, um mit diesen weiter arbeiten zu können. Wie bereits im Artikel weiter unten ist dies mit der load Funktion von Jquery möglich, oder aber mit $.post

Bei $.post wird im Gegesnatz zu load der Container nicht vor der Funktion definiert. Post dient als reine Sendefunktion. Das bedeutet, dass wenn wir die Seite bzw. einzelne Teile neu laden möchten wir dieses im Callback definieren müssen.

Der reine Post wird wie folgt definiert:

$.post("dieSeiteDieDenPostVerarbeitet.php", {datensatz1: "iregndwas1, datensatz2: "iregdnwas2"}, function(){});

Wer nun mit Firebug arbeitet wird erkennen, dass in der Konsole der Post losgeschickt wird. Mit Friebug kann man dann auch das Ergebnis abrufen. Um dass dann auch auf der Seite sichtbar machen zu können benutzen wir die Callback Funktion. Callback heißt hier, dassobald die Daten geladen sind, diese Funktion aufgerufen wird.

Wir erweitern also unseren post wie folgt:

$.post("dieSeiteDieDenPostVerarbeitet.php", {datensatz1: "iregndwas1, datensatz2: "iregdnwas2"},
function(data){$('#container').html(data);});

An dieser Stelle passiert folgendes. Alles was die php-Datei zurückliefert wird in die Variable "data" geschrieben.
Diese Daten, geformt wie auch immer, werden dann in den container geladen. Da wir keine Seite oder url laden sondern nur daten haben benutzen wir die Funktion html(), mit der einfach html Content ersetzt wird.

Manchmal ist es von Vorteil bei Klick auf einem Link nicht die gesamte Seite neu laden zu lassen, sondern lediglich einen Teil der Seite (z.B. ein einzelner <div> - Container).
Genau für solche Fälle gibt es in JQuery die einfache und nützliche Funktion load().
Die Einbindung in die eigene Homepage ist denkbar einfach. Man lade sich die aktuelle Version von JQuery runter und binde diese im Header ein.
Nun kommen wir bereits zum Link. Diesem können wir ein "onclick"-Ereignis mit folgendem Wert geben:

onclick="javascipt: $('#content').load('seite.html');"

Was passiert hier?
Nun ja zunächst weisen wir mit $('#content') JQuery an im nachfolgenden Befehl den Dvi-Container mit der ID 'content' zu benutzen. Im nächsten Schritt binden wir bereits unsere externe Datei ein.

Es muss sich nicht zwangsläufig um eine HTML-Datei handeln, sollen allerdings Parameter übergeben werden so empfielht sich die Funktion jquery.ajax().

Ich habe die load Funktion im Header noch etwas bearbeitet um ein fade-effekt zu realisieren:

 
$.function loadPage(output, href){
$(output).fadeOut(200);
$(output).load(href);
$(output).fadeIn(200);
};

Jetzt wird der Inhalt etwas schöner bearbeitet.

Wer kennt sie nicht, die schönen Cover-/Imageflows von iTunes und Co. Bislang war man da auf Flash angewiesen und der Einbau in ein CMS zur Pflege der einzelnen Bilder gestaltete sich auch als recht komplex - wenn nicht unmöglich.
Nun gibt es eine Alternative die genauso aussieht, aber auf Flash verzichtet. Eine reine Ajax Anwendung, die vom HTML-Code nicht einfacher zu pflegen sein könnte.
MooFlow setzt auf das Ajax-Framwork Mootools und kann so auf Flash verzichten. Sicher muss Javascript aktiviert sein, aber es ist erwiesener Maßen so, dass mehr Nutzer Javascript aktiviert haben, als die neuste Flash-Version auf dem PC. Außerdem ist es einfacher.

Wer sich näher damit beschäftigt, wird merken, dass der HTML-Code für diesen Coverflow mehr als einleuchtend und einfach ist.
Lediglich ein Div-Container muss erstellt werden, indem alles reinkommt, was man im Coverflow sehen möchte, auch Links zu weiterem Content sind möglich.
Wenn ich es irgendwann brauche, werde ich hier einen Link posten.

UPDATE: Hier eine Variante für das jQuery Framework http://www.blarnee.com/projects/coverflow/

UPDATE: Ich habe es nun in einem Projekt umgesetzt. Es ist ein Verlag der seine Buchcover auf der Startseite vorstellt.  Hier gehts zur Seite