Kurzeinführung JSON

Übersicht:

Was ist JSON?

JSON bedeutet JavaScript Object Notation und ist ein Format um Daten auszutauschen. Da dieses Strukturen nutzt, die von gängigen Programmiersprachen unterstützt werden, eignet es sich hervorragend als Austauschformat zwischen unterschiedlichen Programmiersprachen. Vermutlich jeder, der schon mal Daten aus einem JS-Code an einen PHP-Code senden wollte, hat JSON verwendet. Wer dies vor hat sollte sich JSON genauer anschauen!

Wofür?

JSON wird häufig verwendet um Daten vom Server an den Browser zu übertragen, da Javascript relativ einfach damit umgehen kann. Andererseits kann man es auch umgekehrt nutzen um z.B. Daten vom Browser an den Server zu senden, vor allem nach einem AJAX-Request.

Wie funktioniert JSON?

Im Grunde ist JSON lediglich ein Textformat, welches bestimmten Regeln folgt. Es baut auf zwei Strukturen auf: Schlüssel-Wert-Paare(z.B. Objekte) und geordnete Listen von Werten(z.B. Arrays). Folgende Datentypen werden von JSON unterstützt:

Objekte
{Schlüssel:Wert, Schlüssel2:Wert2}
Arrays
[Wert, Wert2]
Zeichenketten
Stehen in Anführungszeichen und unterstützen außerdem Escape-Sequenzen "\tHalloWelt!"
Zahlen
1,2,3,4
boolsche Werte
true oder false

Ein Beispiel für einen JSON-Code:

{ "key":"Zeichenkette",
"obj":{"ObjKey":"ObjWert"},
"array":[Element1, Element2],
"boolean":true,
"zahl":1
 }

Dieser JSON-Code müsste nun nur noch kodiert werden und könnte dann ausgetauscht werden. Nachfolgend zwei Beispiele wie ich mit JSON arbeite.

JSON und JavaScript

Für JavaScript gibt es diverse JSON-Parser und auch Frameworks unterstützen die Arbeit mit dem Austauschformat. Heute liefert Javascript von Hause aus die Funktionen JSON.parse(einlesen eines JSON-Code) und JSON.stringify(kodieren eines JSON-Code) mit. Als Beispiel nehmen wir folgenden Code:

// Normales JS-Objekt erstellen
var jsObj = {
"text":"Hallo Welt! Ein erster Text.",
"obst_array":["birnen", "kirschen"],
"json_code":true,
 };

Diese Objekt kann man natürlich nicht als GET-Parameter weiterschicken, oder mit PHP austauschen. Dafür muss man den JSON-Code erstmal kodieren. Dafür gibt es die Funktion JSON.stringify();:

// Das Objekt zu JSON kodieren
var jsonCode = JSON.stringify(jsObj);
document.write(jsonCode);

Erhält man solch einen JSON-Text, kann man diesen mit der Funktion JSON.parse(); wieder in ein JS-Objekt umwandeln:

// Den JSON-Code zum JS-Objekt umwandeln
var jsonObj = JSON.parse(jsonCode);
document.write(jsonObj.text);

Zum ausprobieren hier nochmal der ganze Quelltext:

// Normales JS-Objekt erstellen
var jsObj = { "text":"Hallo Welt! Ein erster Text.",
"obst_array":["birnen", "kirschen"],
"json_code":true,
 };

// Das Objekt zu JSON kodieren
var jsonCode = JSON.stringify(jsObj);
document.write(jsonCode + '<br />');

// Den JSON-Code zum JS-Objekt umwandeln
var jsonObj = JSON.parse(jsonCode);
document.write(jsonObj.text);

Solche Funktionen existieren natürlich auch in anderen Programmiersprachen. An dieser Stelle betrachten wir PHP etwas genauer.

JSON und PHP

Auch PHP stellt zwei Funktionen bereit, mit denen entweder JSON-Code in ein Objekt/Array, oder ein Objekt/Array zu einem JSON-Code umgewandelt werden kann. Mit der Funktion json_encode(); lässt sich ein PHP-Objekt konvertieren und mit json_decode(); wird das ganze wieder PHP. Nachfolgend obiges Beispiel als PHP-Variante:

<?php
// Anonymes PHP-Objekt erstellen
$obj = new stdClass();
$obj->text = 'Hallo Welt! Ein erster Text.';
$obj->obst_array = array('birnen', 'kirschen');
$obj->json_code = true;

// Objekt umwandeln
$output = json_encode($obj);
echo($output);
?>

Wenn man nun das erstellte JSON umwandeln möchte, bietet json_decode(); zwei Möglichkeiten der Rückgabe. Einerseits ist es möglich ein Objekt zu erhalten, andererseits kann auch ein assoziatives Array zurückgegeben werden:

<?php
// JSON umwandeln
$output = json_decode($output); # als Objekt zurückgeben
$output = json_decode($output, true); # als assoziatives Array
print_r($output);
?>

Obiges Beispiel als Objekt:

stdClass Object ( [text] => Hallo Welt! Ein erster Text.
[obst_array] => Array ( [0] => birnen [1] => kirschen )
[json_code] => 1
)

Und als assoziatives Array sieht es so aus:

Array ( [text] => Hallo Welt! Ein erster Text.
[obst_array] => Array ( [0] => birnen [1] => kirschen )
[json_code] => 1
)

Zusammenfassung

Wie man sieht ist das arbeiten mit JSON unglaublich einfach und schnell. Wer Daten per AJAX-Request an einen Server senden will und andersherum, wird JSON nicht mehr missen wollen.

Tags: