Diese Woche möchte ich euch eine coole Methode zeigen, wie ihr bei Ajax-Requests zusätzliche Daten an den Client zurückliefern könnt indem ihr Response-Header benutzt. Diese Technik kann sehr hilfreich sein, wenn ihr den Inhalt des Responses nicht verändern könnt oder möchtet.

Wenn es euch, warum auch immer, nicht möglich sein sollte zusätzliche Daten zu einem Request zurückzuliefern (z.B. weil euer Frontend ein fest definiertes Format erwartet) habt ihr in der Regel nicht viel Möglichkeiten. Ihr könnt entweder euer Frontend an „X“ Stellen anpassen oder eine generische Lösung erstellen – natürlich ist die generische Lösung die erstrebenswerte 😉

Daten im Response-Header senden?

Ganz genau, wir benutzen den „Antwort-Header“ (=Response-Header) eines Requests um Daten an den Client zu schicken! Keine Sorge: das klingt nach mehr Aufwand, als es ist. Einige Tools benutzen diese Technik zum Debuggen oder um eurer Applikation nicht im Weg zu stehen (wie z.B. FirePHP).

Regeln für Daten im Header

1. Euer Header-Key muss mit „X-“ beginnen
2. Header müssen zwingend vor dem Output gesetzt werden (schaut euch ggf. die Output-Buffer Funktionen an)
3. Header Daten können von Javascript nur ausgelesen werden, wenn es sich um einen Ajax-Request handelt. Header aus einem normalen Seiten-Reload können nicht gelesen werden!
4. Da nur Strings zurückgeliefert werden können, solltet ihr eure Daten serialisieren oder in das JSON Format enkodieren.

Header setzen in PHP

Eigentlich gehört dieses Wissen zu den Basics doch, der Vollständigkeit halber, möchte ich es hier noch mal kurz präsentieren:

// ... somewhere inside the code
header('X-MyDataHeader', 'Data');
header('X-MyDataHeader2', json_encode(array('a' => 1)));

Und das war auch schon die ganze Magie 🙂

Header lesen in Javascript

Natürlich kommt es hier sehr darauf an, welches Framework ihr einsetzt… Ich zeige euch an dieser Stelle, wie es bei jQuery, Mootools und Prototype aussehen kann.

// First: jQuery
$.ajax({
   url:'your-url', 
   complete: function (response) {
      console.log(response.getResponseHeader('X-MyDataHeader'));
      console.log(response.getResponseHeader('X-MyDataHeader2'));
   }
});

// Second: Mootools
var request = new Request({
   url: 'your-url',
   onSuccess: function (responseContent) {
      console.log(this.getHeader('X-MyDataHeader'));
      console.log(this.getHeader('X-MyDataHeader2'));
   }
}).send();

// Third: Prototype
new Ajax.Request('your-url', {
   onComplete: function(response) {
      console.log(response.getHeader('X-MyDataHeader'));
      console.log(response.getHeader('X-MyDataHeader2'));
   }
});

Jedes dieser drei Skripte wird folgendes ausgeben:

Data
{"a":1}

Ich muss ja immer die Header-Keys kennen…

Jain… Natürlich sollten die Header-Keys einem gewissen Schema folgen, doch man muss nicht jeden einzelnen Key kennen wenn mit einem Zähler gearbeitet wird. Man kann nämlich mit einer einfachen Schleife durch die Header iterieren:

// Response function:
function (response) {
   var data,
       i = 1;

   while (data = response.getResponseHeader('X-MyDataHeader' + i)) {
      // Logic for the header-data...
      i++;
   }
}

So… Und damit wäre ich für Heute auch schon wieder fertig 🙂 Ich hoffe ihr könnt mit dieser neuen Technik einiges anfangen und schaut auch nächste Woche wieder rein! Natürlich freue ich mich auch über Kommentare oder Vorschläge für kommende Beiträge.
Bis dahin wünsche ich euch eine angenehme Woche und natürlich Happy Coding!