UB BRAUNSCHWEIG
Symbolfoto
  • Impressum
  • Startseite
  • allegro-C von A-Z
  • Druckversion


AJAX : Asynchronous JavaScript and XML


Teil 1 : Grundlagen

Teil 2 : AJAX und avanti
Dieser Text soll einen knappen Einblick in AJAX geben, eine vielverheißende neue Web-Programmiertechnik, die in jüngster Zeit als Mittel zur Dynamisierung von HTML-Seiten wachsenden Zuspruch findet. Was steckt da drin? Gibt es ein leichtverständliches Wirkprinzip? Worin liegt der Mehrwert? Was ist der Haken dabei?
Ganz kurz: Kennen muß man neben JavaScript und HTML auch PHP, nützen kann CSS, aber das ist alles, d.h. XML ist optional. Eine neue Sprache oder so etwas ist AJAX nicht, sondern eine Methodik, mit der eine Webseite sich mit weiterer Information
vom Server anreichern kann, während der Nutzer sie betrachtet.
Schauen Sie sich im Quelltext dieses Dokuments das JavaScript im Header an! (Weiter unten ist das Skript aufgelistet, damit Sie es beim Drucken dieser Seite dabeihaben!)
Das wichtige darin sind zwei Funktionen (die auch anders heißen dürfen):

requesT()  :
Sendet eine Anforderung ("request") ab, startet auf dem Server das Programm  ajx.php
receivE() : Verarbeitet das zurückkommende Ergebnis im Browser

Nun steckt man bloß einen Aufruf der Methode  requesT() hinter eine Verknüpfung, eine Graphik oder einen Button oder was immer, wo sonst irgend ein normaler Link sein könnte, z.B. so wie hier:

[Aktion A]
>>> Hier wird das Ergebnis des PHP-Programms ajx.php erscheinen  <<<
[Aktion B]

Der Link hinter den Aktionen lautet javascript:requesT('abc') bzw. javascript:requesT('xyz').
Wird auf [Aktion A] bzw. [Aktion B] geklickt, dann bekommt der Webserver über 
requesT() diesen Auftrag:
ajx.php?eingabe=abc   bzw.  ajx.php?eingabe=xyz

Auf dem Server wird dann das Programm ajx.php gestartet und ihm in der Variablen  eingabe  der Wert  abc bzw. xyz übergeben.
Und wie sieht es aus, das Programm
ajx.php ? In diesem Fall ganz kurz:

<?php
// Aufruf erfolgt mit  ?eingabe=wert
switch($_REQUEST['eingabe'])
{
 case 'abc':
   echo "abc|Die Aktion ist <b>erledigt</b>";
   break;
 case 'xyz':
   echo "xyz|Diese Aktion konnte nicht ausgef&uuml;hrt werden";
   break;
}
?>


Was hier mit dem echo-Befehl ausgegeben wird, geht dann an die JavaScript-Funktion
receivE().
Schauen Sie sich also  receivE() an (im Quelltext dieses Dokuments oder unten im Listing). Sie untersucht den empfangenen String, also z.B.
  
abc|Ergebnis der Aktion abc: Die Aktion ist <b>erledigt</b> 
und spaltet ihn bei dem Zeichen  '|'  auf. Damit kann nun ganz beliebig umgegangen werden. Der Inhalt wird in diesem Fall noch etwas aufbereitet und an das DOM-Element
erg übergeben.
Wenn man also z.B. ein Element  <div id="erg">...</div>  in der betr. Seite hat, in dem momentan irgendetwas (oder nichts) steht, hier z.B. dieses:

>>> Hier wird das Ergebnis des PHP-Programms ajx.php erscheinen  <<<

dann wird das nach einem Klick plötzlich so aussehen:

Ergebnis von Aktion abc: Die Aktion ist erledigt

Damit ist das Wesentliche beschrieben. Dieses Handlungsmuster kann man ganz beliebig ausbauen! Das aufgerufene PHP-Programm kann avanti-Jobs umfassen und alles mögliche zurückgeben, was dann die Funktion receivE() an beliebigen Stellen ins Dokument einbauen kann. 

Leicht könnte man dem Request mehr als einen Parameter mitgeben:

function requesT(abc,cde)
{
  http.open('get', 'bjx.php?input1='+
abc+'&input2='+cde);
  http.onreadystatechange = receivE;
  http.send(null);
}


Das PHP-Programm bjx.php hätte dann zwei Parameter input1 und input2 auszuwerten. Man kann ferner auch mehrere Request- und Receive-Funktionen einrichten.

Die Funktion receivE()  kann man frei ausgestalten, so daß sie viel mehr oder ganz andere Dinge tut, als nur den Inhalt eines <div> zu ersetzen. Wichtig ist dabei das "Document Object Model (DOM)", mit dem man in JavaScript auf alle Inhalte des aktuellen Dokuments lesend und schreibend zugreifen kann, wie es hier am Beispiel des <div> zu sehen ist. Fast jedes HTML-Tag kann mit einem Attribut id="..." versehen werden und ist damit dann ansprechbar aus JavaScript heraus. Auf diese einfache Weise kann JavaScript den Inhalt (auch das Aussehen) der aktuell geladenen Seite stark verändern, ohne die Seite neu zu laden!

