Design für Print und Web

Neue Suchfunktion mit AJAX-Autovervollständigung

14.06.2006 um 14:30 Uhr
Emersacker
abgelegt unter News

Emersacker. Spätestens seit Google seine Google-Maps veröffentlichte, ist AJAX, früher auch gehandelt unter dem Begriff "Web 2.0" ein geläufiger Begriff. Dank dieser (relativ) neuen Technologie können Webanwendungen fast so schnell laufen wie normale Desktopprogramme, denn voluminöse und zeitaufwändige Datentransfers werden schon während der Dateneingabe durch den User unbemerkt im Hintergrund abgewickelt.

Das zugrundliegende gemischte Programmierkonzept ist im Grunde sehr einfach:
Auf der Clientseite werden Daten in Formularen mit JavaScript bereits während der Benutzereingabe über das per JS angestoßene HTTP-Protokoll im Hintergrund an den Sever übertragen. Ein auf dem Server abgelegtes CGI-Skript übernimmt dann z.B. eine rechen- und zeitintensive Datenbankabfrage.

Deren Ergebnis wird vom Server wiederum per HTTP an den Client zurückgeschickt, wo JavaScript die empfangenen Daten dann in die Seite schreibt, beispielsweise als komfortable, anklickbare Auswahlliste. Vorteil: Die Seite selbst muss dabei nicht neugeladen werden! Mit CSS werden alle Formatierungen, das Positionieren, Anzeigen und Verstecken der Ergebnislisten erledigt.

Was so einfach klingt, ist auch in der Realität schnell und leicht zu verwirklichen: Mein XMLHttp-Skript ist gerade mal 32 Zeilen lang, die JS-Funktion für die Autovervollständigung besteht nur aus 11 Zeilen.

Das CGI-Skript ist zwar etwas länger, aber auch nicht wirklich umfangreich.

Fazit:

Das Herumtüfteln mit AJAX hat mir viel Spaß gemacht, endlich konnte ich auch mal wieder ein bisschen JavaScript schreiben - und das ganze gleich als kleines Zuckerl für mein Weblog einsetzen, dem eine kleine Suchfunktion auch ganz gut tut...

Weiterführende Artikel zum Thema AJAX:

Demos/Tutorials:

Framework:

Prototype JavaScript Framework: Class-style OO, Ajax, and more