Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 18 AJAX
  gp 18.1 AJAX-Beispiele
  gp 18.2 AJAX-Technik
    gp 18.2.1 HTTP-Anfragen senden und auswerten
    gp 18.2.2 Parameter senden
    gp 18.2.3 Mit komplexen Daten arbeiten – JSON
    gp 18.2.4 Anfragen abbrechen
    gp 18.2.5 Weitere Möglichkeiten
  gp 18.3 AJAX-Probleme (und -Lösungen)
    gp 18.3.1 Bookmarks
    gp 18.3.2 Zurück-Schaltfläche


Rheinwerk Computing

18.2 AJAX-Technik  downtop

Der Ursprung von AJAX ist Microsoft. Zu Zeiten des Internet Explorer 5 hat das Internet-Explorer-Team eine Technologie in die Browser integriert, um im Hintergrund HTTP-Anfragen abzusetzen und die Rückgabe auszuwerten. Die Anforderung kam vom Office-Team, genauer gesagt von den Outlook-Entwicklern. Die Web-Schnittstelle von Outlook (OWA – Outlook Web Access) benötigte diese Funktionalität der HTTP-Anfragen im Hintergrund, um beispielsweise ohne permanentes Neuladen zu prüfen, ob es schon neue Mails gibt.

Dieses Feature – implementiert als ein ActiveX-Control namens XMLHttpRequest – fristete lange Zeit ein Schattendasein, denn wo außerhalb eines Intranets ist es überhaupt vertretbar, nur für einen Zielbrowser zu entwickeln?

Doch die Idee hinter XMLHttpRequest ist hervorragend, nur die Beschränkung auf ActiveX ist natürlich für einen systemunabhängigen Einsatz ein Unding. Deswegen haben die Hersteller der anderen Browser nachgelegt und XMLHttpRequest als natives Browserobjekt implementiert. Seit Mozilla 1.0, Netscape 7, Firefox, Safari 1.2, Konqueror 3 und Opera 7 gibt es auch in alternativen Browsern die AJAX-Unterstützung.

XMLHttpRequest kann lediglich eine HTTP-Anfrage an einen Webserver schicken und die Rückgabe auswerten. Sprich, AJAX an sich ist eigentlich eine sehr simple Sache. Die große Kunst besteht dann darin, die Server-Rückgabe irgendwie auf der Seite darzustellen. Dazu verwenden Sie natürlich JavaScript, in der Regel DOM, manchmal auch DHTML. Das wurde bereits behandelt, weswegen dieses Kapitel ausschließlich zeigt, wie Sie den Datenaustausch mit dem Server realisieren.


Rheinwerk Computing

18.2.1 HTTP-Anfragen senden und auswerten  downtop

Das Ganze funktioniert in drei Schritten. Zunächst (Schritt 1) müssen Sie das entsprechende Element erzeugen. Beim Internet Explorer geht das folgendermaßen:

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

Die ActiveX-Funktionalität von XMLHttpRequest steckt in der XML-Bibliothek von Microsoft; bei neueren Versionen müssen Sie die Versionsnummer explizit angeben. Die gute Nachricht: Obige Variante funktioniert immer, denn auch neuere XML-Versionen liefern noch das alte Objekt mit.

Andere Browser verwenden ein natives Objekt::

var http = new XMLHttpRequest();

Da das XMLHttpRequest-Objekt so populär geworden ist, hat sich Microsoft entschieden, im Internet Explorer 7 XMLHttpRequest ebenfalls als natives Objekt mitzuliefern. Ein Hintergrund ist auch, dass man ActiveX im Internet Explorer abschalten, aber trotzdem JavaScript zulassen kann. Im Internet Explorer 7 funktioniert auch noch der ActiveX-Ansatz, aber eben auch der Weg per nativem JavaScript-Objekt.

Eine entsprechende Abfrage, welcher Browsertyp vorliegt, könnte also wie folgt aussehen:

var http;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}

Alternativ können Sie natürlich auch mit verschachtelten try-catch-Anweisungen arbeiten.

Schritt 2: Jetzt müssen Sie eine Verbindung zur Zielseite herstellen (die sich aus Sicherheitsgründen innerhalb derselben Domain befinden muss). Geben Sie die URL und die Sendemethode ("GET" oder "POST" beispielsweise) an, und rufen Sie die Methode open() auf. Als Parameter übergeben Sie (GET- oder POST-)Parameter, die Sie bei der Anfrage mitschicken möchten (oder null, wenn Sie nichts übergeben möchten). Der dritte Parameter gibt an, wie die Kommunikation ablaufen soll:

