Stil mit {stil}

Okt 2008

Javascript XMLHttpRequest • Kommunkation zwischen Server und Javascript

Bei der klassischen Webanwendung (z.B. ein PHP-Programm) lösen Aktionen des Benutzers einen HTTP-Request zurück zum Server aus. Der Server verifiziert den Benutzer, liest Daten aus der Datenbank, berechnet ein paar Zahlen und liefert dann eine neue HTML-Seite an den Client aus. Dabei besteht die neue Seite zum größten Teil aus denselben Elementen und nur wenige Inhalte wurden tatsächlich verändert.

Über viele Jahre haben Webentwickler nach einer sauberen Technik gerufen, die eine Verbindung zum Server aufrecht erhält, während Transaktionen im Hintergrund ablaufen und frisch angelieferte Daten in die Seite integriert werden.

Der XMLHttpRequest bildet eine Schnittstelle zwischen einem Script und Daten oder einer Anwendung auf dem Server. Der XMLHttpRequest überträgt Daten von und zum Server im Hintergrund. So kann ein Skript Teile einer Seite neu liefern, ohne die komplette Seite neu zu laden.

Diese Technik ist als »Ajax« (Asynchronous Javascript And XML) bekannt geworden und hat dem Web seit etwa 2005 (Ajax: A New Approach to Web Applications) ein neues Gesicht gegeben: Mit Web 2.0 verschwinden die Grenzen zwischen Desktop- und Online-Anwendung.

Mit dem XMLHttpRequest sendet ein Javascript z.B. die Anforderung einer Datei an den Server und kann die Daten direkt per DOM und CSS in das Dokument einbinden, ohne das gesamte HTML-Dokument neu zu laden.

Wer jetzt hier glaubt, der XMLHttpRequest sei etwas für XML-Dokumente: Der Name »XMLHttpRequest« ist irreführend.

Wie der XMLHttpRequest funktioniert

Das XMLHttpRequest-Objekt öffnet eine Verbindung zu einer URL auf dem Server und sendet einen HTTP-Request über diese Verbindung. Diese Daten können in Form einer XML-Datei auf dem Server liegen oder als flacher Text – z.B. von einer PHP-Anwendung als Antwort auf einen GET- oder POST-Request des XMLHttpRequests – übertragen werden. Das eröffnet Javascript-Anwendungen eine ansynchrone Verarbeitung von Daten innerhalb einer persistenten (beständigen) Verbindung anstelle der typischen Stop-and-Go-Komminikation herkömmlicher Anwendungen.

Muster: XML-Datei lesen

Auf dem Server liegen Daten in einer XML-Datei.

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <buchliste>
   <buch>
     <titel>Das Universum in einer Nussschale</titel>
     <autor>Stephen Hawking</autor>
     <jahr>1980</jahr>
   </buch>
   <buch>
     <titel>Ab die Post!</titel>
     <autor>Terry Pratchet</autor>
     <jahr>2003</jahr>
   </buch>
   …
  </buchliste>
</data>

Datensätze zeigen

<p class="showList anotherclass">
  <a href="jsBeispiele/xml/data3.xml">Datensätze zeigen</a>
</p>

setup() ist das Vorspiel. Die Funktion liest die Links im Dokument und sucht diejenigen heraus, die innerhalb eines HTML-Elements mit class="showList" platziert sind. Wenn im Browser des Benutzers Javascript und/oder ActiveX nicht aktiviert sind, folgt die Navigation dem Link zur XML-Datei. Auf jeden dieser Links wird ein Event Handler gesetzt und bei einem Klick wird die Funktion processXMLHttpRequest mit den Parametern file und location aufgerufen. file ist der Name einer XML-Datei, die per XMLHttpRequest nachgeladen wird. location ist eine Referenz auf das HTML-Element, in dem der Link liegt.

function setup()
{
   var inserts = document.getElementsByTagName('a');
   for (i=0; i<inserts.length; i++) {
      if (/showList/.test(inserts[i].parentNode.className)) {
         inserts[i].onclick = function() {
            var showXML = processXMLHttpRequest(this.href, this.parentNode);
            return showXML;
         }
      }
   }
}

Die gebräuchlichste Anweisungssequenz für einen XMLHttpRequest besteht aus

1. dem Erzeugen einer Instanz des XMLHttpRequest-Objekts
2. der Aufruf der open()-Methode
3. und das Senden des Requests mit der send()-Methode
4. das Abfragen der Eigenschaft onreadystatechange und Aufruf einer Funktion, die beim Eintreffen der Antwort die Verarbeitung übernimmt

function processXMLHttpRequest(file, location)
{
   var xmlObj = null;
   if (window.XMLHttpRequest) {
      xmlObj = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      return true;
   }
   xmlObj.onreadystatechange = function() {
      if(xmlObj.readyState == 4) {
         processXML(xmlObj.responseXML, location);
      }
   }
   xmlObj.open ('GET', file, true);
   xmlObj.send ('');
   return false;
}

Das Erzeugen einer Instanz des XMLHttpRequest-Objekts verzweigt für die verschiedenen Browser. Für Firefox und Safari wird die Konstruktor-Funktion des Objekts aufgerufen:

if (window.XMLHttpRequest) {
   xmlObj = new XMLHttpRequest();
}

Für Internet Explorer wird der Name des Objekts an den ActiveX-Konstruktor übergeben.

if (window.ActiveXObject) {
   xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
}

Die zurückgegebene Objektreferenz beider Konstruktoren ist ein XMLHttpRequest-Objekt, dessen Methoden alle Operationen steuern und dessen Eigenschaften die Daten, die vom Server zurückgeliefert werden, speichern.

xmlObj.onreadystatechange = function() {
   if(xmlObj.readyState == 4) {
      processXML(xmlObj.responseXML, location);
   }
}

Die letzten Anweisung öffnen die Verbindung zur Datei XML-Datei file auf dem Server und senden einen GET-Request.

xmlObj.open ('GET', file, true);
xmlObj.send ('');

Die Funktion processXML(), die aufgerufen wird, wenn readyState == 4 ist, parst die Elemente der XML-Datei. Der Einfachheit zuliebe werden die ausgelesenen Daten in einem PRE-Element ausgegeben, das am Ende das P-Element mit dem Link ersetzt.

function processXML(obj, location)
{
   var rows = obj.getElementsByTagName('buch');
   var listBox = document.createElement('pre');
   var listText = "";
   for (var i=0, row; row=rows[i]; i++) {
      var elems = row.childNodes;
      for (var j=0, srow; srow=elems[j]; j++) {
         if (srow.nodeType == 1) {
            listText += srow.firstChild.data + "   ";
         }
      }
      listText += "\n";
   }
   text = document.createTextNode(listText);
   listBox.appendChild(text);
   location.parentNode.replaceChild(listBox, location, listBox);
}

Teil 2: Methoden und Eigenschaften des XMLHttpRequest