Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Bloggt Ihr?
  •  
  • ja
  • nein
  • bloggen?
  •  

BlackBeats

BlackBeats.fm Stream
- ONAIR -
Hip Hop Musik vom feinsten

Blackbeats FM

Linktipps

» Startseite » HTML, CSS und JavaScript Tutorials

XMLHttpRequest - Statusanzeige

 
Dieses Script zeigt die Nutzung eines XMLHttpRequests (Ajax) am Beispiel eines Dateidownloads. Es können die verschiedenen Stadien zwischendurch ausgegeben werden.



Genutzt wird hier die Technologie Ajax (Asynchronous JavaScript and XML) die einen asynchronen Datenaustausch mit dem Server zulässt.
Die Datei test.txt muss in diesem Beispiel im selben Verzeichniss liegen wie dieses Script.

Natürlich gibt es dazu auch ein Beispiel.
  1.  <script type="text/javascript">
  2.  // Wenn das Fenster geladen wird
  3.  window.onload = function(){
  4.  // Es wird festgestellt ob ein Microsoft,
  5.  // oder ein auf Gecko basierender Browser vorliegt
  6.  // Wenn beides nicht zutrifft hat req den Wert false
  7.  var req = (window.XMLHttpRequest)?new XMLHttpRequest():((window.ActiveXObject)
  8.  ?new ActiveXObject("Microsoft.XMLHTTP"):false);
  9.  // Funktion wird festgelegt: onreadystatechange führt die folgenden Funktionen
  10.  // im Falle eines Server-Antwort-Code-Wechsels aus,
  11.  // dass heisst wenn sich der Fortschritt des Downloads ändert
  12.  // open(METHODE,URL,ASYNCHRON=TRUE,SYNCHRON=FALSE);
  13.  // true bedeutet hier das die asynchrone Übertragung gewählt wird
  14.  // Wichtig, da sonst der Server erst am Ende antwortet und nicht schon zwischendurch,
  15.  // was ja der Sinn von Ajax sein soll
  16.  req.open("GET","test.txt",true);
  17.  req.onreadystatechange = function(){
  18.    // Wenn Fortschritt = 0, dann wurde der Request noch nicht abgeschickt,
  19.    // ansonsten: Upload / Download wurde noch nicht betätigt
  20.    if(req.readyState == 0){
  21.      // In einer Statusanzeige könnte jetzt "uninitialized" stehen,
  22.      // es könnte jetzt ein Statusbild angezeigt werden oder ähnliches
  23.     
  24.    // Wenn Fortschritt = 1, Request wird gestartet, wurde aber noch nicht abgeschickt
  25.    }else if(req.readyState == 1){
  26.      // In einer Statusanzeige könnte jetzt "loading process" stehen
  27.    // Wenn Fortschritt = 2, Request wurde ausgeführt,
  28.    // es wird auf Server-Antwort gewartet
  29.    }else if(req.readyState == 2){
  30.      // In einer Statusanzeige könnte jetzt "process loaded" stehen
  31.      // Wobei der Prozess noch nicht beendet ist, da auf eine
  32.      // Antwort des Servers gewartet wird
  33.    // Wenn Fortschritt = 3, Request ausgeführt und Teile der
  34.    // Antwort des Servers sind schon im Puffer
  35.    }else if(req.readyState == 3){
  36.      // In einer Statusanzeige könnte jetzt "reading/sending data" stehen
  37.    // Wenn Fortschritt = 4, Request ausgeführt und Antwort des
  38.    // Servers erhalten, Up-/Download abgeschlossen
  39.    }else if(req.readyState == 4){
  40.      // In einer Statusanzeige könnte jetzt "process completed" stehen
  41.    // Wenn Statuscode = 200 oder "OK", Anfrage erhalten und Daten sind in Serverantwort
  42.    if(req.status == 200 || req.status == "OK"){
  43.      // Datei wird als alert() ausgegeben
  44.      alert(req.responseText);
  45.    // Wenn nichts zutrifft
  46.    }else{
  47.      alert("ERROR: "+req.statusText);
  48.     
  49.    }
  50.    }
  51.  }
  52.  // Erst nach Aufruf von "send()" wird die Anfrage gesendet
  53.  req.send(null);
  54.  }
  55.  </script>



Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!
Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
Wie baue ich CSS ein