PHP: Mehr Komfort und Kontrolle per Ajax

Web-Anwendungen mit dem vollen Komfort von Desktop-Applikationen? Das geht ganz einfach mit Ajax, einer Kombination aus Javscript und XML. Dieser Beitrag zeigt, wie Sie Ajax schnell und effizient für Ihre Anwendungen einsetzen.

Das Konzept Ajax (Asynchronous JavaScript and XML) verwendet etablierte Webtechniken, wie XML, HTTP und Javascript. Die Grundidee dabei: Aus der bereits geladenen Seite wird bei Bedarf via Javascript eine Anfrage an den Server abgesetzt, um die Daten anzufordern. Die kommen dann in einem XML-Paket zurück, werden interpretiert und wirken sich auf Funktionalität oder Anzeige der aktuellen Seite aus.

Für viele Sprachen, beispielsweise PHP, existieren fertige Frameworks, um Ajax zu realisieren. Sie erledigen die ganze Basisarbeit, so dass Sie sich auf die Probleme der eigentlichen Anwendung konzentrieren können.

Stellen Sie sich eine Anwendung vor, die ein Verzeichnis von Mitarbeitern einer Firma bieten soll. Wählt der Benutzer einen Namen aus einer Selectbox, erscheinen ein Bild sowie weitere Daten der Person, wie seine Adresse und Aufgabengebiet. Realisiert man das auf die klassische Weise, nimmt man in Kauf, dass die Auswahl einer Person aus der Selectbox einen neuen Seitenaufbau nach sich zieht. Das dauert und wirkt unprofessionell.

Ajax-Beispielapp

Um den Reload zu umgehen, könnte man alle Daten inklusive der Bilder in Javascript speichern. Das Server-Skript müsste also bei der Erzeugung der Browser-Seite alle Bilddaten in Javascript-Variablen packen, die dann bei einer Auswahl über die Selectbox eingeblendet werden. Bei einigen Dutzend Mitarbeitern würde die Datenmenge aber zu inakzeptablen Ladezeiten führen, besonders bei Benutzern mit langsamer Anbindung. Es müsste also eine Möglichkeit geben, ohne einen gesamten Neuaufbau dynamisch nur den gewünschten Datensatz nachzuladen.

Ihre erste Ajax-Applikation

Um mit dem neuen Konzept warm zu werden, sollten Sie mit dem Framework Sajax beginnen. Das Framework unterstützt neben PHP auch andere Websprachen, etwa Ruby, ASP, Perl oder Python. Zur Installation genügt es, das aktuelle Sajax-Paket herunterzuladen und den Inhalt des Unterordners /php in einen Ordner auf Ihrem Entwicklungsserver zu entpacken.

Per Sajax aufgepeppte Webanwendungen funktionieren so: Die PHP-Funktionen, die vom Client aus erreichbar sein sollen, werden im Sajax-System registriert. Jede PHP-Funktion braucht dann zwei korrespondierende Javascript-Funktionen. Die eine bewirkt den Aufruf der PHP-Funktion auf dem Server. Die zweite wird von Sajax aufgerufen, sobald die Antwort mit den Funktionsergebnissen eingetroffen ist. Hierin können Sie also die Auswertung der Rückgabewerte vornehmen.

Im Normalfall ist mit Sajax ein einziges PHP-Skript für den Aufbau der sichtbaren Seite wie zur Behandlung der Anfragen via Ajax zuständig. Das ist bei einfachen Projekten praktisch, weil Nutzer und Anbieter des Dienstes im selben Skript zu finden sind.

Um größeren Anwendungen Herr zu werden, kann man die beiden Komponenten auch in zwei Skripts aufteilen. Die vorgestellte Beispielapplikation liefert beim ersten Aufruf die Mitarbeiternamen samt Personalnummern an den Browser aus. Diese Daten werden als <option>-Felder in eine Selectbox gepackt. Bei der Auswahl einer Person wird Ajax aktiv und holt die zusätzlichen Daten vom Server.

Im Skript wird erst das Framwork per include() eingelesen und initialisiert.

require(“Sajax.php”);

sajax_init();

Daraufhin registriert das Beispielprogramm die PHP-Funktion, die Clientseitig aufgerufen werden soll:

sajax_export(“fetch_person”);

Die nächste Zeile ist wichtig, wenn das PHP-Skript vom Ajax-System auf

dem Client aufgerufen wird, um die eingebettete PHP-Funktion zu nutzen:

sajax_handle_client_request();

In dieser Betriebsart erkennt Sajax, welche PHP-Funktion gewünscht ist, ruft

