Wikibooks

Websiteentwicklung: AJAX: Fehlerbehandlung

Bisher haben wir angenommen, dass alles funktioniert: der Server ist erreichbar, das serverseitige Programm läuft, die Daten werden korrekt übertragen. Nun werden wir mögliche Fehler behandeln, und der UserIn mehr Feedback über den Status des Programmes geben.

Bitte Warten...

Bearbeiten

Wenn das Laden vom Server einmal etwas länger dauert, soll der Leser trotzdem wissen, dass etwas passiert. Die Statusanzeige des Browser hilft nicht, da diese für Anfragen mit dem XMLHTTPRequest-Objekt nicht aktiviert wird. Wir müssen uns also selbst eine Status-Anzeige bauen:  

Die Statusanzeige selbst besteht aus einem animierten gif. Dieses Bild ist immer in der Webseite vorhanden, aber mit der Style-Anweisung visibility:collapse unsichtbar geschaltet: 

 <img id="bittewarten" src="bittewarten.gif" style="visibility:collapse;">

In unsere JavaScript-Funktion hol_datum() fügen wir also die Befehle zum Anzeigen bzw. Nichtanzeigen der GIF-Grafik ein. Außerdem schreiben wir in unseren output-Container "Wird geladen": 

 function hol_datum(){
  document.getElementById("output").innerHTML = "Wird geladen";
  document.getElementById("bittewarten").style.visibility = "visible";

  if (window.XMLHttpRequest){
   myAjax = new XMLHttpRequest();
  }else{
   //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
   myAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  myAjax.onreadystatechange=function(){
   if (myAjax.readyState==4 && myAjax.status==200){
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
   }
  };

  myAjax.open("GET","datum.php",true);
  myAjax.send();
 }

Fehler in ein Log-Fenster schreiben

Bearbeiten

Für die weiteren Programme schreiben wir uns die Funktion log_error, die den übergebene (Fehler-)Text in ein div am Ende der Webseite schreibt. Dieses div muss ebenfalls im HTML-Code erzeugt werden:

Die Funktion log_error
function log_error ( t ) {
  document.getElementById("log").innerHTML += t + "<br />";
}
Der DIV-Container log
<div id="log"></div>

AJAX-Aufruf nicht möglich

Bearbeiten

Der erste Fehler, der auftreten kann, ist ein Fehler beim Erzeugen des Ajax.Request-Objekts. Diese Art von Fehler kann direkt in der Funktion hol_datum() abgefangen werden. Dort wird einfach geprüft, ob das Ajax-Objekt nicht definiert wurde: 

function hol_datum(){
 document.getElementById("output").innerHTML = "Wird geladen";
 document.getElementById("bittewarten").style.visibility = "visible";

 if (window.XMLHttpRequest){
  myAjax = new XMLHttpRequest();
 }else{
  //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
  myAjax = new ActiveXObject("Microsoft.XMLHTTP");
 }

 if(!myAjax) log_error("Das Ajax-Objekt wird von diesem Browser nicht unterstützt!");

 myAjax.onreadystatechange=function(){
  if (myAjax.readyState==4 && myAjax.status==200){
   document.getElementById("output").innerHTML=myAjax.responseText;
   document.getElementById("bittewarten").style.visibility = "collapse";
  }
 };

 myAjax.open("GET","datum.php",true);
 myAjax.send();
}

Server nicht erreichbar

Bearbeiten

Sollte der Server nicht erreichbar sein, erhalten wir keine HTTP-Rückmeldung. Dies können wir im Eventhandler onreadystatechange prüfen. Hier prüfen wir gleich mit, ob die Seite nicht vorhanden ist (Fehler 404) oder ob der Server überhaupt nicht geantwortet hat (HTTP-Status-Code ist '0'): 

myAjax.onreadystatechange = function(){
 if(myAjax.readyState==4){
  switch (myAjax.status){
   case 200:
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
    break;
   case 404:
    log_error("Die angeforderte Datei ist nicht verfügbar!"); break; //(HTTP-Status-Code ist '404')
   case 0:
    log_error("Der Server antwortet nicht!"); break; //(HTTP-Status-Code ist '0')
   default:
    log_error("Es ist ein unbekannter Fehler aufgetreten!"); break; //(HTTP-Status-Code ist nicht '200')
  }
 }
};

Dieser Fehler tritt u.A. auch dann auf, wenn man eine Anfrage an einen 'fremden' Server stellen will. In diesem Fall besitzt man nicht genügend rechte, um die Anfrage durchzuführen.

Fehler im PHP-Skript

Bearbeiten

Ein Fehler im PHP-Skript (in unserem Beispiel: datum.php) wird von dem obigen Abfragen nicht erkannt. Hierzu können wir allerdings die Antwort des Servers nach dem Wort 'error' durchsuchen: 

  switch (myAjax.status){
   case 200:
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
    if ( myAjax.responseText.search(/error/) != -1 ) log_error("Error im PHP-Skript!");
    break;
   case 404:
    [...]

Das fertige Projekt - v2

Bearbeiten

Die fertige Website inklusive der Fehlerbehandlung sieht nun folgendermaßen aus: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Wikibooks-Ajax-Tutorial</title>
 <script type="text/javascript">
  function hol_datum(){
   var myAjax;
   document.getElementById("output").innerHTML = "Wird geladen";
   document.getElementById("bittewarten").style.visibility = "visible";
 
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   if(!myAjax) log_error("Das Ajax-Objekt wird von diesem Browser nicht unterstützt!");
   
   myAjax.onreadystatechange = function(){
    if(myAjax.readyState==4){
     switch (myAjax.status){
      case 200:
       document.getElementById("output").innerHTML=myAjax.responseText;
       document.getElementById("bittewarten").style.visibility = "collapse";
       if ( myAjax.responseText.search(/error/) != -1 ) log_error("Error im PHP-Skript!");
       break;
       case 404:
       log_error("Die angeforderte Datei ist nicht verfügbar!"); break; //(HTTP-Status-Code ist '404')
      case 0:
       log_error("Der Server antwortet nicht!"); break; //(HTTP-Status-Code ist '0')
      default:
       log_error("Es ist ein unbekannter Fehler aufgetreten!"); break; //(HTTP-Status-Code ist nicht '200')
     }
    }
   };

   myAjax.open("GET","datum.php",true);
   myAjax.send();
  }

  function log_error ( t ) {
   document.getElementById("log").innerHTML += t + "<br />";
  }
 </script>
</head>
<body>
 <input type="button" value="tu ajax" onClick="hol_datum()"><br>
 <div style="width:400px; border: 1px black solid;" id="output">.... noch nix ....</div>
 <img id="bittewarten" src="bittewarten.gif" style="visibility:collapse;">
 <div id="log"></div>
</body>
</html>

Hinweis: Beim Programmieren einer 'echten' AJAX-Applikation ist die Ausgabe des Fehlers in einen DebugLog nicht genug, hier ist eine gut lesbare und für Nicht-Programmierer leicht verständliche Fehlermeldung zu formulieren.



Abgerufen von „https://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJAX:_Fehlerbehandlung&oldid=689913“