Simplease-Logo

Im Simplease-Blog schreiben wir über Design, Web-Entwicklung und unser Leben als Selbstständige.

AJAX leicht gemacht

von Mathias Placho am 12. August 2011

2 Kommentare zuletzt von Mathias

AJAX bedeutet definitionsgemäß Asynchronous JavaScript and XML und bezeichnet die asynchrone, also im Hintergrund ablaufende, Datenübertragung zwischen Browser und Server.

Und was hab ich davon?

Ich gebe zu, die Definition ist recht unspektakulär. Doch ohne AJAX wären viele Funktionen, die wir von heutigen Webseiten und Web-Apps gewohnt sind, unmöglich.

Ursprünglich funktionierte die Datenübertragung zwischen Browser und Server folgendermaßen.

  1. Daten werden an einen Server geschickt.
  2. Der Server wertet die Daten aus.
  3. Das Ergebnis wird an den Browser zurückgeschickt.

Diese Übertragung merkt man am Reload der Webseite. Mit AJAX hingegen kann dieser Reload vermieden werden. Dabei schickt Javascript die Daten im Hintergrund an den Server, diese werden ausgewertet, das Ergebnis wird an Javascript zurückgeliefert und angezeigt.

Ein typisches Beispiel dafür ist die Autovervollständigung von Google. Sobald man die Eingabe im Suchfeld beginnt, liefert Google passende Vorschläge.

Und wie funktioniert das?

Dank jQuery einfacher als man glauben könnte.

Zuerst benötigt man eine HTML Seite mit einem Textfeld und einem Span. Um diese Bereiche in weiterer Folge mit jQuery anzusprechen, geben wir dem Textfeld die ID searchField und dem Span die ID searchResult.

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>AJAX leicht gemacht</title>
 
<div id="content">
 
	<input type="text" id="searchField">
 
	<span id="searchResult">
	</span>
 
</div>

Danach muss die jQuery Bibliothek, vorzugsweise am Ende der HTML Seite, eingebunden werden. Dies funktioniert am einfachsten und effektivsten über Google. Natürlich kann die Bibliothek auch am eigenen Server gespeichert werden, dabei erhöht sich jedoch der Traffic und die Ladezeit.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>

Darunter erstellt man ein weiteres Script Tag für die zukünftigen Javascript Funktionen.

<script type="text/javascript">
</script>

Sobald man die Eingabe im Textfeld beginnt, soll eine Aktion ausgeführt werden. Dafür verwenden wir das jQuery Event keyup. Dieses wird aufgerufen sobald eine gedrückte Taste losgelassen wird.

Eine Übersicht der möglichen Events findet man unter http://api.jquery.com/category/events/.

Damit nach Loslassen einer Taste überhaupt eine Funktion ausgeführt wird, muss das jeweilige Event dem gewünschten Objekt, in diesem Fall dem Textfeld mit der ID searchField, zugeordnet werden.

Aber dazu später mehr.

jQuery Syntax

Jede jQuery Anweisung beginnt mit einem Dollar-Zeichen gefolgt von einer offenen runden Klammer. Dann kommt das anzusprechende Objekt unter Anführungszeichen. Dieses Objekt kann entweder über seine ID, Klasse oder direkt über den Tag-Namen angesprochen werden. Mehrere Objekte können unter Anführungszeichen mit einem Beistrich getrennt werden.

IDs werden wie in CSS mit Raute, also „#objekt“ angesprochen. Klassen werden ebenfalls wie in CSS mit Punkt, also „.objekt“ angesprochen. Um Elemente nach ihrem Tag zu selektieren schreibt man einfach das jeweilige Tag unter Anführungszeichen.

Dazu ein kleines Beispiel:

$("#searchField") // Spricht das Input Feld mit der ID searchField an.
$(".link") // Spricht das A mit der Klasse link an.
$("div") // Spricht jedes DIV-Element an.
$("#searchField,.#searchResult") // Spricht das Input Feld mit der ID searchField und das Span mit der ID searchResult an.

Die Selektion alleine führt jedoch noch nicht zum Ziel.

Zuerst muss die gewünschte Methode deklariert werden. Dazu kommt ein Punkt gefolgt vom jeweiligen Methoden Namen. Zum Schluss muss die Methode mit einer runden Klammer und einem Strichpunkt geschlossen werden. Innerhalb der runden Klammern sind abhängig von der Methode unterschiedliche Parameter notwendig.

Genauere Informationen dazu findet man ebenfalls in der jQuery Dokumentation http://api.jquery.com/.

Das Event keyup verlangt innerhalb der runden Klammern den Aufruf einer Funktion.

$("#searchField").keyup(function() {
 
});

Innerhalb der geschwungenen Klammern kann nun beliebiger Code geschrieben werden, der nach Loslassen einer Taste ausgeführt wird.

Erste Tests

Um zu testen ob das Event erfolgreich registriert wurde, kann zum Beispiel die Hintergrundfarbe des Textfeldes verändert werden.

$("#searchField").keyup(function() {
	$(this).css({
		backgroundColor:"#00ee00"
	});
});

Teste mich:

Daten senden

