JavaScript Ajax Beispiel 1: Ablauf eines HTTP-Requests (Schritte und Status)

Das folgende Beispiel zeigt den Ablauf eines Ajax-Requests. Dabei werden die einzelnen Zustände, die während der Verarbeitung eines HTTP-Requests mit Ajax auftreten können, ausgegeben. Zu diesem Zweck wird eine auf dem Server vorhandene XML-Datei per Ajax-HTTP-Request abgerufen. Die Ausgabe der während des Vorgangs ermittelten Statusinformationen erfolgt im dafür vorgesehenen SPAN-Element mit der ID "status".

Um zu dem für einen Ajax-Request benötigten HTTP-Request-Objekt zu gelangen, muss man wieder einmal auf die Eigenarten bestimmter Browser eingehen. Während die meisten Browseranwendungen das vom W3C zur Standardisierung vorgesehene HTTP-Request-Objekt mit dem Namen XMLHttpRequest – welches per Window-Objekt erzeugt werden kann – unterstützt, nutzt der Internet Explorer wieder einmal eine ActiveX-Komponente um ein solches Objekt zu erzeugen.

Die unten definierte Funktion showStatusInformation() soll Informationen, die während des Ablauf des HTTP-Requests anfallen, ausgeben. Ausgegeben werden die gesammelten Informationen im HTML-Element mit der ID "status", welches unter Verwendung von getElementById() ermittelt wird.

Alle Zustände (readyState), die während des Ajax-Requests auftreten können, werden in einem Array mit ihrer Textbeschreibung angegeben. Der Index der Elemente im Array ist zugleich die Status-ID des jeweiligen readyState-Zustandes. Die im Array gespeicherten Zeichenketten beschreiben also den Zustand, in dem sich der Request gerade befindet.

Zu diesem Zweck werden einige DOM-Methoden aus dem JavaScript-Objekt Document verwendet. Dies sind zum Einen die Methode createElement, welche ein neues HTML-Element erzeugt, sowie die Methode createTextNode, die zur Erzeugung von Textknoten dient.

<!-- Feld zur Ausgabe von Statusinformationen über den Ajax-Request -->
<span id="status"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Wenn es sich bei dem vom Benutzer verwendeten Browser
// um einen Internet Explorer handelt, wird das Request-Objekt
// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.
var httpRequestObject = (navigator.appName == "Microsoft Internet Explorer") ? 
      new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();
// Variable zur Speicherung der Anzahl der erhaltenen Datenpakete
var dataPackages = 0;
// Status nach Erzeugung des Request-Objekts anzeigen
showStatusInformation ();
// Verbindung per GET öffnen und die XML-Datei testdatei.xml abrufen.
httpRequestObject.open ('GET', 'testdatei.xml');
// Event-Handler-Funktion showStatusInformation mit dem readystatechange-Event
// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich
// der Status der Abfrage ändert.
httpRequestObject.onreadystatechange = showStatusInformation;
// Als nächstes wird die Anfrage an den Server gesendet.
httpRequestObject.send (null);

// Folgende Funktion gibt Statusinformationen aus, die bei den
// einzelnen Schritten während des Ablaufs eines Ajax-Requests
// abfragbar sind.
function showStatusInformation () {
  // Zustandsbeschreibungen eines XMLHttpRequest (Zuordnung von
  // readyState und Statusbeschreibung)
  var readyStates = new Array ('unsent', 'open', 'sent', 'loading', 'done');
  // Statusinformationen der Rückmeldung ausgeben
  var msg = 'Status des HTTP-Request:\n  ' +
      'readyState: ' + httpRequestObject.readyState + ' (' +
      readyStates[httpRequestObject.readyState] + ')\n  ';
  // Wenn Daten empfangen werden (Status loading)...
  if (httpRequestObject.readyState == 3)
    // sollen die Datenpakete gezählt und deren bisherige Anzahl
    // ausgegeben werden.
    msg += 'Anzahl der bisher empfangenen Datenpakete: ' + (++dataPackages) + '\n  ';
  // Folgende Informationen sind erst ab readyState > 1 definiert
  // und werden deshalb erst nach OPEN angezeigt.
  if (httpRequestObject.readyState > 1)
    msg += 'status: ' + httpRequestObject.status + ' (' +
           httpRequestObject.statusText + ')\n' +
      // An dieser Stelle wird nur ein Teil der Request-Header ausgegeben...
      // Eine vollständige Liste der einzelnen Request-Header eines Requests kann mit
      // httpRequestObject.getAllResponseHeaders() abgefragt werden.
           'Informationen aus dem Request-Header:\n  ' +
           'Content-Type: ' + httpRequestObject.getResponseHeader ('Content-Type') + '\n  ' +
           'Content-Language:' + httpRequestObject.getResponseHeader ('Content-Language');
  // Gesammelte Daten per DOM im dafür vorgesehenen HTML-Element ausgeben.
  // Jedesmal, wenn die Funktion aufgerufen wird, soll dann ein
  // neues PRE-Element erzeugt werden...
  var p = document.createElement ('pre');
  // die auszugebenen Informationen in das Element eingefügt...
  p.appendChild (document.createTextNode (msg));
  // und am Ende des Feldes für die Ausgabe angehängt werden.
  document.getElementById ('status').appendChild (p);
}
// -->
</script>

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht