Websiteentwicklung: AJAX: Fehlerbehandlung

Aus 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.

[Bearbeiten] Bitte Warten

Wenn das Laden vom Server einmal etwas länger dauert soll die LeserIn 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 also so eine Status-Anzeige selbst bauen.

Die Statusanzeige selbst besteht aus einem animierten gif, diese Bild ist immer in der Webseite vorhanden, aber mit der Style-Anweisung display:none unsichtbar geschalten:

  <img id="bittewarten" src="bittewarten.gif"
     style="display:none;">

Wieder bietet Prototype eine praktische Methode, mit der man Elemente der Webseite sichtbar und unsichtbar schalten kann: Element.show und Element.hide. Diese Befehle werden entsprechend in den Javascript-Code eingefügt:

function hol_datum() {
    $('output').innerHTML = "Wird geladen";
    Element.show( $('bittewarten') );     
    var myAjax = new Ajax.Request(
          "datum_uhrzeit.php",
          {
              method: 'get', 
              parameters: Form.serialize($('input')),
              onComplete: show_datum
          }
    );
  }
 
  function show_datum( requestObject ) {
    $('output').innerHTML = requestObject.responseText;
    Element.hide( $('bittewarten') );      
  }

[Bearbeiten] Fehler in Log-Fenster schreiben

Für die weiteren Programme verwenden wir eine Funktion log_error die den Text des Fehlers in ein div am Ende der Webseite schreibt.

function log_error ( t ) {
  $('log').innerHTML += t + "<br />";
}

[Bearbeiten] AJAX-Aufruf nicht möglich

Der erste Fehler der auftreten kann ist ein Fehler beim Erzeugen des Ajax.Request Objekts. Diese Art von Fehler kann mit onException abgefangen werden:

function show_exception( requestObject, ex) {
 log_error("Keine AJAX-Anfrage an " + requestObject.url 
    + " möglich: " + ex);
}

Dieser Fehler tritt u.A. dann auf, wenn man eine Anfrage an einen 'fremden' Server stellen will, dann erhält man die Fehlermeldung:

Keine AJAX-Anfrage an http://far.far.away/datum_uhrzeit.php?u=on&_= möglich: Die Erlaubnis für den Aufruf der Methode XMLHttpRequest.open wurde verweigert

[Bearbeiten] HTTP-Status nicht OK

Die zweite Art von Fehler wird über den HTTP-Status-Code übermittelt: wenn der Code anders als 200 lautet ist das eine Fehlermeldung. Diese Fehler kann man mit onFailure abfangen:

function show_failure( requestObject ) {
    log_error("Error from Server:" + requestObject.statusText);
}

[Bearbeiten] PHP: error im Text

PHP setzt den HTTP-Status nicht wenn ein Fehler auftritt. Hier kann man nur am Inhalt der HTTP-Antwort erkennen, dass etwas schief gegangen ist:

function show_datum( requestObject ) {
  Element.hide( $('bittewarten') )      
  if ( requestObject.responseText.search(/error/) >= 0 ) {
    log_error("Error in PHP: " + requestObject.responseText);
  } 
  ...

[Bearbeiten] Alle Fehler einbinden

So sieht die Erzeugung des Ajax.Request jetzt aus:

var myAjax = new Ajax.Request(
        "datum_uhrzeit.php",
      {
          method: 'get', 
          parameters: Form.serialize($('input')),
          onSuccess:   show_datum,
          onFailure:   show_failure,
          onException: show_exception
      }
);

Beim Programmieren einer 'echten' AJAX-Applikation ist die Ausgabe des Fehlers in eine log nicht genug, hier ist eine gut lesbare Fehlermeldung an die UserIn zu formulieren.

[Bearbeiten] Links

Zurück zu Erstes Programm | Hoch zu AJAX | Vor zu Komponenten für Formulare