Seite wählen
Anzeige
dmsolutions-banner

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.  //
  10.  // im Falle eines Server-Antwort-Code-Wechsels aus,
  11.  //
  12.  // open(METHODE,URL,ASYNCHRON=TRUE,SYNCHRON=FALSE);
  13.  //
  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.    //
  20.    if(req.readyState == 0){
  21.      //
  22.      //
  23.     
  24.    // Wenn Fortschritt = 1, Request wird gestartet, wurde aber noch nicht abgeschickt
  25.    }else if(req.readyState == 1){
  26.      //
  27.    //
  28.    // es wird auf Server-Antwort gewartet
  29.    }else if(req.readyState == 2){
  30.      //
  31.      // Wobei der Prozess noch nicht beendet ist, da auf eine
  32.      // Antwort des Servers gewartet wird
  33.    //
  34.    // Antwort des Servers sind schon im Puffer
  35.    }else if(req.readyState == 3){
  36.      //
  37.    //
  38.    // Servers erhalten, Up-/Download abgeschlossen
  39.    }else if(req.readyState == 4){
  40.      //
  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>