gp  false steht für synchron: Die Skriptausführung wird angehalten, bis die Daten vom Server zurückkommen.
gp  true steht für asynchron: Die Skriptausführung geht weiter, denn die HTTP-Anfrage wird im Hintergrund ausgeführt.

In der Regel verwenden Sie asynchrone Kommunikation, denn dann steht nicht die gesamte JavaScript-Applikation, bloß weil der Webserver die Anfrage nur langsam abarbeitet:

http.open("GET", "datei.html", true);

Bei asynchronen Anfragen müssen Sie natürlich Bescheid bekommen, sobald das Ergebnis vom Server da ist. XMLHttpRequest regelt das über eine Callback-Funktion: eine Funktion, die aufgerufen wird, wenn Resultate vom Webserver kommen.

In der Eigenschaft onreadystatechange geben Sie den Namen dieser Callback-Funktion an (als Verweis, also ohne Anführungszeichen); alternativ verwenden Sie eine anonyme Funktion:

http.onreadystatechange = ausgeben;

oder alternativ:

http.onreadystatechange = function() { ... };

Jetzt fehlt nur noch die Funktion zum Ausgeben der Rückgabe Schritt 3. Dazu ist zunächst festzuhalten, dass das Ereignis readystatechange immer dann ausgelöst wird, wenn sich der Zustand des HTTP-XML-Objekts ändert. Das passiert beispielsweise bei der Initialisierung, beim Verbindungsaufbau zur Datei und eben auch, wenn die externe Ressource komplett geladen worden ist. Die zugehörige Eigenschaft heißt readyState und kann die folgenden fünf Werte annehmen:

gp  0 – nicht initialisiert
gp  1 – lädt
gp  2 – fertig geladen
gp  3 – wartet
gp  4 – fertig

Wenn alles geklappt hat, hat die Eigenschaft readyState also den Wert 4. Sie müssen die Variable der XMLHttpRequest-Instanz also global machen, um von überall aus Zugriff darauf zu erhalten.

Wenn alles passt, enthält die Eigenschaft responseText den Inhalt der entfernten Datei; Sie können dann diese Daten weiterverarbeiten. Hier sehen Sie ein vollständiges Listing, das eine simpel gestrickte HTML-Datei einliest und ausgibt:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("GET", "datei.html", true);
   http.onreadystatechange = ausgeben;
   http.send(null);
}

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
   }
}
//--></script>
</head>
<body>
HTML vom Server:
<div id="Ausgabe"></div>
</body>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 18.5     Die HTML-Daten kommen vom Server.

Hier der Vollständigkeit halber noch der Inhalt der Datei datei.html:

<p>AJAX erm&ouml;glicht <i>spannende</i> Effekte</p>

Rheinwerk Computing

18.2.2 Parameter senden  downtop

Wie bereits erwähnt wurde, können Sie bei der Methode send() des XMLHttpRequest-Objekts POST-Parameter mit angeben; GET-Parameter schreiben Sie direkt in die URL. Um diese auszuwerten, benötigen Sie allerdings eine serverseitige Technologie. Das folgende PHP-Skript gibt alle GET- und POST-Daten als HTML-Fragment aus:

<h1>GET</h1>
<?php
   echo nl2br(htmlspecialchars(print_r($_GET, true)));
?>
<h1>POST</h1>
<?php
   echo nl2br(htmlspecialchars(print_r($_POST, true)));
?>

Im folgenden Listing übergeben Sie ein paar Parameter an das Skript:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("GET", "getpost.php?a=1&b=2&c=3", true);
   http.onreadystatechange = ausgeben;
   http.send(null);
}

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
   }
}
//--></script>
</head>
<body>
HTML vom Server:
<div id="Ausgabe"></div>
</body>
</html>

Wie Sie im Browser sehen können, gibt das serverseitige Skript die übergebenen Daten aus.

Bei POST ist die Sache nicht ganz so einfach, denn ein Webbrowser schickt bei POST-Anfragen immer einen speziellen HTTP-Header mit, um das serverseitige Skript darauf vorzubereiten. Die zugehörige Methode heißt setRequestHeader(), der HTTP-Header ist Content-Type, und der erforderliche Wert ist "application/x-www-form-urlencoded". Damit ergibt sich folgendes Listing:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("POST", "getpost.php", true);
   http.onreadystatechange = ausgeben;
   http.setRequestHeader(
      "Content-Type",
      "application/x-www-form-urlencoded");
   http.send("a=1&b=2&c=3");
}

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
   }
}
//--></script>
</head>
<body>
HTML vom Server:
<div id="Ausgabe"></div>
</body>
</html>

Abbildung 18.6 zeigt das Ergebnis: Das Skript empfängt die POST-Daten und schickt sie wieder zurück.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 18.6     Mit einem Extra-HTTP-Header funktionieren auch POST-Anfragen.


Rheinwerk Computing

18.2.3 Mit komplexen Daten arbeiten – JSON  downtop

In Kapitel 13 haben Sie zwei platzsparende JavaScript-Notationen kennengelernt:

gp  Arrays können mit eckigen Klammern angegeben werden:
["eins", "zwei", "drei"]
gp  Objekte können mit geschweiften Klammern angegeben werden:
{"Eigenschaft": "Wert", "Methode": function() { ... }}

Und obwohl das tatsächlich Teil der JavaScript-Spezifikation ist, wurde das Ganze erst bekannt, seitdem es einen Namen gibt. Der lautet JSON – JavaScript Object Notation. Eine eigene Homepage gibt es dafür sogar auch, nämlich http://json.org/.

Das Schöne an JSON ist, dass damit Arrays und Objekte sehr simpel als Zeichenkette angegeben werden können; man spricht hier auch von Serialisierung.

Der eigentliche Clou bei JSON ist, dass diese Strings sehr einfach wieder in JavaScript-Arrays oder Objekte zurückverwandelt werden können: mit eval()! Hier ein Beispiel:

var json_array = '["eins", "zwei", "drei"]';
var json_objekt = '{"Eigenschaft": "Wert", "Methode": function() { alert(this.Eigenschaft); } }';
var a = eval("(" + json_array + ")");
var o = eval("(" + json_objekt + ")");
alert(a.length); // gibt "3" aus
o.Methode(); // gibt "Wert" aus

In Verbindung mit AJAX sehen Sie, wie unverzichtbar JSON in nur kürzester Zeit geworden ist. Denn wenn Sie von der Serverseite her mehr als nur bloßen Text zurückgeben möchten, ist JSON ein perfektes Format dafür.

Im folgenden Kapitel lernen Sie einen anderen, aber deutlich komplizierteren Weg kennen.

Ein kleines Beispiel soll zeigen, was damit möglich ist. Erinnern Sie sich noch an das Beispiel in Kapitel 16, in dem dynamisch eine HTML-Aufzählungsliste aus einem JavaScript-Objekt erstellt worden ist? Dieses Beispiel finden Sie im Folgenden wieder, nur kommt diesmal das JavaScript-Objekt vom Server – in Form eines JSON-Strings:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("GET", "json.txt", true);
   http.onreadystatechange = ausgeben;
   http.send(null);
}

function ausgeben() {
   if (http.readyState == 4) {
      var daten = http.responseText;
      daten = eval("(" + daten + ")");

      var liste = document.getElementById("Liste");
      for (var i = 0; i < daten.length; i++) {
         var link = daten[i];
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", link.url);
         var txt = document.createTextNode(link.text);
         a.appendChild(txt);
         li.appendChild(a);
         liste.appendChild(li);
      }
   }
}
//--></script>
</head>
<body>
<ul id="Liste"></ul>
</body>
</html>

Hier der Vollständigkeit halber noch der Inhalt der Datei json.txt:

[ {"text": "Mozilla", "url": "http://www.mozilla.com/"}, {"text": "Microsoft", "url": 
"http://www.microsoft.com/"}, {"text": "Opera", "url": "http://www.opera.com/"} ]

In Abbildung 18.7 können Sie das Ergebnis sehen: Die Listendaten kommen aus der JSON-Datei.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 18.7     Die Liste wurde mit JSON-Daten gefüllt.

Die JavaScript-Funktion eval() ist relativ gefährlich, denn sie führt Code aus. Sie müssen also der Quelle, von der die JSON-Daten kommen, unbedingt vertrauen. Somit sind beispielsweise Daten von Ihrem eigenen Webserver in Ordnung, Daten aus der URL dagegen scheiden aus.


Rheinwerk Computing

18.2.4 Anfragen abbrechen  downtop