Das Textfeld reagiert bereits auf Eingaben und verändert seine Hintergrundfarbe. Daten werden jedoch noch keine verschickt.

Hierfür verwendet man die Methode ajax. Weitere Informationen dazu findet man unter http://api.jquery.com/jQuery.ajax/

$("#searchField").keyup(function() {
	$.ajax({
		type:"GET",
 		url: "data.php",
 		data: {	
 			searchString:$(this).val()
 		},
   	  	success: function(data){
  			$("#searchResult").html(data);
   	  	}
	  });	
});

Eine kurze Erklärung zu den verwendeten Parametern.

  • type: gibt an mit welcher Übertragungsart das Formular verschickt werden soll (GET oder POST)
  • url: an welche PHP-Datei sollen Daten verschickt werden (eine x-beliebige PHP Datei)
  • data: welche Daten sollen verschickt werden (es können auch mehrere Variablen mit Beistrich getrennt übergeben werden)
  • success: was passiert wenn die Übertragung erfolgreich war (das Ergebnis wird in der Variable data gespeichert)

In diesem Fall wird mit der Übertragungsart GET der Inhalt des Textfeldes $(this).val() als searchString an die Datei data.php geschickt. Nach erfolgreicher Übermittlung wird die Rückgabe der PHP Datei data in das Span mit der ID searchResult geschrieben.

Daten verarbeiten

Die Eingabe in das Textfeld wird bereits an die Datei data.php geschickt. Diese ist aber noch nicht vorhanden und muss daher erstellt werden.

Damit die Autovervollständigung Eingaben in das Textfeld vervollständigen kann, müssen zuerst Daten erfasst werden. Hierfür wird normalerweise auf eine Datenbank zurückgegriffen, fürs erste reicht jedoch ein einfacher Array, in diesem Fall wordArray der mit beliebig vielen Wörtern befüllt wird.

<?php
$wordArray = array(
"Anakonda",
"Affe",
"Alligator",
"Ameise",
"Amsel",
"Aal",
"Aaskrähe",
"Bartaffe",
"Bartgeier",
"Bartkauz",
"Bartschi Anolis",
"Baumpieper",
"Beilbauchfisch",
"Bengalracke",
"Capybara",
"Ceylon-Hutaffe",
"Chapman-Steppenzebra",
"Chileflamingo",
"Chinchilla",
"Chinesischer Muntjak",
"Chinesische Zwergwachtel",
"Coburger Fuchsschaf",
"Dachs",
"Damara-Steppenzebra",
"Davidshirsch",
"Großer Tümmler / Delphin",
"Diana Meerkatze",
"Doppelhornvogel",
"Dschelada"
);

Nun muss die von Javascript übergebene Variable searchString abgefangen und gespeichert werden.

$searchString = $_GET['searchString'];

Danach benötigt man eine For-Schleife. Mithilfe dieser werden die einzelnen Positionen des Arrays Schritt für Schritt durchgegangen und in weiterer Folge mit dem searchString verglichen. Um Fehler zu vermeiden, sollte die For-Schleife erst dann ausgeführt werden wenn der searchString nicht leer ist, also zumindest ein Zeichen beinhaltet.

if($searchString != "") {
 
	  for($i=0;$i<count($wordArray);$i++) {
 
	  }
 
}

Das Ergebnis soll als fertige Liste an Javascript zurückgeschickt werden. Dafür wird ein String result erzeugt.

$result = "<ul>";

Bei jedem Durchgang wird das aktuelle Wort im Array mit dem Befehl stristr() auf Übereinstimmungen mit dem searchString untersucht. Sofern eine Übereinstimmung gegeben ist, wird das gefundene Wort dem String result als Listenelement angehängt.

for($i=0;$i<count($wordArray);$i++) {
	$found = stristr($wordArray[$i],$searchString);
 
	if($found) {
		$result .= "<li>".$wordArray[$i]."</li>";
	}
}

Danach wird die Liste im String result geschlossen und ausgegeben.

$result .= "</ul>";
echo $result;

Das Ergebnis

Zu finden unter http://www.simplease.at/mathias/ajax.

Bei Unklarheiten oder Anregungen stehe ich entweder über die Kommentarfunktion oder über Mail zur Verfügung.

Remote Usability Tests - einfach gemacht.
Vorheriger Artikel: Das neue iCal ist ein Schritt zurück
Nächster Artikel: Das Wichtigste zuerst

Bisher 2 Kommentare

  1. Ferdi12. August 2011

    Sehr feiner Artikel, ich hab nur eine Frage: gibt es einen Grund dafuer das Array mit for() statt foreach() durchzugehen? Performt for() schneller oder ist das hier nur Zufall?

  2. Mathias12. August 2011

    Hallo Ferdi,

    du hast natürlich recht, foreach() wäre in diesem Fall besser gewesen und wird gleich ausgebessert.

    Danke und liebe Grüße, Mathias

Du hast eine Meinung dazu? Wir freuen uns :)

Nach Kategorie filtern

Produkte von Simplease

Userbrain - Usability Testing

User-Tests einfach und am laufenden Band.
Mehr erfahren

Neue Artikel per E-Mail

Facebook Link Twitter Link