sie mit den übergebenen Parametern auf und gibt das Ergebnis zurück.

Der letzte Aufruf des Sajax-Frameworks erzeugt den notwendigen Javascript-Code für die Client-seitigen Funktionen des Systems:

sajax_show_javascript();

Im Beispiel haben wir die Funktion zum Abholen der Daten eines Mitarbeiters fetch_person() genannt. Sajax erzeugt dazu automatisch eine Javascript-Funktion x_fetch_person(), mit der die PHP-Funktion fetch_person() aufgerufen wird.

Wählt der Anwender über die Selectbox einen Mitarbeiter aus, startet dieses OnChange-Ereignis die Funktion do_fetch_person(). Hier wird die Personalnummer des Mitarbeiters aus dem aktuellen Wert der Selectbox ermittelt und damit x_fetch_person() aufgerufen.

Die Funktion x_fetch_person() erwartet noch einen zweiten Parameter. Das muss der Name einer Javascript-Funktion sein. Die ruft Sajax auf, sobald das Ergebnis vom Server eingetroffen ist. Im Beispiel heißt die zweite Funktion do_fetch_person_cb(). Das “cb” steht hier für den Begriff “Callback”, womit üblicherweise Funktionen bezeichnet werden, die nicht von Ihrem Anwendungsprogramm, sondern vom System aufgerufen werden – hier eben der Sajax-Schicht. In der Funktion do_fetch_person_cb() wird der per Parameter übergebene Rückgabewert in das Ergebnisfeld im Formular geschrieben.

Weil Sajax nur einen einfachen String als Rückgabeparameter liefert, sind die Informationen bei der Beispielanwendung in festem Format zusammengebaut: Die ersten 100 Zeichen enthalten zum Beispiel die Adresse. Die weiteren Daten sind genauso fix definiert. Alles, was ab dem Zeichen 210 kommt, gehört zum Bild, das als Hexstring übermittelt wird. Bei der Verwendung anderer Ajax-Frameworks müssen Sie nicht alles in einen String packen, sondern können eigene Datenstrukturen definieren. Diesen Komfort erkaufen Sie sich aber mit mehr Programmieraufwand.

Das Listing

<?php

mysql_connect(“localhost”,”user”,”pw”);

mysql_select_db(“tippscout_30”) or die(mysql_error());

require(“Sajax.php”);

sajax_init();

sajax_export(“fetch_person”);

sajax_handle_client_request();

function options_person(){

$res=mysql_query(“select id,name from personen”);

while ($row=mysql_fetch_assoc($res)) {

echo ‘<option value=”‘. $row[‘id’];

echo ‘”>’ . $row[‘name’] . ‘</option>’;

}

}

function fetch_person($idPerson) {

$sql = “select * from personen where id=$idPerson”;

$res = mysql_query($sql);

$row = mysql_fetch_assoc($res);

$retval = str_pad($row[‘adresse’],100);

$retval .= str_pad($row[‘abteilung’],100);

$retval .= str_pad($row[‘durchwahl’],10);

$retval .= bin2hex($row[‘image’]);

return ($retval);

}?>

<html><head>

<script type=”text/javascript”>

<?php sajax_show_javascript(); ?>

var bild;

function binary(d) {

var o = ”;

for (var i=0; i<d.length; i=i+2)

o+=String.fromCharCode(eval(‘0x’+(d.substring(i,i+2)).toString(16)));

return o;

}

function do_fetch_person_cb(data) {

idPerson =

document.getElementById(“id_person”).value

adr = data.substr(0,100);

abt = data.substr(100,100);

tel = data.substr(200,10);

bild=binary(data.substr(210));

document.getElementById(“adr”).value = adr;

document.getElementById(“abt”).value = abt;

document.getElementById(“tel”).value = tel;

imgsrc = “javascript:get_image(” + Math.random()+ “);”;

document.getElementById(“bild”).src = imgsrc;

}

function get_image(){return bild;}

function do_fetch_person() {

var idPerson;

idPerson = document.getElementById(“id_person”).value;

x_fetch_person(idPerson,do_fetch_person_cb);

}

</script>

</head>

<body>

<form method=”post” action=”bsp_handler.php”>

<fieldset>

<legend>Mitarbeiterverzeichnis</legend>

<img width=”100″ height=”124″ id=”bild” src=”leer.jpg”>

<select size=5 id=”id_person” onChange=”do_fetch_person(); return false;”>

<?php options_person();?></select>

<label>Privatadresse</label><textarea id=”adr” cols=”40″ rows=”3″ >

</form>

</body>

</html>

Ähnliche Beiträge