Einfach dynamisch

Tipps & Tricks für Ajax

28.4.2009 von Redaktion pcmagazin und Andreas Hitzig

Ajax und sein flexibles Nachladen von Daten im Hintergrund prägen das Web 2.0. Der Workshop zeigt, wie Sie beliebte Ajax-Funktionen mit wenig Aufwand auch für Ihre Website realisieren.

ca. 1:45 Min
Ratgeber
  1. Tipps & Tricks für Ajax
  2. Teil 2: Tipps & Tricks für Ajax
  3. Teil 3: Tipps & Tricks für Ajax
  4. Teil 4: Tipps & Tricks für Ajax
  5. Teil 5: Tipps & Tricks für Ajax
  6. Teil 6: Tipps & Tricks für Ajax
  7. Teil 7: Tipps & Tricks für Ajax
  8. Teil 8: Tipps & Tricks für Ajax
Ajax: Tipps & Tricks
Ajax: Tipps & Tricks
© Archiv

Die Fan-Gemeinde von Ajax vergrößert sich nicht nur auf Seiten der Endanwender sondern auch bei den Entwicklern ständig. Heute stehen Ihnen zahlreiche Frameworks zur Verfügung, mit deren Hilfe Sie Ihre Programmentwicklung deutlich verkürzen können.

Dieser Workshop greift in seinen Beispielen teilweise auf Frameworks zurück, die mit unterschiedlichen Schwerpunkten an den Start gehen.

In mehreren Anwendungen zeigen wir Ihnen, wie Sie beispielsweise eine Autovervollständigen-Funktion für ein Suchformular realisieren, mithilfe von Ajax eine dynamische Navigation aufbauen und ganz allgemein Inhalte aus einer My-SQL-Datenbank laden.

Autovervollständigen

Intelligente Suchmaschinen bieten bereits nach der Eingabe der ersten Zeichen einen Vorschlag für den vollständigen Suchbegriff oder sogar einen kompletten Satz an.

Versuchen Sie beispielsweise einmal bei Amazon die Eingabe eines Buchtitels. Nach den ersten Zeichen bietet der Versender bereits eine Liste von Titeln an, welche zur Eingabe passen und Sie müssen nur noch den richtigen Titel auswählen.

Diese Eingabe und die damit verbundene Suche in einer Datenbank können Sie komplett mit Ajax realisieren. In diesem Beispiel soll der Fokus auf die Suche innerhalb einer Datenmenge gelegt werden, weshalb die Eingabe mit einem Array von Begriffen verglichen wird und nicht direkt mit einer Datenbank gekoppelt ist. Mit diesem Thema beschäftigen sich die beiden folgenden Beispiele.

Die Ausgangsposition für unser Beispiel ist eine einfache HTML-Seite mit einer Form und einem Eingabefeld, in welchem ein Vorname eingegeben werden soll. Dieser wird mit der hinterlegten Liste verglichen und die passenden Namensvorschläge ausgegeben.

<form>Vorname:<input type="text"
id="vorname" onkeyup="zeigeHinweis(this.value)"></form><p>Vorschlag: <span id=
"txtVorschlag"></span></p>

Das eigentliche Javascript-Coding befindet sich in der Datei hinweis.js, welche über den Kopfbereich der HTML-Seite eingebunden wurde.

Sobald ein Zeichen in das Eingabefeld vorname geschrieben wird, erfolgt der Aufruf der Funktion zeigeHinweis und die Übergabe des aktuellen Inhalts. Die Funktion hat folgenden Aufbau:

function zeigeHinweis(str)
{
if (str.length==0)
{
document.getElementById
("txtVorschlag").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Ihr Browser unterstützt
kein Ajax!");
return;
}
var url="sucheHinweis.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=
stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

Falls noch kein Wert eingegeben wurde oder das Eingabefeld leer ist, wird auch der angezeigte Vorschlagswert mit einer leeren Zeichenkette versehen.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Cover Internet Magazin 6/2010

Praxis-Knowhow für Web-Profis

Inhaltsverzeichnis Internet Magazin 6/2010

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…

Inhaltsverzeichnis Internet Magazin 7/2010

Praxis-Knowhow für Web-Profis

Inhaltsverzeichnis Internet Magazin 7/2010

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Mobile Webseiten erstellen mit jQuery Mobile

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Listen, Buttons und Co. mit jQuery Mobile

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Seitengestaltung und Event-Steuerung mit jQuery Mobile

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…