JSON

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
JSON logo.svg
JSON ("JavaScript Object Notation") definiert ein schlankes Datenformat, in dem Informationen wie Objekte, Arrays und sonstige Variablen in lesbarer Form gespeichert werden können. In den meisten Sprachen gibt es Parser, die den JSON String in eine entsprechende Variable verwandeln.

JSON wird häufig in Verbindung mit AjaX genutzt, um einfach Informationen zwischen Client und Server auszutauschen und ist eine praktische Alternative zu XML.

Methoden:


Datenstruktur und Notation

Beispiel 
{
  "name": "Georg",
  "alter": 47,
  "verheiratet": false,
  "beruf": null,
  "kinder": [
    {
      "name": "Lukas",
      "alter": 19,
      "schulabschluss": "Gymnasium"
    },
    {
      "name": "Lisa",
      "alter": 14,
      "schulabschluss": null
    }
  ]
}

Die Notation von JSON weicht in einigen Punkten von der JavaScript-Syntax ab:

  • Alle Eigenschaftsnamen in einem Objekt müssen in doppelten Anführungszeichen notiert sein.
  • Führende Kommas in Objekten und Arrays sind verboten.
  • Bei Zahlen sind führende Nullen verboten und einem Dezimalpunkt muss mindestens eine Ziffer folgen.
  • Strings müssen durch doppelte Anführungszeichen begrenzt sein. Es darf nur ein beschränktes Set von Zeichen escaped werden. Bestimmte Kontrollzeichen sind ganz verboten. Der Unicode 'Line Separator' (U+2028) und 'Paragraph Separator' (U+2029) sind erlaubt.

Variablen, die mittels JSON gespeichert werden, können verschiedene Typen haben:

  • Null: Mit dem Schlüsselwort null kann einer Variable der Nullwert zugewiesen werden, mit welchem angezeigt werden kann, dass sich kein Wert in der Variable befindet. Dies ist ein Unterschied zum Zahlenwert 0 oder einem leeren String.
  • Boolean: Mittels den Schlüsselwörtern true und false kann der Variable ein boolescher Wert zugewiesen werden.
  • Zahl: Der Variable kann auch ein Zahlenwert zugewiesen werden. Die Zahl muss in einem Format vorliegen, bei dem diese nur aus den Ziffern 0-9 und, falls benötigt, einem – Vorzeichen und/oder einem Punkt besteht. Optional kann die Zahl um einen Exponenten erweitert werden. (Bsp: 1.3e+4)
  • Zeichenkette: Eine Zeichenkette (auch String genannt) wird zwischen zwei doppelten Anführungszeichen notiert.
  • Array: Um ein Array zu deklarieren werden beliebig viele Werte durch Kommas getrennt in eckigen Klammern ( [ ] ) notiert. Für jeden Eintrag im Array kann man einen beliebigen, für JSON zugelassenen Typ verwenden (Null, Boolean, Zahl, Zeichenkette, Array, Objekt).
  • Objekt: Ein Objekt wird in geschweiften Klammern ( {} ) eingeschlossen. Ebenso wie beim Array kann man in einem Objekt beliebig viele Werte speichern. Der Unterschied liegt darin, dass es für jeden Wert einen eindeutigen Schlüssel geben muss, über welchen auf den Wert zugegriffen werden kann. Dieser sollte von doppelten Anführungszeichen umgeben sein. Ein Schlüssel-Werte-Paar wird, durch einen Doppelpunkt getrennt, notiert ("Schlüssel": Wert) und mehrere dieser Paare werden mittels Komma getrennt. Wie beim Array kann der Wert ein beliebiger, für JSON zugelassener Datentyp sein.

Einbindung

PHP

In PHP muss man den JSON-String der Funktion json_decode als Parameter mitgeben. Der Rückgabewert entspricht dem zum JSON passenden Wert. Die Funktion json_encode liefert die JSON-Repräsentation einer (fast) beliebigen Variable.

Siehe auch: PHP/Tutorials/Datenspeicherung

JavaScript