Bei AJAX-Anfragen per XMLHttpRequest gibt es leider einen kleinen Nachteil: Das Error-Management ist schwierig bis hin zu nicht möglich. Sie erfahren nämlich nicht, wenn eine Anfrage kein Ergebnis liefert oder zu einem Fehler führt. Das heißt, unter Umständen warten Sie vergeblich auf eine Rückgabe.

Mit der Methode abort() des XMLHttpRequest-Objekts brechen Sie eine Anfrage ab, wenn sie zu lange dauert. Um das zu demonstrieren, erstellen wir ein PHP-Beispiel namens langsam.php – ein Skript, das unter Umständen langsam läuft (einen zufälligen Wert zwischen eine und zehn Sekunden):

<?php
$zufall = rand(1, 10);
sleep($zufall);
?>
<p>AJAX erm&ouml;glicht <i>spannende</i> Effekte</p>

Kommen wir nun zum Listing mit der Timeout-Überprüfung. Zunächst geben Sie die URL des »langsamen« PHP-Skripts an. Kleiner Kniff am Rande: An die URL wird eine Zufallszahl als GET-Parameter angehängt. Das verhindert Browser-Caching, so dass das PHP-Skript bei jedem Aufruf auch eine andere Laufzeit hat:

http.open("GET", "langsam.php?" + Math.random(), true);

Dann erstellen Sie einen Timeout: Nach fünfeinhalb Sekunden soll die Anfrage abgebrochen werden:

id = window.setTimeout("abbrechen()", 5500);

In dieser Funktion abbrechen() rufen Sie die Methode abort() auf und geben eine entsprechende Meldung aus:

function abbrechen() {
   http.abort();
   document.getElementById("Ausgabe").innerHTML =
      "Die Anfrage dauerte zu lange.";
}

Kommt allerdings vor Ablauf der fünfeinhalb Sekunden ein Ergebnis vom Server, muss natürlich der Timeout gelöscht werden:

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
      window.clearTimeout(id);
   }
}

Hier noch einmal der komplette Code im Überblick:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
var id = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("GET", "langsam.php?" + Math.random(), true);
   http.onreadystatechange = ausgeben;
   http.send(null);
   id = window.setTimeout("abbrechen()", 5500);
}

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
      window.clearTimeout(id);
   }
}

function abbrechen() {
   http.abort();
   document.getElementById("Ausgabe").innerHTML =
      "Die Anfrage dauerte zu lange.";
}
//--></script>
</head>
<body>
HTML vom Server:
<div id="Ausgabe"></div>
</body>
</html>

Probieren Sie es aus: In etwa der Hälfte der Fälle erscheint ein Ergebnis vom Server, in der anderen Hälfte sehen Sie eine Fehlermeldung.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 18.8     Der Server war schnell genug.

Denken Sie immer daran: Wenn Sie PHP-Skripte ausführen, benötigen Sie einen PHP-fähigen Webserver und müssen die Beispiele per http://<servername>/<dateiname> aufrufen, nicht direkt über das Dateisystem.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 18.9     Der Server war zu langsam.

Mit der gezeigten Technik können Sie also einfach einen Mechanismus implementieren, der nach dem Ablauf von ein paar Sekunden erkennen kann, dass der Server Probleme hat, und dementsprechend darauf reagiert.


Rheinwerk Computing

18.2.5 Weitere Möglichkeiten  toptop

Zum Abschluss des Technik-Blocks folgt hier noch ein kurzer Überblick, was das XMLHttpRequest-Objekt sonst noch bietet (die komplette Auflistung der Eigenschaften und Methoden finden Sie in der Referenz):

gp  Das Auslesen aller (getAllResponseHeaders()) oder eines (getResponseHeader()) HTTP-Headers
gp  Auswertung des HTTP-Statuscodes (status) samt textueller Beschreibung (statusText)
gp  Zugriff auf den Rückgabewert als XML-DOM-Objekt (responseXML) – mehr dazu im nächsten Kapitel!

Auch die Verwendung von HTTP-Authentifizierung ist möglich, wenn der Benutzername und das Passwort in der URL angegeben werden:

http://Benutzer:Passwort@Servername/Pfad/Datei.xyz

Allerdings ist das eine fragwürdige Implementierung: Der JavaScript-Code und auch der HTTP-Verkehr sind nicht verschlüsselt, somit sind Benutzername und Passwort im Klartext einsehbar.

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern