Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Einstieg in AJAX mit PEAR (Php Tutorial)
Tutorial erstellt von TakaBo, letzte Änderung am 26.11.2006
Einstieg in AJAX mit PEAR.
Was ist AJAX?
AJAX ist die Abkürzung für Asynchronous Javascript And XML. Eigentlich ist es nichts wirklich Neues, aber es klingt doch nicht schlecht. AJAX kann dazu benutzt werden, um die Interaktion zwischen Client und Server zu erhöhen. Webseiten müssen nicht mehr als Ganzes heruntergeladen werden, sondern Teile der Seite können durch aktuellere Daten ersetzt werden. So sind z.B. Applets in der Webseite denkbar, die sich aktualisieren, obwohl der Benutzer keinen Button oder Link gedrückt hat. Man kann z.B. das geniale Tutorial von SvenSuns ICQ Anzeige erweitern, um alle 10 Sekunden den aktuellen Status anzuzeigen.
Dieses Tutorial
In diesem Tutorial möchte ich zeigen, wie einfach der Einsatz von AJAX ist, wenn man das Rad nicht immer neu erfinden muss, sondern fertige, kostenlose Pakete aus dem PEAR-Projekt benutzt. In diesem Tutorial verwende ich das Paket HTML_Ajax von Joshua Eichorn et.al. in der Version 0.4.0 und das Paket Services_Yahoo in der Version 0.1.1. Ziel ist es dann, die Ergebnisse der Yahoo Suchmaschine auf der eigenen Seite darzustellen. Dem eigenen Ideenreichtum ist dabei kaum Grenzen gesetzt. Grundkenntnisse in PHP setze ich voraus, ebenso wie Javascript, wobei doch eh alles das Gleiche ist :D .
Installation
Die Installation ist bei PEAR wie immer sehr einfach:
Code:
pear install --onlyreqdeps Services_Yahoo-alpha
pear install –onlyreqdeps HTML_Ajax-alpha
Die erste Zeile installiert das Paket Services_Yahoo mit allen nötigen Abhängigkeiten und die zweite Zeile installiert das Paket HTML_Ajax.
Damit wir was zum Testen haben, legen wir uns eine kleine HTML Datei an mit folgendem Inhalt:
Code:
<html>
<head>
<title>Testseite</title>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
<label for="txt_suchen">Suchtext:</label><input type="text" name="txt_suchen" id="txt_suchen" value="" size="40" maxlength="40"/>
<button onclick="onsuchen();">
Suchen
</button>
<div id="ergebnis">
</div>
</body>
</html>
Momentan passiert noch nicht viel. Um unter anderem zu sehen, ob unser Browser Javascript aktiviert hat, können wir zu Testzwecken zwischen den script Tags folgendes eingeben:
Code:
function onsuchen()
{
var txt=document.getElementById('txt_suchen').value;
alert("Juhu, im Feld steht:"+txt);
}
Geben wir in das Feld einen Text ein und drücken auf den Suchen-Button, sollte sich ein Dialog öffnen mit dem Text „Juhu, im Feld steht:“ und dem Text, den wir ins Suchfeld eingegeben haben. Das ist wichtig, da wir in einem der nächsten Schritte den Inhalt des Suchfeldes brauchen. Dazu aber später mehr.
Da AJAX Client-Server basierend ist und wir den Client mit dem Formular schon fast fertig haben, wenden wir uns erst mal dem Server zu. Wir erstellen eine neue PHP-Datei, die wir hier such_server.php nennen. Im Kopf geben wir Referenzen für den AJAX Server und die Action Klasse an, damit die PEAR-Pakete mit eingebunden werden. Als nächstes definieren wir uns eine eigene Klasse, die alle Funktionen aufnehmen soll, die wir benötigen. Ich nenne sie hier einfach mal csuche. In der Vergangenheit gab es Probleme mit großen Klassennamen und AJAX, deshalb sollte man darauf achten, dass sowohl Klassenname und Funktionsname klein geschrieben werden. Da dies ein einfaches Tutorial bleiben soll, verwenden wir hier nur eine Methode mit dem Namen anfrage. Wie das ganze auszusehen hat, sieht man unten.
Code:
<?php
require_once 'HTML/AJAX/Server.php';
require_once 'HTML/AJAX/Action.php';
class csuche
{
function anfrage( $suchtext )
{
$response = new HTML_AJAX_Action();
$response->createNode('ergebnis', 'p', array('innerHTML' => $suchtext), 'insertAfter');
return $response;
}
}
$suche = new csuche();
$server = new HTML_AJAX_Server();
$server->registerClass($suche);
$server->handleRequest();
?>
In der Methode anfrage wird es richtig spannend: Wir erzeugen eine Instanz der Klasse HTML_AJAX_Action. Sie übernimmt für uns nachher die Arbeit, wenn es darum geht, HTML-Code zu serialisieren und an den Browser zu schicken. Vorerst wollen wir das ganze noch einfach halten und geben deshalb nur den Text an den Browser zurück, den wir im Formular eingegeben haben. Dazu rufen wir die Methode createNode auf. Das wirkt jetzt etwas kryptisch, ist aber alles recht einfach. Der erste Parameter 'ergebnis' ist die ID des DIV-Tags, dass wir in dem Formular definiert haben, 'p' ist das neue HTML Tag, das erzeugt werden soll, dann folgt eine Angabe der Attribute des p-Tags in einem Array. Hier ist es ein einelementiges Array mit dem Attribut 'innerHTML' was so viel bedeutet, dass der Wert zum Attribut zwischen p-OpenTag und p-CloseTag geschrieben werden soll. In diesem Fall also unser Text. Der Parameter 'insertAfter' bedeutet einfach, dass das p-Tag in der Domstruktur hinter das Div-Tag eingefügt werden soll. Wichtig ist, dass das return nicht vergessen wird, da sonst nichts serialisiert wird.
Als nächstes erzeugen wir eine Instanz unserer Klasse mit $suche = new csuche(); und eine Instanz des HTML_AJAX_Servers. Dem AJAX-Server muss unsere Klasse bekannt gemacht werden, was mit dem registerClass gemacht wird. Mit der Methode handleRequest wird der Server angewiesen eingehende Anfragen zu beantworten, soweit es ihm möglich ist.
Nun kommen wir zu einer kleinen Änderung unseres Formulars. Wir fügen hinter dem title-Tag einfach einen PHP-Block ein. Hier fügen wir eine Referenz auf den AJAX_Helper mit require_once ein. Wir Instantiieren eine Klasse davon und geben der Instanz den Namen unseres Servers. In unserem Fall also such_server.php. Die Angabe des stubs bezieht sich auf den Klassennamen, den wir vorhin angelegt haben. Das bewirkt, dass mit dem Aufruf von setupAJAX alle wichtigen Javascripte automatisch für uns erzeugt werden. Ist doch nett, oder? Den Serialiser sollte man so übernehmen. AFAIK gibt es vier Serialiser in HTML_Ajax:
Benutzen wird man i.d.R. den JSON. Darum spare ich es mir hier näher darauf ein zu gehen.
Damit der Browser uns Fehler anzeigen kann, fügen wir mit HTML_AJAX.onError = function(e) { alert(HTML_AJAX_Util.quickPrint(e)); } eine Debugfunktion mit ein. Sollte z.B. ein Tag nicht gefunden werden, wird uns das mit einem Alert-Fenster mitgeteilt.
Die nächste Änderung betrifft unsere onsuchen Funktion. Die erste Zeile behalten wir bei. Dafür ändern wir aber die folgende so ab, dass wir eine Instanz der csuche-Klasse erzeugen. Diesmal jedoch nicht in PHP, sonder in Javascript. Die „Konvertierung“ der Klasse von PHP in Javascript übernimmt hierbei das HTML_Ajax-Paket. Da wir nun eine Instanz der csuche-Klasse haben, benutzen wir auch gleich ihre Methode, wie sie in PHP definiert ist und übergeben ihr den Wert unseres Suchfeldes, der vorher im Alert-Fenster ausgegeben wurde.
Hier der Code zum verdeutlichen:
Code:
<html>
<head>
<title>Testseite</title>
<?php
require_once 'HTML/AJAX/Helper.php';
$ajaxHelper = new HTML_AJAX_Helper();
$ajaxHelper->serverUrl = 'such_server.php';
$ajaxHelper->jsLibraries[] = 'haserializer';
$ajaxHelper->stubs[] = 'csuche';
echo $ajaxHelper->setupAJAX();
?>
<script language="JavaScript" type="text/javascript">
HTML_AJAX.onError = function(e) { alert(HTML_AJAX_Util.quickPrint(e)); }
function onsuchen()
{
var txt=document.getElementById('txt_suchen').value;
var suche=new csuche();
suche.anfrage( txt );
}
</script>
</head>
<body>
<label for="txt_suchen">Suchtext:</label><input type="text" name="txt_suchen" id="txt_suchen" value="" size="40" maxlength="40"/>
<button onclick="onsuchen();">
Suchen
</button>
<div id="ergebnis">
</div>
</body>
</html>
Nun ist das ganze schon funktionsfähig und beinhaltet schon alles was man für AJAX benötigt. Das Ergebnis sollte etwa so aussehen:
Doch das ist ziemlich billig, oder? Also wie ist es mit einer Suchfunktion für die eigene Seite? Leider muss man sich bei Google registrieren, um deren API zu benutzen. Das ist grundsätzlich kein Beinbruch und auch umsonst, aber zum Testen für dieses Tutorial geht es zu weit. Deshalb begnügen wir uns mit der Yahoo Suchmaschine.
Als erstes erweitern wir jetzt unseren Server in der Datei such_server.php um den Eintrag
Code:
require_once 'Services/Yahoo/Search.php';
und ändern unsere Methode anfrage entsprechend ab.
Code:
function anfrage( $suchtext )
{
$response = new HTML_AJAX_Action();
try {
$search = Services_Yahoo_Search::factory("web");
$search->setQuery("site:der-webdesigner.net ".$suchtext);
$search->setResultNumber(20);
$results = $search->submit();
$num=$results->getTotalResultsReturned();
$response->createNode('ergebnis', 'p', array('innerHTML' => 'Ergebnisse:'.$num ), 'insertAfter');
foreach ($results as $result) {
$str='<a href="'.$result['Url'].'">'.$result['Title'].'</a>';
$response->createNode('ergebnis', 'p', array('innerHTML' => $str ), 'insertAfter');
}
} catch (Services_Yahoo_Exception $e) {
$response->createNode('ergebnis', 'p', array('innerHTML' => $e->getMessage() ), 'insertAfter');
foreach ($e->getErrors() as $error) {
$response->createNode('ergebnis', 'p', array('innerHTML' => $error ), 'insertAfter');
}
}
return $response;
}
Wenn wir jetzt z.B. „test“ in unser Formular eingeben, sollte das Ergebnis in etwa so aussehen:
Dadurch, dass wir an den Service von Yahoo den String "site:der-webdesigner.net " übergeben, erzwingen wir, dass nur Ergebnisse mit der besagten Seite angezeigt werden.
Nun viel Spaß beim Experimentieren mit AJAX und PHP.
Gruß Chris
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Was ist AJAX?
AJAX ist die Abkürzung für Asynchronous Javascript And XML. Eigentlich ist es nichts wirklich Neues, aber es klingt doch nicht schlecht. AJAX kann dazu benutzt werden, um die Interaktion zwischen Client und Server zu erhöhen. Webseiten müssen nicht mehr als Ganzes heruntergeladen werden, sondern Teile der Seite können durch aktuellere Daten ersetzt werden. So sind z.B. Applets in der Webseite denkbar, die sich aktualisieren, obwohl der Benutzer keinen Button oder Link gedrückt hat. Man kann z.B. das geniale Tutorial von SvenSuns ICQ Anzeige erweitern, um alle 10 Sekunden den aktuellen Status anzuzeigen.
Dieses Tutorial
In diesem Tutorial möchte ich zeigen, wie einfach der Einsatz von AJAX ist, wenn man das Rad nicht immer neu erfinden muss, sondern fertige, kostenlose Pakete aus dem PEAR-Projekt benutzt. In diesem Tutorial verwende ich das Paket HTML_Ajax von Joshua Eichorn et.al. in der Version 0.4.0 und das Paket Services_Yahoo in der Version 0.1.1. Ziel ist es dann, die Ergebnisse der Yahoo Suchmaschine auf der eigenen Seite darzustellen. Dem eigenen Ideenreichtum ist dabei kaum Grenzen gesetzt. Grundkenntnisse in PHP setze ich voraus, ebenso wie Javascript, wobei doch eh alles das Gleiche ist :D .
Installation
Die Installation ist bei PEAR wie immer sehr einfach:
Code:
pear install --onlyreqdeps Services_Yahoo-alpha
pear install –onlyreqdeps HTML_Ajax-alpha
Die erste Zeile installiert das Paket Services_Yahoo mit allen nötigen Abhängigkeiten und die zweite Zeile installiert das Paket HTML_Ajax.
Damit wir was zum Testen haben, legen wir uns eine kleine HTML Datei an mit folgendem Inhalt:
Code:
<html>
<head>
<title>Testseite</title>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
<label for="txt_suchen">Suchtext:</label><input type="text" name="txt_suchen" id="txt_suchen" value="" size="40" maxlength="40"/>
<button onclick="onsuchen();">
Suchen
</button>
<div id="ergebnis">
</div>
</body>
</html>
Momentan passiert noch nicht viel. Um unter anderem zu sehen, ob unser Browser Javascript aktiviert hat, können wir zu Testzwecken zwischen den script Tags folgendes eingeben:
Code:
function onsuchen()
{
var txt=document.getElementById('txt_suchen').value;
alert("Juhu, im Feld steht:"+txt);
}
Geben wir in das Feld einen Text ein und drücken auf den Suchen-Button, sollte sich ein Dialog öffnen mit dem Text „Juhu, im Feld steht:“ und dem Text, den wir ins Suchfeld eingegeben haben. Das ist wichtig, da wir in einem der nächsten Schritte den Inhalt des Suchfeldes brauchen. Dazu aber später mehr.
Da AJAX Client-Server basierend ist und wir den Client mit dem Formular schon fast fertig haben, wenden wir uns erst mal dem Server zu. Wir erstellen eine neue PHP-Datei, die wir hier such_server.php nennen. Im Kopf geben wir Referenzen für den AJAX Server und die Action Klasse an, damit die PEAR-Pakete mit eingebunden werden. Als nächstes definieren wir uns eine eigene Klasse, die alle Funktionen aufnehmen soll, die wir benötigen. Ich nenne sie hier einfach mal csuche. In der Vergangenheit gab es Probleme mit großen Klassennamen und AJAX, deshalb sollte man darauf achten, dass sowohl Klassenname und Funktionsname klein geschrieben werden. Da dies ein einfaches Tutorial bleiben soll, verwenden wir hier nur eine Methode mit dem Namen anfrage. Wie das ganze auszusehen hat, sieht man unten.
Code:
<?php
require_once 'HTML/AJAX/Server.php';
require_once 'HTML/AJAX/Action.php';
class csuche
{
function anfrage( $suchtext )
{
$response = new HTML_AJAX_Action();
$response->createNode('ergebnis', 'p', array('innerHTML' => $suchtext), 'insertAfter');
return $response;
}
}
$suche = new csuche();
$server = new HTML_AJAX_Server();
$server->registerClass($suche);
$server->handleRequest();
?>
In der Methode anfrage wird es richtig spannend: Wir erzeugen eine Instanz der Klasse HTML_AJAX_Action. Sie übernimmt für uns nachher die Arbeit, wenn es darum geht, HTML-Code zu serialisieren und an den Browser zu schicken. Vorerst wollen wir das ganze noch einfach halten und geben deshalb nur den Text an den Browser zurück, den wir im Formular eingegeben haben. Dazu rufen wir die Methode createNode auf. Das wirkt jetzt etwas kryptisch, ist aber alles recht einfach. Der erste Parameter 'ergebnis' ist die ID des DIV-Tags, dass wir in dem Formular definiert haben, 'p' ist das neue HTML Tag, das erzeugt werden soll, dann folgt eine Angabe der Attribute des p-Tags in einem Array. Hier ist es ein einelementiges Array mit dem Attribut 'innerHTML' was so viel bedeutet, dass der Wert zum Attribut zwischen p-OpenTag und p-CloseTag geschrieben werden soll. In diesem Fall also unser Text. Der Parameter 'insertAfter' bedeutet einfach, dass das p-Tag in der Domstruktur hinter das Div-Tag eingefügt werden soll. Wichtig ist, dass das return nicht vergessen wird, da sonst nichts serialisiert wird.
Als nächstes erzeugen wir eine Instanz unserer Klasse mit $suche = new csuche(); und eine Instanz des HTML_AJAX_Servers. Dem AJAX-Server muss unsere Klasse bekannt gemacht werden, was mit dem registerClass gemacht wird. Mit der Methode handleRequest wird der Server angewiesen eingehende Anfragen zu beantworten, soweit es ihm möglich ist.
Nun kommen wir zu einer kleinen Änderung unseres Formulars. Wir fügen hinter dem title-Tag einfach einen PHP-Block ein. Hier fügen wir eine Referenz auf den AJAX_Helper mit require_once ein. Wir Instantiieren eine Klasse davon und geben der Instanz den Namen unseres Servers. In unserem Fall also such_server.php. Die Angabe des stubs bezieht sich auf den Klassennamen, den wir vorhin angelegt haben. Das bewirkt, dass mit dem Aufruf von setupAJAX alle wichtigen Javascripte automatisch für uns erzeugt werden. Ist doch nett, oder? Den Serialiser sollte man so übernehmen. AFAIK gibt es vier Serialiser in HTML_Ajax:
- JSON
- Null
- PHP
- Urlencoded
Benutzen wird man i.d.R. den JSON. Darum spare ich es mir hier näher darauf ein zu gehen.
Damit der Browser uns Fehler anzeigen kann, fügen wir mit HTML_AJAX.onError = function(e) { alert(HTML_AJAX_Util.quickPrint(e)); } eine Debugfunktion mit ein. Sollte z.B. ein Tag nicht gefunden werden, wird uns das mit einem Alert-Fenster mitgeteilt.
Die nächste Änderung betrifft unsere onsuchen Funktion. Die erste Zeile behalten wir bei. Dafür ändern wir aber die folgende so ab, dass wir eine Instanz der csuche-Klasse erzeugen. Diesmal jedoch nicht in PHP, sonder in Javascript. Die „Konvertierung“ der Klasse von PHP in Javascript übernimmt hierbei das HTML_Ajax-Paket. Da wir nun eine Instanz der csuche-Klasse haben, benutzen wir auch gleich ihre Methode, wie sie in PHP definiert ist und übergeben ihr den Wert unseres Suchfeldes, der vorher im Alert-Fenster ausgegeben wurde.
Hier der Code zum verdeutlichen:
Code:
<html>
<head>
<title>Testseite</title>
<?php
require_once 'HTML/AJAX/Helper.php';
$ajaxHelper = new HTML_AJAX_Helper();
$ajaxHelper->serverUrl = 'such_server.php';
$ajaxHelper->jsLibraries[] = 'haserializer';
$ajaxHelper->stubs[] = 'csuche';
echo $ajaxHelper->setupAJAX();
?>
<script language="JavaScript" type="text/javascript">
HTML_AJAX.onError = function(e) { alert(HTML_AJAX_Util.quickPrint(e)); }
function onsuchen()
{
var txt=document.getElementById('txt_suchen').value;
var suche=new csuche();
suche.anfrage( txt );
}
</script>
</head>
<body>
<label for="txt_suchen">Suchtext:</label><input type="text" name="txt_suchen" id="txt_suchen" value="" size="40" maxlength="40"/>
<button onclick="onsuchen();">
Suchen
</button>
<div id="ergebnis">
</div>
</body>
</html>
Nun ist das ganze schon funktionsfähig und beinhaltet schon alles was man für AJAX benötigt. Das Ergebnis sollte etwa so aussehen:
Doch das ist ziemlich billig, oder? Also wie ist es mit einer Suchfunktion für die eigene Seite? Leider muss man sich bei Google registrieren, um deren API zu benutzen. Das ist grundsätzlich kein Beinbruch und auch umsonst, aber zum Testen für dieses Tutorial geht es zu weit. Deshalb begnügen wir uns mit der Yahoo Suchmaschine.
Als erstes erweitern wir jetzt unseren Server in der Datei such_server.php um den Eintrag
Code:
require_once 'Services/Yahoo/Search.php';
und ändern unsere Methode anfrage entsprechend ab.
Code:
function anfrage( $suchtext )
{
$response = new HTML_AJAX_Action();
try {
$search = Services_Yahoo_Search::factory("web");
$search->setQuery("site:der-webdesigner.net ".$suchtext);
$search->setResultNumber(20);
$results = $search->submit();
$num=$results->getTotalResultsReturned();
$response->createNode('ergebnis', 'p', array('innerHTML' => 'Ergebnisse:'.$num ), 'insertAfter');
foreach ($results as $result) {
$str='<a href="'.$result['Url'].'">'.$result['Title'].'</a>';
$response->createNode('ergebnis', 'p', array('innerHTML' => $str ), 'insertAfter');
}
} catch (Services_Yahoo_Exception $e) {
$response->createNode('ergebnis', 'p', array('innerHTML' => $e->getMessage() ), 'insertAfter');
foreach ($e->getErrors() as $error) {
$response->createNode('ergebnis', 'p', array('innerHTML' => $error ), 'insertAfter');
}
}
return $response;
}
Wenn wir jetzt z.B. „test“ in unser Formular eingeben, sollte das Ergebnis in etwa so aussehen:
Dadurch, dass wir an den Service von Yahoo den String "site:der-webdesigner.net " übergeben, erzwingen wir, dass nur Ergebnisse mit der besagten Seite angezeigt werden.
Nun viel Spaß beim Experimentieren mit AJAX und PHP.
Gruß Chris
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