Wir haben noch nicht erklärt, was denn "Asynchronous" bedeuten soll und wieso von XML die Rede ist. Beides sind wichtige Aspekte, allerdings braucht man sie nicht zu kennen, um mit AJAX viel zu erreichen, und vermutlich auch und gerade in Verbindung mit allegro-Datenbanken, denn das PHP-Programm auf dem Server kann mit avanti kommunizieren, das ist der wichtige Punkt.
Für die Geschäftsbereiche Erwerbung und Ausleihe könnte die Technik möglicherweise recht fruchtbar sein.
AJAX-Anwendungen können natürlich sehr viel komplexer werden als hier im Beispiel gezeigt. Die Kunst beim Programmieren besteht darin, hier wie auch sonst, unnötige Komplexität zu vermeiden! Zwischen AJAX und XML besteht keine zwingende Kopplung! XML ist zwar allerfeinste Sahne, wer aber auf die Linie achten will, kann eine fettfreie Alternative wählen: JSON. (Da gibt es respektlose Gesellen, die sagen, XML sei zum Datenaustauschen so gut geeignet wie eine Zange zum Nägeleinschlagen!)
Relevant ist XML oder JSON nur hinsichtlich der Datenübermittlung vom aufgerufenen PHP-Programm zu der JavaScript-Funktion
receivE(). Diese soll ja aus den empfangenen Daten etwas machen. Die Daten kommen als lange Zeichenfolge an, und wenn darin viele Elemente stecken, will man dafür nicht jedesmal viel programmieren, sondern jedes Element mit einem Griff herausfischen können. Sind die Daten XML oder (besser noch) JSON, kann man dafür kompetente JavaScript-Funktionen nutzen, das ist der Punkt.
Und wo ist der Haken? Das ist der Back-Button des Browsers. Er macht nicht, wie man intuitiv erwartet, den letzten Klick rückgängig - versuchen Sie es oben mit dem Beispiel! Allerdings ist das auch gar nicht seine wahre Funktion, sondern er holt die vorher geladene Seite zurück. Eine per AJAX veränderte Seite ist eben keine neu geladene Seite. Das zieht ein weiteres Problemchen nach sich: eine mit AJAX veränderte Seite läßt sich nicht, so wie sie gerade aussieht, "bookmarken". Und noch eins kann als Problem empfunden werden: JavaScript muß eingeschaltet sein.
In summa : Wenn diese Dinge keine Rolle spielen, kann AJAX eine Anwendung mit aufwendiger Oberflächengestaltung eleganter, schneller und ruhiger erscheinen lassen, auch auf trägen Geräten an langsamen Drähten.

Literatur:
http://www.w3schools.com/ajax/default.asp (Englischsprachiges Tutorial)


  So sieht das JavaScript aus, das in dieses Dokument eingebaut ist:
Was schwarz ist, braucht man nicht zu verstehen, sondern kann man unverändert abkupfern, nur das Rote ist anwendungsspezifisch!

<script language="javascript">


// ****** Allgemeiner Teil (immer gleich) *****
function createReqObj()
// erzeugt ein "request object"
{

  brws = navigator.appName;
  if(brws == "Microsoft Internet Explorer")
  rq = new ActiveXObject("Microsoft.XMLHTTP");
  else rq = new XMLHttpRequest(); return rq;
}

// Globales Request-Objekt namens rqo anlegen:

rqo = createReqObj();


// Dies wird aus dem Dokument aufgerufen:
function requesT(wert)
{
// Jetzt Programm ajx.php auf dem Server aufrufen:

  rqo.open('get', 'ajx.php?eingabe='+wert);
//                 anwendungsspezifisch!

// Die Ausgabe davon geht an die Funktion receivE():
  rqo.onreadystatechange = receivE;
  rqo.send(null);
}

// **************** Spezifischer Teil *********

function receivE() // Wird ausgeführt, sobald Ergebnis zurueckkommt
{
  if(rqo.readyState == 4)
{

// Die Ausgabe des PHP-Programms auswerten:
  ergeb = rqo.responseText;
  update = new Array();
  if(ergeb.indexOf('|' != -1))
  {
 // ergeb beginnt evtl. mit 13 10 !!! weg damit
   while(ergeb.charAt(0)=='\r' || ergeb.charAt(0)=='\n') ergeb=ergeb.slice(1,99);
   update = ergeb.split('|');
   rs = update[0];
   document.getElementById("erg").innerHTML = "<i>Ergebnis der Aktion</i> " +rs +": " +update[1];
  }
}
// ********************************************
}
  </script>

   



[i] zuletzt aktualisiert: 16.08.2012
Email: ub@tu-bs.de