JSON(P): Einleitung

 

JSON

JSON ist ein sehr einfach gehaltenes Datenformat in sehr einfacher Textnotation, das aus der Scriptsprache JavaScript abgeleitet ist.

Genaugenommen ist JSON nichts anderes, als die Definition eines Objektes in JavaScript. JSON ist nicht grundlos die Abkürzung für "Java Script Object Notation"! Daher lassen sich JSON Texte auch sehr einfach in einer Webseite, die JavaScript verarbeiten kann, einbinden.

JSON Beispiel


{
  "testData":[
    {"name":"meyer","credit":false,"limit":0},
    {"name":"smith","credit":true,"limit":10000}
  ]
}

 

ACHTUNG Whitespaces!

Wenn Sie eine JSON URL/Datei erstellen, dann sollte die JSON Datei keine sog. "Whitespaces" enthalten, wie oben in dem Beispiel, welches Zeilenumbrüche und Einrückungen enthält! Andernfalls wird ihre JSON-Datei von vielen JSON-Tools und JSON-Funktionsbibliotheken nicht korrekt erkannt / verarbeitet! Dazu gehört bspw. auch die JSON-Anzeige mit dem Firefox Addon namens 'Firebug'!

JSON-Dateien sollten daher immer OHNE 'Whitespaces' gespeichert werden, wenn die JSON-Dateien durch einen technischen Prozess verwendet werden sollen. Das obige Beispiel sollte also nur mit 1ner Zeile wie folgt gespeichert werden:

JSONP Beispiel

myCustomers({"testData":[{"name":"meyer","credit":false,"limit":0},{"name":"smith","credit":true,"limit":10000}]})

 

JSONP

JSONP (das 'P' steht hier für "Protocol") ist im Gegensatz zu JSON (ohne 'P') die Möglichkeit JSON Daten von einem anderen Server per JavaScript abzufragen. Hierzu muss die JSON Definition zusätzlich noch in einer Funktion - der sog. "CallBack" Funktion - gekapselt werden! (OHNE abschließendes Semikolon!)

JSONP Beispiel

myCustomers(
{
  "testData":[
    {"name":"meyer","credit":false,"limit":0},
    {"name":"smith","credit":true,"limit":10000}
  ]
}
)

 

ACHTUNG Funktionsname!

Bei der Definition des Callback-Funktionsnamens sind die Beschränkungen bzgl. der Namensdefinition in JavaScript zu beachten! Der Name kann aus Buchstaben und Ziffern sowie dem Sonderzeichen "_" zusammengesetzt werden. Ein '-' Zeichen ist nicht im Funktionsnamen erlaubt! Das erste Zeichen darf keine Ziffer sein und JavaScript unterscheidet zwischen Groß- und Kleinschreibung: z.B. "kopf", "Kopf" und "KOPF" sind drei verschiedene Namen. Sofern Sie bei JSONP Punkte im Callback-Funktionsnamen verwenden, bedeutet das, dass die Callback Funktion Bestandteil eines oder auch mehrerer verschachtelter Objekte ist bzw. sein muss!

Der Callback-Funktionsname muss innerhalb aller geladener Javascripts der Webseite eindeutig sein, damit er nicht mit anderen geladenen JavaScript Funktionsnamen kollidiert!

Sofern die JSONP-Datei dynamisch durch einen Application Server erzeugt wird, gilt normalerweise die Regel, dass der aufrufende JSONP Konsument den Funktionsnamen im CGI 'callback' Parameter definiert und dieser dann dynamisch vom erzeugenden Application Server in der JSONP Datei eingetragen wird.

Bei statischen JSONP-Dateien ist dies jedoch nicht möglich. In solchen Fällen sollte der Anbieter einer JSONP Url/Datei darauf achten, dass der Callback-Funktionsnamen eindeutig ist, bspw. in dem er seine eigene Domain in umgekehrter Reihenfolge für die Benamung verwendet und um einen eigenen eindeutigen Zusatz erweitert.

Beispiel

JSONP-Url:   http://www.inter-net.de/service/json/test.json?callback=de.inter_net.jsonp.simple.test
JSONP-Datei: de.inter_net.jsonp.simple.test(...)

Da '-' im Funktionsnamen nicht erlaubt sind, wurde alternativ ein '_' verwendet, um den Domainnamen nachzubilden.

 

Same / Foreign Origin Policy

