Vor etwas über einem Jahr habe ich einen Eintrag zum Thema „Saubere Ajax Anfragen und Antworten“ geschrieben. Heute möchte ich diesen Beitrag um ein paar Punkte ergänzen!

Ajax Anfragen im Frontend verarbeiten

Wenn ihr meinen ersten Beitrag zu diesem Thema gelesen habt, dürfte euch die Struktur der (JSON) Antwort bekannt vorkommen:

{
   "success":true,
   "message":null,
   "data":{/* ... */}
}

Das dazugehörige Javascript, das den Request ausgelöst hat, könnte in etwa so aussehen:

// Prototype syntax.
new Ajax.Request('url/zum/ajax-handler.php', {
    onComplete:function (response) {
        var json = response.responseJSON;

        if (json.success) {
           // Do something!
        } else {
           // Output error message.
        }
    }
});

Das sieht recht gut aus und funktioniert sehr zuverlässig! Mit einer Ausnahme:
Was passiert, wenn wir PHP Fehler haben? Und damit meine ich keine Exceptions – diese haben wir im PHP Teil mit einem Try/Catch Block abfangen. Es wäre ja durchaus möglich das wir Fehler außerhalb des Try/Catch Blocks haben oder auch vor dem header() Befehl (wodurch überhaupt erst der application/json Content-Type definiert wird).

Das Ergebnis ist folgendes: Wir werden keine sauberen JSON Daten zurückbekommen. Und das bedeutet wiederum, das wir im Javascript callback nicht auf response.reseponseJSON zugreifen können!
Das kann zwar von (Javascript) Framework zu Framework anders aussehen, doch das Problem dürfte im Kern bestehen bleiben.

Was können wir tun?

Das ist relativ einfach – Im Fall von Prototype können wir einfach prüfen ob response.reseponseJSON existiert:

// Prototype syntax.
new Ajax.Request('url/zum/ajax-handler.php', {
    onComplete:function (response) {
        var json = response.responseJSON;

        if (! response.hasOwnProperty('responseJSON') || Object.isUndefined(response.responseJSON)) {
           // Output the raw response!
           console.log(response.responseText);
        }

        if (json.success) {
           // Do something!
        } else {
           // Output error message.
        }
    }
});

Im MooTools Framework (so wie einigen anderen) gibt es eine extra Request.JSON Methode zum anfordern von JSON Daten:

// MooTools syntax.
new Request.JSON({
   url:'/ajax/get-data',
   data:{parameter:123},
   onSuccess:function(responseJSON, responseText) {
      // We received valid JSON data.
   },
   onError:function(text, error) {
      // The received data is no valid JSON.
   }
}).send();

Bei eigenen Projekten baue ich mir meist eine globale callback-Funktion die diesen Fall abhandelt (z.B. durch eine Benachrichtigung in der Oberfläche), aber das bleibt natürlich jedem selbst überlassen!

Zu guter letzt kann ich euch nur noch folgendes ans DEV-Herz legen:
Wenn euer Framework euch callback-Methoden, wie z.B. „onSuccess“, „onError“ oder „onFailure“ anbietet: Nutzt diese und vertraut nicht blind auf Methoden wie „onComplete“ oder „onFinish“ – diese werden in den meisten Fällen immer aufgerufen, egal ob ein Fehler aufgetreten ist oder nicht.

Mit diesen Tipps möchte ich mich für Heute von euch verabschieden und eine angenehme Woche so wie Happy Coding! wünschen!