• < blättern >

4.1 XMLHttpRequest

Der Objekttyp XMLHttpRequest stellt clientseitigen Skripten eine Schnittstelle zur Erzeugung von HTTP-Transaktionen zur Verfügung und verwaltet die zugehörigen Zustandsinformationen. Sowohl der initiale Request für eine Transaktion wird über ein XMLHttpRequest-Objekte erzeugt als auch die zugehörige Antwort eingelesen und zur weiteren Verarbeitung bereitgestellt. Insofern bildet XMLHttpRequest den Kern nahezu jeder AJAX-Anwendung.

Um diesen Mechanismus verwenden zu können, muss zuerst in einem clientseitigen Skript ein Objekt vom Typ XMLHttpRequest erzeugt werden. Synchrones Senden eines HTTP-Requests veranschaulicht, wie dieses Objekt genutzt werden kann, um eine Ressource von einem entfernten Server anzufordern.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.w3.org/', false); 
req.send(null);
handleResponse(req.status, req.responseText);

In diesem Beispiel wird ein neues XMLHttpRequest -Objekt angelegt und mit einem GET-Request für die Ressource http://www.w3.org/ initialisiert. Das dritte Argument der Funktion open gibt an, dass dieser Request synchron verarbeitet werden soll: Wenn der Request mit dem folgenden Aufruf der Funktion send gesendet wird, wird die Ausführung des Skripts solange blockiert, bis die Antwort des Servers vollständig empfangen wurde. Das Ergebnis dieser Operation kann ebenfalls über das XMLHttpRequest -Objekt ermittelt werden. Zur Verarbeitung der Antwort wird hier die fiktive Funktion handleResponse mit dem Statuscode der empfangenen HTTP-Antwortnachricht und dem Inhalt dieser Antwort als Zeichenkette aufgerufen.

Um das blockierende Warten des Browsers auf die Antwort zu vermeiden, muss zum einen das dritte Argument des Aufrufs von open in den Wert true geändert werden. Das Skript läuft dann nach dem Absenden des Requests einfach weiter. Nun darf die Abfrage des Antwort-Status aber nicht mehr unmittelbar danach erfolgen, da dies wegen der Laufzeiten der Transaktion so gut wie nie zum Erfolg führen wird. Statt dessen muss eine Callback-Funktion vorgesehen werden, die immer dann aufgerufen wird, wenn sich der Bearbeitungszustand der Transaktion ändert. XMLHttpRequest-Objekte verfügen dafür über eine Eigenschaft onreadystatechange, die mit einem Funktionsobjekt belegt werden kann. Nutzung einer Callback-Funktion für asynchroneHTTP-Requests zeigt, wie eine Callback-Funktion für ein XMLHttpRequest -Objekt definiert werden kann.

var req = new XMLHttpRequest();
req.onreadystatechange = handleStateChange;
req.open('GET', 'http://www.w3.org/', true); 
req.send(null);

Nach dem Anlegen des Objekts req wird die Funktion handleStateChange als Callback-Funktion für Statusänderungen in der Variablen onreadystatechange eingetragen. Nach dem Aufruf von req.open und req.send setzt der Browser die Ausführung des Skripts fort ohne zu blockieren. Aus diesem Grund entfällt hier der zuvor gezeigte Aufruf von handleResponse.

Die angegebene Funktion handleStateChange wird fortan für jede Statusänderung des XMLHttpRequest -Objekts req aufgerufen. Das Feld readyState des XMLHttpRequest-Objekts gibt Aufschluss über den aktuellen Status der Transaktion beim Aufruf dieser Callback-Funktion. So lassen sich einzelne Phasen der Datenübertragung unterscheiden wie in Callback-Funktion für Statusänderungen einesXMLHttpRequest-Objekts gezeigt. Der wichtigste Fall ist hier das Erreichen des Status COMPLETED mit dem Statuscode 4: Er gibt an, dass die Antwort des Servers vollständig übertragen wurde und nun ausgewertet werden kann. Die Bedeutung der weiteren Statuscodes erläutert die Tabelle Mögliche Werte für XMLHttpRequest.readyState; allerdings sind die Statuscodes außer 4 (COMPLETED) in verschiedenen Browsern nicht wirklich einheitlich implementiert.