In der ursprünglichen Sicherheitsarchitektur von JavaScript sollte das Nachladen von Code - und bei einer Funktions- und Objektdefinition handelt es sich um Code - von einem anderen Server eigentlich nicht erlaubt sein (Prinzip: 'same origin policy') aber durch einen Trick, lässt sich JavaScript eben doch von fremden Servern nachladen. (= foreign origin)

Der Trick besteht darin, der Webseite bzw. der daraus resultierenden DOM Struktur nachträglich durch eine JavaScript Anweisung ein weiteres <script> Tag hinzuzufügen, welches dann den JavaScript Code von dem fremden Server nachlädt und anschließend automatisch in einer sog. "CallBack" Funktion ausführt und dort den nachgeladenen Code integriert. Genau dies geschieht bei der Verwendung von JSONP!

JSONP muss daher immer dann verwendet werden, wenn per JavaScript die JSON-Daten von einem anderen (Application) Server geladen werden sollen, sprich sich der Domainname oder die Portadresse zu dem Server unterscheiden, von dem die ursprüngliche Webseite geliefert wurde. Dies gilt bspw. auch, wenn sich nur die Subdomains unterhalb der 2nd-Level Domain unterscheiden!

 

MIME-TYPE!

Sie sollten darauf achten, dass die JSON/JSONP-Datei von ihrem Webserver mit dem folgenden MimeTypes ausgeliefert wird!

  • JSON: 'application/json'
  • JSONP: 'application/javascript'

Es muss bei der Definition des Mime Types unbedingt darauf geachtet werden, ob es sich um JSON oder um JSONP handelt! Liefert der Webserver für eine JSONP Datei fälschlicherweise den Mime Type 'application/json', dann funktioniert die Verarbeitung in versch. Webbrowsern nicht korrekt, bspw. Google Chrome!

Nochmal zur Wiederholung: Bei JSON handelt es sich um eine Datendatei, bei JSONP handelt es sich um ein JavaScript, in welchem eine Funktion (= Call Back Funktion) definiert ist, welche einen String mit einer JSON Definition zurückliefert! Dies muss auch in der Definition des Mime Types beachtet werden!

Des weiteren kann man auch noch den Zeichensatz in dem Mime Type mit angeben, bspw. 'text/javascript;charset=UTF-8'. Natürlich sollte die JSON/JSONP Datei dann aber auch wirklich mit diesem Zeichensatz erstellt und gespeichert worden sein.

 

Fazit

Der Vorteil von JSONP liegt ua. in der Möglichkeit der physischen und logischen Trennung von Darstellung und Inhalt bzgl. dem Aufbau einer Webseite! Die rein statischen Webseitendateien zur Darstellung (bspw. html, css, js Dateien) und die inhaltlichen Daten können mit JSONP nicht nur grundsätzlich getrennt werden (logische Trennung), sondern sogar auf unterschiedlichen Servern liegen (physische Trennung).

Da es sich bei JSON um eine sehr einfach gehaltene Textdefinition handelt, lässt sich JSON in so gut wie jeder Programmiersprache und Technik integrieren. Allein auf der Webseite json.org finden sich ca. 150 JSON Bibliotheken zu ca. 50 versch. Programmiersprachen! Auf der Seite der Clients ist somit eine Anbindung bspw. von Smartphones und 'Apps' problemlos möglich und auf der Serverseite können sowohl statische, als auch dynamisch erzeugte JSON Daten verwendet werden.

Desweiteren verzichtet JSON im Gegensatz zu XML/XSD auf den massiven Overhead bzgl. Validierungen und Formatdefinitionen. JSON ist somit schlang und schnell!

Und zu guter Letzt ist JSON/JSONP ein Bestandteil von JavaScript und somit ideal für moderne, dynamische Webseiten, insbesonders im Hinblick auf HTML5! Die Webseite wird mit JSON/JSONP, im Gegensatz bspw. zu "Java Server Faces" (JSF), nicht von einem Application Server komplett erzeugt (Funktionen, Daten und Optik), sondern der Application Server liefert "nur" noch die Funktionen und Daten in Form von JSONP und ein anderer Webserver (bspw. Apache) liefert die statischen Dateien für die Optik (html/css/js Dateien) und der Webclient (Browser) setzt dann die Daten und die Optik mit Hilfe von JavaScript zusammen.


Weitere Artikel:


Links: