AJAX-Tutorial: Datenabfrage nach Mausklick
Hier wird an ein paar Beispielen gezeigt, wie Daten vom Server geholt und ohne Reload in die Seite eingebunden werden können.
Beispiel 1: einfache Datenabfrage
Es soll eine Liste mit Begriffen angezeigt werden. Beim Klicken auf einen Begriff soll die dazugehörige Erklärung geladen und angezeigt werden: Beispiel 1
Die nachgeladenen Daten kommen von der Datei data.php. Im Beispiel sind die Daten nur Strings. Die Daten könnten natürlich auch aus einer anderen Quelle wie z.B. einer Datenbank kommen, zur Demonstration soll es so genügen. Der JavaScript-Code kann dem Beispiel (Quelltext) entnommen werden, die datei data.php sieht folgendermaßen aus:
<?php
if(isset($_POST['id']))
{
header("Content-Type: text/html; charset=UTF-8");
switch($_POST['id'])
{
case 1:
?><h1>Philosophie</h1><p>Die Philosophie [...]</p><?php
break;
case 2:
?><h1>Universal Serial Bus</h1><p>Der Universal Serial Bus [...]</p><?php
break;
case 3:
?><h1>Fender Rhodes</h1><p>Das Fender Rhodes [...]</p><?php
break;
}
}
?>
Beispiel 2: Datenabfrage im XML-Format
Um dem X in AJAX gerecht zu werden, lassen wir nun die Daten von data.php im XML-Format ausgeben und per JavaScript zur Ausgabe aufarbeiten. Zusätzlich kann data.php die Daten nun auch als (X)HTML ausgeben, z.B. wenn kein JavaScript zur verfügung steht: Beispiel 2
data.php sieht nun folgendermaßen aus:
<?php
if(isset($_REQUEST['id']))
{
switch($_REQUEST['id'])
{
case 1:
$title = 'Philosophie';
$message = 'Die Philosophie (altgriechisch philosophía, [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Philosophie';
break;
case 2:
$title = 'Universal Serial Bus';
$message = 'Der Universal Serial Bus (USB) ist ein [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Universal_Serial_Bus';
break;
case 3:
$title = 'Fender Rhodes';
$message = 'Das Fender Rhodes oder Rhodes Piano [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Fender_Rhodes';
break;
default:
$title = 'Lorem ipsum';
$message = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [...]';
$source_name = 'Lorem ipsum';
$source_url = 'http://www.google.com/search?q=Lorem+ipsum';
break;
}
}
if(isset($_POST['id']))
{
header('Content-Type: application/xml; charset=UTF-8');
echo '<?xml version="1.0"?>';
?><data>
<title><?php echo $title; ?></title>
<content><?php echo $message; ?></content>
<source_name><?php echo $source_name; ?></source_name>
<source_url><?php echo $source_url; ?></source_url>
</data><?php
}
elseif(isset($_GET['id']))
{
header("Content-Type: text/html; charset=UTF-8");
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $title; ?></title>
<style type="text/css">
<!--
body { color: #000000; background: #ffffff; margin: 20px; padding: 0px; font-family: verdana, arial, sans-serif; font-size: 13px; line-height:19px; }
h1 { font-family: verdana, arial, sans-serif; font-size: 18px; font-weight: bold; }
p { font-family: verdana, arial, sans-serif; font-size: 13px; line-height: 19px; }
-->
</style>
</head>
<body>
<h1><?php echo $title; ?></h1>
<p><?php echo $message; ?></p>
<p><i>Quelle: <a href="<?php echo $source_url; ?>"><?php echo $source_name; ?></i></p>
</body>
</html><?php
}
?>
Beispiel 3: JSON statt XML
Anstatt XML kann auch JSON als Datenaustausch-Format verwendet werden: Beispiel 3
So sieht data.php für die JSON-Ausgabe aus:
<?php
if(isset($_REQUEST['id']))
{
switch($_REQUEST['id'])
{
case 1:
$title = 'Philosophie';
$content = 'Die Philosophie (altgriechisch philosophía, [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Philosophie';
break;
case 2:
$title = 'Universal Serial Bus';
$content = 'Der Universal Serial Bus (USB) ist ein [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Universal_Serial_Bus';
break;
case 3:
$title = 'Fender Rhodes';
$content = 'Das Fender Rhodes oder Rhodes Piano [...]';
$source_name = 'Wikipedia';
$source_url = 'http://de.wikipedia.org/wiki/Fender_Rhodes';
break;
default:
$title = 'Lorem ipsum';
$content = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [...]';
$source_name = 'Lorem ipsum';
$source_url = 'http://www.google.com/search?q=Lorem+ipsum';
break;
}
}
if(isset($_POST['id']))
{
header('Content-Type: text/plain; charset=UTF-8');
?>{
"title": "<?php echo htmlspecialchars($title); ?>",
"content": "<?php echo htmlspecialchars($content); ?>",
"source_name": "<?php echo htmlspecialchars($source_name); ?>",
"source_url": "<?php echo htmlspecialchars($source_url); ?>"
}<?php
}
elseif(isset($_GET['id']))
{
header("Content-Type: text/html; charset=UTF-8");
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $title; ?></title>
<style type="text/css">
<!--
body { color: #000000; background: #ffffff; margin: 20px; padding: 0px; font-family: verdana, arial, sans-serif; font-size: 13px; line-height:19px; }
h1 { font-family: verdana, arial, sans-serif; font-size: 18px; font-weight: bold; }
p { font-family: verdana, arial, sans-serif; font-size: 13px; line-height: 19px; }
-->
</style>
</head>
<body>
<h1><?php echo $title; ?></h1>
<p><?php echo $message; ?></p>
<p><i>Quelle: <a href="<?php echo $source_url; ?>"><?php echo $source_name; ?></i></p>
</body>
</html><?php
}
?>
Beispiel 4: noch etwas schöner verpackt
Hier ist das ganze jetzt noch etwas schöner verpackt: die Informationen erscheinen Tooltip-artig an der Position des Mauszeigers und während des Ladens wird eine Ladegrafik (Throbber) angezeigt: Beispiel 4
Beispiel 5: in einer richtigen Anwendung
So sieht es als Vorschaufunktion in einem Forum aus (verbirgt sich hinter diesen Bildchen 
): Beispiel 5
Siehe auch...
- AJAX-Vergleich - Vergleich einer einfachen Berechnung serverseitig, clientseitig und mit AJAX
Kommentare
1. Svenja, Montag, 19. Februar 2007, 16:19:
HeyHo, so als nächstes könntest du z.B. folgendes umsetzten. Lege dir eine Tabelle in einer Datenbank an. Dort hinterlegst du Wörter wie z.B. Windows, Linux usw. Wen nein User jetzt z.B. Windows ist echt klasse schreibst, dann sollte das Windows verlinkt werden. Bei Klick auf Windows wird man dann auf die Seite verlink, die du in der Tabelle in der Datenbank hinterlegt hast. Das wäre eine kleine Nett Erweiterung und ist auch nicht mal so schwer umzusetzen. Gruß, Svenja
2. tester, Mittwoch, 28. Februar 2007, 14:56:
Hallo sehr interessantes Script Eine Frage wie kann ich über diese Var $message = 'Die Philosophie (altgriechisch philosophía, [...]'; eine HTML-Datei oder Externe Datei laden.
3. Lopez, Freitag, 02. März 2007, 21:12:
gute sache und ausbaufähig
... dankeschön ... alles gute weiterhin ...
4. iche, Montag, 18. Juni 2007, 13:35:
Ist es möglich die PHP ausgabe der DATA.php zu formatieren?! Bin da etwas unbewandert. Habs zum Laufen bekommen, würde aber gern manches <b>hervorheben</b> oder mal einen Absatz <br> einfügen. Bitte um Hilfe
5. slackfan, Montag, 03. September 2007, 17:36:
Hallo, das Script ist wirklich sehr nett und nützlich, aber ich habe ein Problem. Wenn ich die JavaScript Funktion in einem onLoad-Event-Handler zweimal intereinander mit verschiedenen Parametern aufrufe verschluckt er sich. Manchmal gibt er beim zweiten Durchlauf die Daten des Ersten an, mal lädt er die Daten einfach nicht. Gibt es dazu einen Workaround? @iche Klar geht das. Du musst die Tags nur in den Ausgabestring reinschreiben.