function handleStateChange() {
  switch (req.readyState) {
    case 0 : // UNINITIALIZED
    case 1 : // LOADING
    case 2 : // LOADED
    case 3 : // INTERACTIVE
      break;
    case 4 : // COMPLETED
      handleResponse(req.status, req.responseText);
      break;
    default : ; // fehlerhafter Status
  }
};

Tabelle 1: Mögliche Werte für XMLHttpRequest.readyState

Wert	Bezeichnung	Bedeutung
0	UNINITIALIZED	Das Objekt wurde noch nicht initialisiert, d. h., es erfolgte noch kein Aufruf der Funktion open.
1	LOADING	Das Request-Objekt wurde initialisiert, aber der Request noch nicht abgesetzt (mittels send).
2	LOADED	Der Request wurde mittels der Funktion send -abgesetzt.
3	INTERACTIVE	Teile der Antwort sind bereits verfügbar. Über das Feld responseText kann auf die empfangenen Daten zugegriffen werden.
4	COMPLETED	Die Bearbeitung des Requests ist beendet.

Das in Nutzung einer Callback-Funktion für asynchroneHTTP-Requests gezeigte Code-Fragment bildet den Kern jeder AJAX-Anwendung mit XMLHttpRequest. Die einzige Plattformabhängigkeit besteht in der Erzeugung des XMLHttpRequest -Objekts, für das im Internet Explorer ein Objekt vom Typ ActiveXObject angelegt werden muss. Als Argument wird dem Konstruktor eine Zeichenkette übergeben, die das gewünschte Objekt bezeichnet. Je nach Version des Browsers und der lokalen Systeminstallation stehen in msxml.dll oder msxml2.dll unterschiedliche Varianten von XMLHttpRequest zur Verfügung. Glücklicherweise bieten alle diese Varianten das gleiche API, so dass keine weitere Unterscheidung erforderlich ist, sobald ein Objekt mit der benötigten Grundfunktionalität erzeugt wurde.

Die älteste Implementierung von XMLHttpRequest wird mit der Zeichenkette Microsoft.XMLHTTP angefordert, wie folgende Anweisung zeigt:

var req = new ActiveXObject("Microsoft.XMLHTTP");

Alternativ dazu kann das Objekt auch in einer neueren Variante als Teil des XML-Parsers MSXML verfügbar sein. Die Erzeugung des Objektes erfolgt analog zu der oben gezeigten Variante:

var req = new ActiveXObject("MSXML2.XMLHTTP");

Zu beachten ist, dass der Konstruktor ActiveXObject eine Exception auslöst, wenn das geforderte Objekt nicht erzeugt werden kann. Eine portable AJAX-Anwendung muss daher sukzessive die verschiedenen Möglichkeiten zum Anlegen des XMLHttpRequest-Objekts ausprobieren und für jeden Versuch eine geeignete Ausnahmebehandlung vorsehen. Eine weitgehend plattformunabhängige Funktion zum Erzeugen eines XMLHttpRequest-Objekts ist in Portable Funktion zum Erzeugen einesXMLHttpRequest-Objekts realisiert.

