Der Einstieg – oder auch “Hallo Welt! 2.0″
Der folgende Artikel bietet eine Einführung in Xajax - auch bekannt als "xajax in 10 minutes".
Die Basis für die erste XAJAX Seite kann man in 7 kurzen Schritten zusammenfassen:
1. Einbinden der XAJAX Klasse.
require_once("xajax_core/xajax.inc.php");
2.Instanziieren der XAJAX Klasse.
$xajax = new xajax();
3. Registrieren der Funktionsnamen, die durch xajax aufgerufen werden sollen:
$xajax->register(XAJAX_FUNCTION,"myFunction");
4. Schreiben der PHP Funktionen die vorher registriert wurden. Diese Funktionen benutzen das xajaxResponse-Objekt um die Kommandos in XML zurückzuliefern.
function myFunction($arg) { // Macht irgendwas mit $arg. zB Datenbankabfragen // Hier packen wir $arg in eine neue Variable $newContent $newContent = "Value of \$arg: ".$arg; // Instanziierung vom xajaxResponse Objekt $objResponse = new xajaxResponse(); // hinzufügen eines Kommanods in das response Objekt // In diesem Fall wird ein ->assign ausgeführt um der Eigenschaft "innerHTML" // des DIVs mit der ID SomeElementID mit neuem Inhalt zu überschreiben $objResponse->assign("SomeElementId","innerHTML", $newContent); //Rückgabe des response Objekts return $objResponse; }
5. Bevor das Script auch nur irgendwelche Daten ausgibt (abgesehen von Header-Informationen wie Sessions,Cookies) muss die Funktion ->processRequest() ausgeführt werden. Diese Funktion prüft ob der aktuelle Aufruf ein (X)ajax Request ist und führt ggf die angeforderte Funktion aus und liefert die Kommandos des response Objekts als XML zurück. Insofern es sich nicht um einen Xajax-Request handelt, wird das Script ganz normal weiter ausgeführt.
$xajax->processRequest();
6. Im Bereich der aufgerufen Seite die Funktion ->printJavaScript ausgeführt werden. Diese Funktion liefert den nötigen JavaScript Code um die XAJAX JS Klasse einzubinden und definiert JavaScript Funktionen die den registrierten PHP-Funktionen auf Serverseite entsprechen.
$xajax->printJavascript();
7. Aufrufen der PHP-Funktionen aus einem JavaScript-Event oder einer JavaScript Funktion heraus.
<button onclick="xajax_myFunction('It worked!');"></button>
Wie in Punkt 6 beschrieben liefert die Funktion ->printJavascript JS Funktionen zurück, die den eigenen AJAX-Request starten und die entsprechende PHP Funktion auf dem Server aufrufen. Per Default heissen die Funktionen alle xajax_ + Name der PHP Funktion.
In diesem Fall heisst die Funktion xajax_myFunction(). Der übergebene Parameter 'it worked' wird in PHP entsprechend als $arg übergeben und kann danach für alle möglichen Zwecke ge-/missbraucht werden.
Das ist in Prinzip auch schon alles, was man für die Grundstuktur benötigt um starten zu können.
Während man in vielen anderen, außschließlich auf JavaScript basierenden, Frameworks seine eigenen Callback Funktionen in JS schreiben muss um die Daten des Servers zu verarbeiten geht XAJAX den umgekehrten weg. XAJAX liefert eine Menge PHP Funktionen, mit deren Hilfe man auf einfachste Art&Weise fast alle Elemente im DOM anlegen/modifizieren/entfernen kann.
zum Beispiel:
$objResponse = new xajaxResponse(); $objResponse->assign("myInput1","value",$DataFromDatabase); $objResponse->assign("myInput1","style.color","red"); $objResponse->append("myDiv1","innerHTML",$DataFromDatabase2); $objResponse->prepend("myDiv2","innerHTML",$DataFromDatabase3); $objResponse->replace("myDiv3","innerHTML","xajax","xajax"); $objResponse->script("var x = prompt(\"Enter Your Name\");"); return $objResponse;
Pro Aufruf von ->assign,->append usw wird ein Kommando in die response-queue eingefügt und im Client entsprechend sequenziell abgearbeitet.
Formulare:
Einer der häufigsten Zwecke, für die AJAX Funktionen genutzt werden, ist die Verarbeitung von Formularen. Die Einen wollen serverseitig die Felder validieren, andere wollen einfach nur das komplette Neuladen der angezeigten Seite unterbinden. Beides ist mit xajax in nur wenigen Schritten getan.
<form id="meinform" onsubmit="return false">
<input type="hidden" name="phpMyAdmin" value="904dd537e052d384c5ca1e2801b3e7ae" />
Name :
<input name="login_name" type="text" />
Pass :
<input name="login_pass" type="text" />
<input value="Login" onclick="xajax_login(xajax.getFormValues('meinform');)" type="submit" />
</form>
Dieses kurze Beispiel zeigt, wie man zB ein Login-Formular realisieren könnte. Als Parameter für die Funktion xajax_login() übergeben wir einfach xajax.getFormValues('formular_id'). Die Funktion getFormValues liest sämtliche Elemente innerhalb des Formulars und gibt diese als assoziatives Array (in JS Object) zurück.
Die PHP Funktion könnte zB so aussehen:
function login($aFormValues) { $objResponse = new xajaxResponse(); if (($aFormValues['login_name'] == "foo") AND ($aFormValues['login_pass'] == "bar")) { // Führe irgendwelche geheimen Login Funktionen aus } else { // Falscher Login, so geht das nicht $objResponse->alert("Benutzername oder Passwort falsch!"); } return $objResponse; }
Fred sagt
am 17. Februar 2008 @ 13:45
Hallo Freunde,
die Seite finde ich ganz gut. Vielen Dank an den Webmaster.
Habe nun eine ganz dumme Frage:
Im ersten Schritt sollte man “xajax_core/xajax.inc.php”.
Woher bekomme ich die Datei? Ist das schon im Extension selber drin?
Gruß
Fred
q_no sagt
am 17. Februar 2008 @ 13:50
Fred, die Datei ist bestandteil des aktuellsten XAJAX releases 0.5 beta4. Folge den Links unten um es herunterzuladen.
Fred sagt
am 17. Februar 2008 @ 14:04
Ich Danke Dir! So früh am morgen habe es nicht gecheckt :-)
mark sagt
am 11. März 2008 @ 09:07
hi,
ich habe ein problem mit der xajax.getFormValues im Firefox 2.
und zwar habe eich ein recht grosses formular mit 100 textfeldern deren values ich alle mit getFormvalues
haben will. Jedes einzelne text-element hat eine eindeutige id und namen, wobei id=name gilt.
zu probezwecken lasse ich alle inhalte des arrays ausgeben. Funktioniert fehlerlos im IE aber eben im
Firefox nicht. Hat jemand eine idee?
q_no sagt
am 11. März 2008 @ 10:01
Das Formular muss eine ID haben, alle form-fields ein name Attribut. IDs sind für Inputs nicht wichtig. Dann funktioniert es :)
mark sagt
am 11. März 2008 @ 10:10
jope, das formular hatte eine eindeutige id und namen, das problem war das das sich ein div-tag und ein form-tag überschnitten hatten also etwa so:
das dokument war damit wohl nicht valide nach w3c, bin da nicht so firm bzw. habe bis jetzt nie auf solche “kleinigkeiten” geachtet. da merkt man mal wieder wie tolerant der IE ist^^
übrigens danke für die schnelle antwort q_no :)
Chris sagt
am 11. Juni 2008 @ 22:32
Hi,
ich möchte xajax mit smarty nutzen aber irgndwie mag xajax bei mir nicht so richtig weder mit template noch in ner seperaten datei ohne template anbindung funktionieren die kleinsten scripte (diverse 0815 tuts, xajaxproject.org sample auf der mainseite etc) woran könnte das hängen?
gruß Chris
romacron sagt
am 14. August 2008 @ 12:53
Hallo Zusammen!
Erstmal glückwünsche für die deutsche Seite, viel Erfolg!!!
Eine Frage:
Warum benutzt Ihr nicht vlib als Template engine?
dieter sagt
am 20. Januar 2009 @ 23:31
Bei XAJAX treten die gleichen Probleme auf, wie bei JavaScript, wenn der User JavaScript deaktiviert hat.
Zwar sind es nur wenige, aber bei denen funktioniert kein Login, keine Menüs usw. Also habe ich 2 Möglichkeiten.
1.Ich zwinge die Minderheit dazu ihr JS zu aktivieren, wenn sie weitere Seiten sehen wollen, oder sie bleiben draußen. Das funktioniert aber auch nur bei denen die UNBEDINGT auf meine Seite wollen.
2.Ich schreibe doppelten Code, eben für den Fall das JS nicht aktiv ist, um keinen auzusperren.
Ist JS aktiv
mache dies
ist JS deaktiviert
dann mache eben das
Ich kann beim besten Willen nicht erkennen, warum ich dann noch JavaScript benutzen sollte oder könnte oder wie auch immer, wenn der PHP-Code mit Templates oder ohne wunderbar funktioniert.
In jedem Handbuch steht in etwas sowas: “Verlassen Sie sich nicht darauf das JavaScript aktiv ist. sorgen Sie für Alternativen und sperren Sie User mit deaktivierten JavaScript nicht aus.”
Ãœbrigens ist mein JavaScript auch meistens deaktiviert.
Gruß Dieter
Sven Eßmann sagt
am 22. Januar 2009 @ 12:53
Muss der PHP-Code zum Einbinden von XAJAX tatsächlich zwingend vor allen anderen HTML-Anweisungen geschrieben werden? Scheinbar gibt es schon Probleme, wenn ich nur DOCTYPE oder HTML vor dem PHP-Code setze. Oder liegt es an meinem CMS webEdition?
q_no sagt
am 22. Januar 2009 @ 13:23
@Dieter
Xajax, bzw Ajax im Allgemeinen, ist nunmal JavaScript und daran wird sich aller Vorraussicht nach auch in Zukunft nichts ändern. Es wird immer Leute geben die die Mindesanforderungen einer Website nicht erfüllen. Sei es JavaScript, Flash oder einfach nur ein total veralteter IE 5.5. Wie du damit umgehst, bleibt einzig und allein dir als Programmierer überlassen.
@Sven
Es muss nicht der gesamte PHP Code vor dem HTML-Dokument stehen, allerdings muss Xajax bis zu diesem Punkt komplett instanziiert sein. Desweiteren muss die Funktion ->processRequest() zwingend vor allen anderen Ausgaben geladen werden, da diese ansonsten als Gargabe in der XML Response landen und der entsprechende header() für XML nicht mehr gesetzt werden kann.
Wo du letztendlich die Funktionen plazierst bleibt dir überlassen. Wichtig ist nur dass die Funktionen zum Aufruf von ->processRequest auch vorhanden sind. (Es sei denn die Funktionen wurden als includes registriert, dann included Xajax die entsprechenden Files automatisch).
Sven Eßmann sagt
am 22. Januar 2009 @ 20:46
Vielen Dank für die schnelle Antwort. Ich konnte Problemlos die Funktionen an eine andere Stelle plazieren. Nun habe ich ein neues Anfängerproblem: Scheinbar ist es nicht ohne weiteres möglich, aus einer solchen registrierten Funktion eine andere externe Funktion aufzurufen. Muss diese weitere Funktion ebenfalls registriert werden? Auch das hat nicht funktioniert.
q_no sagt
am 22. Januar 2009 @ 20:55
Es kommt ganz darauf an, was du mit “externe Funktion” meinst. Sämtliche xajax funktionen die ein responseObject zurückliefern können mittels $objResponse->loadcommands(my_func($params_here)); aufgerufen werden. Andere PHP-Funktionen können wie gehabt normal verwendet werden.
Sven sagt
am 22. Januar 2009 @ 21:26
Hm, stimmt. Ich kann andere Funktionen normal aufrufen. Nur wenn ich eine Funktion aufrufe, die eine Abfrage einer mySQL-Datenbank durchführt, passiert gar nichts mehr. Wenn ich die Funktion gleichermassen im normalen PHP aufrufe (ohne XAJAX) funktioniert es einwandfrei. Ist die Abfrage der Datenbank damit nicht möglich oder hat das nichts damit zu tun?
Sven sagt
am 22. Januar 2009 @ 23:03
Sorry, habe Fehler selber gefunden: Scheinbar gibt es Probleme mit dem globalisieren von Variablen innerhalb von XAJAX aufgerufenden PHP-Scripten. Wenn ich die Funktion ausserhalb von XAJAX aufrufe ist der Inhalt der globalisierten Variablen (war der Name der Datenbank) vorhanden. Aber XAJAX ist wirklich Super! Ohne hätte ich mein aktuelles Projekt nicht weiter fortsetzen können! Und vielen Dank für die schnelle Hilfe!
Sven sagt
am 20. März 2009 @ 13:34
Wie kann ich denn während eines etwas länger dauernden Aufrufs (Öffnen einer ext. Datenbank über SOAP) ein loader.gif in einem div anzeigen lassen? Habe leider kein einfaches Tutorial gefunden und die Foreneinträge beziehen sich meist auf ältere XAJAX-Version oder sind zu komplex
Till Schiffler sagt
am 1. September 2009 @ 09:47
Ich würde gerne wissen ob es möglich ist mit einer php Funktion direkt values aus einem
form zubekommen? Also ohne “manuelles” Submit?
mystro sagt
am 21. September 2009 @ 17:04
Hallo zusammen,
ich möchte gerne den Textinhalt eines mit Javascript geschriebenen Editors, einer PHP-Funktionübergeben “z.B. function editorText($text)”. Angenommen der Inhalt wäre aus der javascript Funktion “getContent()”zu bekommen, wie gehe ich dann vor? Ich wäre sehr dankbar, wenn jemand mir einen Tipp geben würde.
Christian Benz sagt
am 29. September 2009 @ 17:03
Hallo,
ich verwende seit einigen Tagen das Xajax-Framework und erhalte die folgende Fehlermeldung bei folgendem Code:
Fehlermeldung: Fatal error: Call to a member function getGlobalResponse() on a non-object in C:\Program Files\xampp\htdocs\index.php on line 40
Code:
registerFunction( “set_sprache” ); // Registrieren der folgenden Funktionen
// Datei zum lesen der Spracheinstellungen
include( “/sprachen.php” );
$sprache = “”;
function xajax_set_sprache($sprache) {
$laenge = strlen(trim($sprache));
if ($laenge == 0) {
// Erster Fall: index.php wird direkt aufgerufen
$land = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
if ($land == “”) {
$land = “de”;
}
}
else
{
// Zweiter Fall: index.php wird nach dem Laden durch JavaScript mit einem Ländercode aufgerufen
$land = $GET(“sprache”);
if ($land == “”) {
$land = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
if ($land == “”) {
$land = “de”;
}
}
}
$sprache = array(“index_php_title”,”index_php_satz1″,”index_php_satz2″,”index_php_satz3″,”index_php_satz4″,”index_php_login”);
$count = count($sprache);
$i = 0;
while ($i getGlobalResponse()->assign( $help, “innerHTML”, $key );
return $objResponse;
$i++;
}
}
$xajax->processRequest();
$xajax->printJavascript();
xajax_set_sprache(“”);
?>
McFit Reklamationsübersicht
Herzlich Willkommen bei der
McFit Reklamations-Ãœbersicht
Um die entsprechenden Informationen zu erhalten,
loggen Sie sich bitte mit ihrem Benutzernamen und Passwort ein
Login
ARgh sagt
am 28. Januar 2010 @ 16:01
Mal ne Frage am Rande: Gibt es eigentlich eine gescheite Dokumentation zu XAjax? Das würde mich mal interessieren. Denn so ein Mini-Tutorial klappt vielleicht zu nachbauen und reinschnuppern aber nicht wenn man etwas komplexeres schreiben möchte oder sollte ich da doch lieber weiterhin selbst PHP JavaScript und ggf. Ajax nutzen?
XAjax ist meines erachtens keine Erleichterung sondern eher eine Qual.
Bin gerne bereit mich umstimmen zu lassen, wenn man mir eine gescheite Dokumentation der Funktionen (gerne auch mit einem Anwendungsbeispiel) zeigt, oder mir sagen kann wo sich solche befindet.
Gruß
Klaus sagt
am 24. Februar 2010 @ 10:42
Ich finde das Konzept genial gut, und wahrscheinlich muss ich mich für mein Problem schämen. ich habe aber ein Einstiegsproblem dass ich einfach nicht begreife. Dafür muss ich zwei Varianten darstellen. Der Code steht auf der Seite ganz oben. Nichts, nicht mal ein Zeilenumbruch, steht auf der PHP-Seite vor der Php-Eröffnung. Auch befindet sich auf der Seite kein fremdes JS und kein weiteres include mehr.
processRequest();
$xajax->registerFunction(“myFunction”);
Fehler:Output has already been sent to the browser
require_once(“js/xajax_core/xajax.inc.php”);
$xajax->processRequest();
$xajax = new xajax();
$xajax->registerFunction(“myFunction”);
Fehler: Call to a member function processRequest() on a non-object –istja logisch–
Klaus sagt
am 24. Februar 2010 @ 15:19
Leider hat das Formular einen Teil des Textes verschluckt. Deshalb noch einmal das komplette nicht fuktionierende Anfängerscript.
assign(“SomeElementId”,”innerHTML”, $newContent);
return $objResponse;
}
$xajax->processRequest();
$xajax->registerFunction(“myFunction”);
?>
Test
printJavaScript(‘js’); ?>
Fehler:Output has already been sent to the browser at
Klaus sagt
am 24. Februar 2010 @ 15:23
sorry es scheint nicht möglich zu sein das Script zu senden. Es fehlt wieder ein Großteil des Scripts obwohl ich es in pre tags bepackt habe.
nikon2k sagt
am 11. August 2010 @ 05:45
Eine SAche solltest du im Tutorial dringend ändern:
falsch:
onclick=”xajax_login(xajax.getFormValues(‘meinform’);)”
korrekt:
onclick=”xajax_login(xajax.getFormValues(‘meinform’));”
Sonst wird die funktion nicht aufgerufen und die fehlerkonsole meckert einen fehler an.
Ansonsten super tutorial ;)
q_no sagt
am 4. September 2010 @ 20:59
Danke für den Hinweis! :)