Anders als bei PHP kann man bei JavaScript den JSON-Code direkt in den Programm-Code einbinden (var json = {...}).

Einbinden externer JSON-Dateien

In JavaScript gekapselte JSON-Daten können über das script-Element eingebunden werden:

Beispiel 
<script src="data.js"></script>
<script src="javascript.js"></script>

Das Laden einer externen .json-Datei kann aber auch mit einer asynchronen Operation mit XMLHttpRequest in einer Callbackfunktion erfolgen. So können auch reine Text-Dateien geladen werden:

Callback-Funktion zum Laden externer JSON-Dateien 
function loadJSON(file,callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType('application/json');
  xobj.open('GET', file, true); 
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == '200') {
    // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
     }
  };
  xobj.send(null);  
}

In diesem Beispiel wird eine neue Instanz eines XMLHttpRequests erzeugt, der den Inhalt der in der Variablen file angegebenen Datei (mit Pfadangabe) liest.


Anwendung 
loadJSON('/Users/Documents/workspace/data.json', function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Beim Aufruf der oben beschriebenen Funktion loadJSON() werden Dateiname mit Pfadangabe als Zeichenkette übergeben. Der geladene Inhalt wird mit JSON.parse() dekodiert.

Diese Funktion eignet sich auch zum Laden einer .html oder .txt-Datei, indem der Mime Type Parameter durch "text/html", "text/plain" etc. überschrieben wird.

Objektorientierung und Vererbung in Javascript

Objektklassen

Objektklassen sollten in einzelnen Javascript-Dateien abgespeichert werden und diese werden dann über <script src="myclass.js"></script> eingebunden. In der Praxis führt dies jedoch zu dem Problem, dass der Browser zusätzliche Requests zum Laden der kompletten Webseite benötigt, was die Ladezeit negativ beeinflusst.

Javascript und Codeerzeugung mit Javascript

Objektklassen, die ebenfalls die Vererbung von Klassen ermöglichen, können beispielsweise auch online erzeugt werden. Bei der Namensgebung der Methoden wird das Überschreiben von Methoden durch geeignete Namensgebung unter Berücksichtigung der Klassennamen automatisch generiert. Durch die Wahl der Bezeichnungen sollen Namenskonflikte bei den Methodendefinitionen vermieden werden.

  • Javascript Class Generator ist eine HTML-Datei mit eingebettetem JavaScript-Code zur Codeerzeugung (Lizenz GPL V3)
  • Im Browser können Sie mit "Speichern unter ..." die HTML-Datei mit dem eingebetteten JavaScript-Code für die Code-Erzeugung in ihr lokales Dateisystem kopieren und diese Datei an Ihre Anforderungen anpassen.
  • Das folgende Beispiel zeigt die Definition einer Klasse "MyClass", die von einer Oberklasse "MySuperClass" abgeleitet wurde.
Beispiel 
function MyClass () {
	//--------------------------------------
	//---Super Class------------------------
	this.SuperClass = MySuperClass;
	this.SuperClass();
	//--------------------------------------
	
	//---Attributes-------------------------
	this.attribut1 = 5;
	this.attribut2 = "test";
	this.myArray   = new Array(4);

	//---Methods----------------------------
	this.method1	 = method1_MyClass;
	this.my_method2	 = my_method2_MyClass;

	//--------------------------------------
}

Die Methoden-Definitionen erhalten automatisch eine angehängte Klassenbezeichnung, um Namenskonflikte beim Überschreiben von Methoden (Vererbung) zu vermeiden.

Beispiel 
function method1_MyClass() {
       	
   // ...    	

}

function my_method2_MyClass(pParam1,pParam2) {
   
  // ...  	
}

Der JavaScript Class Generator ist eine einzelne HTML-Datei mit eingebettetem Javascript und dient der Code-Erzeugung für Objektklassen in Javascript. Der Javascript-Code kann nach der Erzeugung aus einer Textarea in eine Javascript-Datei kopiert werden.

Quellen

JSON-Validatoren

JSON-Umwandler

SELF-Forum

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JSON&oldid=99570“