function createXMLHttpRequest() {
  var req = null;
  try {
    req = new ActiveXObject("MSXML2.XMLHTTP");
  }
  catch (err_MSXML2) {
    try {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (err_Microsoft) {
      if (typeof XMLHttpRequest != "undefined") 
        req = new XMLHttpRequest;
    }
  }
  return req;
}

Die Funktion createXMLHttpRequest erzeugt im ersten Schritt eine lokale Variable req, die das neu erzeugte Objekt aufnehmen soll. Anschließend werden nacheinander die verschiedenen Möglichkeiten zur Erzeugung des XMLHttpRequest-Objekts probiert, wobei die ActiveX-Varianten jeweils in einen try/catch-Block für die Behandlung von Exceptions eingeschlossen sind. Im zweiten catch-Block wird schließlich versucht, ein XMLHttpRequest-Objekt mit einem Aufruf von new anzulegen. Schlägt auch dies fehl, so muss die Anwendung auf AJAX-Funktionalität verzichten. Der Rückgabewert ist in diesem Fall null, ansonsten liefert die Funktion ein neues XMLHttpRequest -Objekt.

Wie man an diesem Beispiel sieht, sind auch AJAX-basierte Anwendungen nicht völlig frei von browserspezifischem Code. Glücklicherweise beschränkt sich dies aber auf wenige Zeilen, die sich leicht in einer generischen Funktionsbibliothek verstecken lassen. In Frameworks für AJAX stellen wir einige bekannte Bibliotheken für den Einsatz in AJAX-Anwendungen vor. Die meisten davon bieten eine ähnliche Kapselung für die Erzeugung des XMLHttpRequest -Objekts. Unter Umständen können dabei sogar noch weitere Varianten des Objekts berücksichtigt werden, die im Internet Explorer durch Anfügen einer Versionsnummer an das Argument des Konstruktors für das entsprechende ActiveX-Objekt referenziert werden, beispielsweise "MSXML2.XMLHTTP.4.0".

AJAX-Funktionsbibliotheken helfen aber nicht nur, diese plattformabhängigen Code-Bestandteile von der eigentlichen Programmlogik zu trennen, sondern sie unterstützen auch die Strukturierung eigener Anwendungen. So bieten einige Bibliotheken nicht nur Module zur Abwicklung der asynchronen Kommunikation zwischen Browser und Server, sondern auch generische Objekte zur Erstellung interaktiver Benutzungsschnittstellen.

Es ist ratsam, sich frühzeitig an den Einsatz einer AJAX-Funktionsbibliothek zu gewöhnen und auch kleine Projekte damit zu realisieren, sofern AJAX dort einen Mehrwert verspricht. So werden nachträgliche Restrukturierungen vermieden, wenn sich herausstellt, dass der eigene Code nicht hinreichend auf die asynchrone Kommunikation abgestimmt wurde oder dass das Programm die Besonderheiten bestimmter Browser nicht berücksichtigt. Um das Potential dieser Technologie ausschöpfen zu können, ist allerdings ein grundlegendes Verständnis der Abläufe unter der Oberfläche unverzichtbar. Bevor wir uns einer Beschreibung dieser Funktionsbibliotheken zuwenden, wollen wir daher die Funktionsweise von AJAX näher erläutern und widmen uns den Aufgaben, deren sich ein Anwendungsprogrammierer auch weiterhin annehmen muss.

• < blättern >

Home • Über uns • Qualität • AGB • Impressum • Stadtlupe • Stellenangebote & Jobs

Die TEIA AG bietet Bücher, Lernprogramme, SCORM und kostenlose Online Kurse zu Microsoft-Anwendungen, Open Office, IT, Programmierung und Wirtschaft.
Zu fast allen Online Kursen können zudem Zertifkate oder Teilnahmebescheinigungen erworben werden.

Access 2002 •  Access 2003 Basis •  Access 2003 Prof. •  Access 2007 Basis •  Adobe GoLive •  Adobe Photoshop •  AJAX •  Allgemeine Betriebswirtschaftslehre •  Apache •  Basiswissen für Selbstständige •  Bewerbungstipps •  Calc Basis •  Dreamweaver CS4 •  eBusiness •  eCommerce •  eGovernment •  Erinnerung an Douaumont •  Excel 2002 •  Excel 2003 Basis •  Excel 2003 Prof •  Excel 2007 Basis •  Excel 2007 Prof. •  Excel 2010 Basis •  Finanzmanagement •  HTML •  HTML CSS •  HTML Grundlagen •  Industriegütervertrieb •  Internet Technik •  JAVA •  JavaScript •  Lernen ohne Lehrer •  Marketing •  Markup-Sprachen •  Organisation und Technologiemanagement •  osCommerce •  Outlook 2003 •  Outlook 2007 •  Perl und CGI •  Personalmanagement •  PHP 4.3 •  PostgreSQL 9 •  PowerPoint 2003 •  Powerpoint 2007 •  Powerpoint 2010 •  Projektmanagement und MS Project 2000 •  Projektplanung und Projektoptimierung mit MS Project 2003 •  Rechnungswesen mit Beispielen •  Sicher auftreten •  SQL •  TEIA-Internet-Führerschein •  Unternehmensführung •  US-GAAP und IAS/IFRS •  Vertragswesen eBusiness •  Vista •  VWL •  Warum ich kein Christ sein will •  Widerstand •  Windows XP •  Wirtschaftsrecht •  Word 2002 •  Word 2003 Basis •  Word 2003 Prof. •  Word 2007 Basis •  Word 2007 Prof. •  Writer Basis •  XML •  XML Grundlagen •  XML XSL

Letzte Aktualisierung: 31.08.2010 15:29:09

Letzte Inhaltliche Überarbeitung: 29.06.2009 15:55:20

© 2000 - 2010 TEIA AG - Internet Akademie und Lehrbuch Verlag