info@a-coding-project.de

Ajax: Xajax

Wer serverseitig mit PHP arbeitet und auf Ajax setzen möchte, hat mit Xajax die richtige Wahl getroffen. Xajax übernimmt nicht nur den Abruf der Daten per Ajax sondern verarbeitet diese gleich so, dass Sie ohne weiteres zutun im Client bzw. auf dem Server benutzt werden können. Damit können Daten quasi spielend zwischen Server und Clienten hin und her übertragen werden.

Download und Installation

Die jeweils aktuelle Version von Xajax ist unter folgender URL zu finden:


Das Xajax-Projekt ist OpenSource und kann als solches also kostenfrei eingesetzt werden. Die heruntergeladene Datei wird wiederum einfach entpackt und das Verzeichnis ins Projektverzeichnis hinein kopiert.

Fertig, Los ...

Eine Xajax-Anwendung besteht jeweils aus drei Dateien: Einer *.common.php, einer *.server.php und der eigentlichen Datei, die auch beim User angezeigt wird. Für ein einfaches Beispiel soll eine kleine Ajax-Suchfunktion erstellt werden. Die suche.common.php sieht entsprechen spärlich aus:

<?php

require_once ("xajax.inc.php");

$xajax = new xajax("suche.server.php");
$xajax->registerFunction("suche");

?>

... sie enthält nur die wichtigsten Dinge, nämlich die Verbindung zur Xajax sowie die Definition eines xajax-Objekts mit der Ajax-Datei suche.server.php und einer registrierten Funktion namens "suche".
Etwas umfangreicher ist dann schon die suche.server.php. In ihr werden die Funktionen definiert die zur Kommunikation zwischen Client und Server gebraucht werden - in unserem Fall die also die Suche selbst:

<?php

function suche($q)
{
 $objResponse = new xajaxResponse();
 $s = '';
 //alle Kunden von SQL abfragen die $q im Namen enthalten
 $res = mysql_query('SELECT * FROM kunden WHERE strName '.
                    'LIKE "'.addslashes($q).'%"');
 //alle gefundenen Kunden speichern
 for($i=0;$i<mysql_num_rows($res);$i++)
 {
  if($i>0){$s .= 'rn';}
  $s .= mysql_result($res,$i,'Name');
 }
 $objResponse->addScript('document.suchform.treffer.value '.
                         '= "'.$s.'";');
 return $objResponse;
}

require("suche.common.php");
$xajax->processRequests();

?>

Was hier passiert ist wiederum recht einfach erklärt: Es existiert eine Suchfunktion, der ein Parameter ($q) übergeben wird. Dieser Parameter wird zur Suche in einer mySQL-Datenbank verwendet und die gefundenen Datensätze in einen String ($s) geschrieben. Als letztes wird ein xajaxResponse-Objekt erzeugt und diesem ein JavaScript-Befehl übergeben der wiederum die gefundenen Datensätze in ein Formularfeld schreibt. Soweit also noch nichts interessantes - interessant wird es erst, wenn man sieht, dass auch die dritte Datei keinerlei weitere Scripte benötigt:

<?
require("suche.common.php");
?>

<html>
 <head>
  <title>xajax Suche</title>
  <?php $xajax->printJavascript('/'); ?>
 </head>
 <body>
  <form name="suchform">
   Suche: <input type="text" value=""  
           onkeypress="xajax_suche(this.value);" 
           onchange="xajax_suche(this.value);"/><br>
   Treffer: <textarea name="treffer" cols="20" 
             rows="12"></textarea>
  </form>
 </body>
</html>

Was hier passiert ist der Grund warum man derartige Frameworks verwendet: Auch in der dritten Datei wird der Programmierer nicht damit konfrontiert Ajax-Code oder dergleichen programmieren zu müssen sondern kann sich voll und ganz darauf verlassen, dass das Framework für ihn die Arbeit übernimmt.
Die Funktionsweise im Einzelnen: Gibt der User einen Buchstaben ein, wird damit das onkeypress-Ereignis des Suchfeldes und damit die xajax_suche-Funktion ausgelöst. Diese Funktion muss vom Programmierer nicht extra erstellt werden, da sie komplett von Xajax selbst verwaltet und automatisch mit in den <head> geschrieben wird. Die Funktion nimmt in diesem Fall den Parameter (die Eingabe) auf und leitet diesen via Ajax an den Server weiter. Auf dem Server kümmert sich Xajax wiederum darum dass der Parameter korrekt entgegen genommen wird, ruft selbstständig die Funktion suche($q) in der suche.server.php auf und übergibt ihr den Wert. Die Funktion kann dann die Suche durchführen und das Ergebnis in das xajaxResponse-Objekt schreiben. Dieses sorgt wiederum dafür, dass der Code per Ajax zum Clienten kommt wo er ordnungsgemäß ausgeführt wird. Alles in allem also ein sehr durchdachter Kreislauf, der viel Programmieraufwand sparen kann.

Weiterlesen: ⯈ Atlas

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant