JSON

Javascript Object Notation

JSON ist keine "neue" Technologie sondern ein kleines Detail der Standard Javascript Syntax:
Bei geschickter Anwendung ist JSON eine gute Methode, um sehr flexible interaktive Webseiten zu erzeugen. 		JSON-formulierte Daten können zwischen vielen verschiedenen Programmen ausgetauscht werden.
JSON wird gerne zusammen mit AJAX verwendet.
Javascript ECMAScript für HTML und XML ( Ajax, Array, Objekt)
JSON Was ist JSON, wozu wird JSON verwendet ?
JSON-Array (Empfangene) Daten in ein Array eintragen
JSON-Objekt Einem Objekt Eigenschaften und Methoden zuweisen
Alternative split Trennung von beliebig formatierten Listen mit split
Links Ausgewählte Links zum Thema JSON

JSON
Javascript Object Notation (JSON) ist eine Syntax-(Grammatik)-Variante, um in Javascript Arrays oder Objekte zu erzeugen.
In allen Programmiersprachen gibt es Syntax-Varianten, d.h. mehrere Möglichkeiten zur alternativen Formulierung bestimmter Anweisungen im Quelltext der jeweiligen Programmiersprache. 		Die JSON-Variante von Javascript wurde lange Zeit hindurch fast nie verwendet und war deswegen weitgehend unbekannt.
Erst seit der raschen Ausbreitung von "Web2"-Anwendungen wird JSON zusammen mit Ajax häufig eingesetzt.
Moderne interaktive Internet-Anwendungen gewinnen viel an Flexibilität, indem die verwendeten Webseiten nur mit einer intelligenten 'Grundausrüstung' ausgestattet werden.

● Die AnwenderInnen bestimmen selbst, welche Daten und Objekte sie brauchen: Genau diese werden vom Server mit Hilfe von Ajax (Asynchronous Javascript and XML) nachträglich gesendet.

● Die Übertragung angeforderter Daten und Objekte kann beliebig oft wiederholt werden. Auf diese Weise können die Webseiten rasch laden und verfügen dennoch über außerordentlich große Reserven.

● Die übertragenen Daten-Mengen sind vergleichsweise gering. Zumindest in lokalen Netzwerken ist die Belastung vernachlässigbar. Nachgesendete Objekte sind typisch in <100ms verfügbar.
Über das Internet kann man je nach Verbindung mit <1s rechnen. 		● Der Schlüssel zu dieser Technologie ist die Umwandlung von Javascript-Quelltext in Anweisungen und die sofortige Ausführung dieser Befehle auf der Webseite.
● Über das Internet wird nur (Javascript)-Quelltext gesendet. Dieser wird von kleinen Javascript-Programmen der empfangenden Webseite in Anweisungen (Daten, Objekte) umgewandelt ("interpretiert") und sofort ausgeführt.
● Zur sichtbaren Umsetzung auf der Webseite werden DOM-Methoden eingesetzt.
● Größere Programme (z.B. eine komplette Textverarbeitung) sind nur mehr zentral am Server vorrätig. Die Clients erhalten jeweils nur die gerade benötigten Teile dieser Programme.
Damit gewinnt man interessante Vorteile:
• Web2-Programme laufen ohne Installation auf jedem PC, unabhängig vom Betriebssystem. Die Programme brauchen nicht installiert werden.
• Javascript erhöht die Sicherheit gegen Viren. Nicht installierte Programme können auch nicht infiziert werden.
• Das zentrale Verwaltung spart viel Arbeit: Neue Programme, zusätzliche Module oder neue Versionen werden nur an einer einzigen Stelle installiert und sind sofort für alle PC im Netzwerk verfügbar.

JSON-Array
JSON-Technik ermöglicht es, Texte besonders einfach in Arrays und Objekte umzuwandeln. Ein eigener Name dafür ist zwar kaum angebracht, hat sich aber mittlerweile etabliert. JSON wird meist eingesetzt, um nach einer Ajax-Anforderung die vom Server eintreffenden Text-Daten mit Javascript in Arrays und Objekte umzwandeln.

Daten-Liste → Array

Das Beispiel rechts zeigt drei äquivalente Möglichkeiten, um ein Javascript Array mit Elementen gemischter Typen (Text und Zahlen) zu definieren.
Die letzte Variante wird für die Verarbeitung von JSON-formatierten Daten verwendet.
♦ Details zu Javascript-Arrays und zur Anweisung eval
Standard-Syntax:
var ar = new Array(12,"Anna",34);
JSON-Syntax:
var ar = [12,"Anna",34];
Ajax+JSON:
var atxt = "12,'Anna'",34";
var ar = eval("["+atxt+"]");
Ajax+JSON Sender (Server)
Ein Ajax-Server übersendet im einfachsten Fall eine statische Text-Datei (z.B. rechts ajax_server.txt). Normalerweise werden die gesendeten Daten jedoch von Programmen (z.B. rechts ajax_server.php) erzeugt.

JSON-Daten sind als Listen von Elementen formuliert. Die einzelnen Elemente werden mit , Beistrich getrennt, Texte in einfache '' oder doppelte "" Anführungszeichen (quotes) gesetzt.
Text-Datei ajax_server.txt
"Eva",98,"Franz",76,"Gabi"

PHP Script-Programm ajax_server.php
print "'Eva',98,\"Franz\",76,'Gabi'";

Ajax+JSON Decodierung:

• Der eintreffende JSON-formulierte Text wird zunächst an eine Variable (atxt) überwiesen.
• Anschließend werden die von der Javascript-Syntax verlangten [] Klammern ergänzt.
• Danach wird der Text mit einer eval-Anweisung interpretiert.
• Beide gezeigten Varianten sind äquivalent. Sie erzeugen das Array ar mit jeweils 3 Elementen.
Verarbeitung eintreffender JSON-Texte zu einem Array:
var atxt = ajax_obj.responseText;
atext = "["+atxt+"]";
var ar = eval(atxt);
Alternative:
var atxt = ajax_obj.responseText;
atext = "var ar = ["+atxt+"];";
eval(atxt);
eval ist ein Javascript Mini-Intrepreter:
Das Argument (hier der Text atxt ) wird als Javascript-Anweisung ausgeführt. Das Ergebnis - im Falle von JSON-Daten ein Array - wird an die Variable (hier ar) zugewiesen. 		♦ Details und Beispiele zu eval

Verarbeitung

JSON betrifft nur die Formulierung des (meist mit Ajax) transportierten Textes.
Was mit den erzeugten Array-Daten geschieht, ist eine Angelegenheit des jeweiligen Anwendungs-Programms.

JSON-Objekt

Objekt in Standard-Syntax

Das Beispiel rechts zeigt ein Objekt col mit den 3 Eigenschaften rr,gg,bb und der Methode rgb(), die einen Text liefert (Standard CSS-String einer Farbe).

Zur Anwendung wird ein Objekt gelb der Klasse col erzeugt und sein CSS Farbtext angezeigt.

♦ Details zu Javascript-Objekten und zu RGB-Farben 		Variante in Standard-Syntax:
function col(r,g,b) {
this.rr = r;
this.gg = g;
this.bb = b;
this.rgb = function() {
var t="rgb("+this.rr+",";
t+=this.gg+","+this.bb+")";
return t;
}
}
■ Anwendung:
var gelb = new col(255,255,0);
alert(gelb.rgb());
ergibt die Ausgabe
rgb(255,255,0)

Objekt in JSON-Syntax

Rechts das gleiche Beispiel wie oben, jedoch in JSON-Syntax.
In geschwungenen {} werden hintereinander alle Eigenschaften und Methoden angeführt, als Trennzeichen dienen , Beistriche.
● JSON-Syntax für Eigenschaften:
Name:"Wert"
● JSON-Syntax für Methoden:
Name:function() {...}

• JSON-Texte werden normalerweise mit Ajax über das Internet empfangen und mit eval in Objekte umgewandelt (nächster Absatz). In diesem Fall ist es praktisch, dass solche Objekte alle ihre Eigenschaften und Methoden mitbringen.
• JSON-Objekte haben keinen Klassen-Namen und brauchen nicht mit Anweisung new erzeugt werden. Diesen Objekten werden normalerweise keine Eigenschaften zugewiesen, weil diese bereits in der Definition enthalten sind.
• Es ist nicht möglich, weitere Objekte der gleichen Klassen zu erzeugen. Wenn ein neues Objekt gebraucht wird, dann fordert man es vom Ajax-Server an.
Das gleiche Beispiel in JSON-Syntax
var gelb = {r:255, g:255, b:0,
rgb:function() { return "rgb(" + this.r +
"," + this.g + "," + this.b + ")"; }
};
■ Anwendung:
alert( gelb.rgb() );
Ajax + JSON
Das Beispiel rechts zeigt den Vorgang bei der typischen gemeinsamen Anwendung von Ajax und JSON.
• Javascript fordert von einem Ajax-Server ein Objekt an (wird hier nicht gezeigt)
• Der Ajax-Server sendet den Objekt-Quelltext in JSON-Syntax.
• Javascript empfängt den Text und weist ihn einer Variablen (atxt) zu.
• Die {} der JSON-Syntax werden ergänzt.
• Der Text wird mit eval interpretiert: Dabei wird der Text in eine Javascript-Anweisung umgewandelt und diese sofort ausgeführt.
• Damit wird ein Objekt magenta erzeugt, genau äquivalent zum Objekt gelb im vorigen Beispiel, lediglich mit anderen Daten (einer anderen Farbe).

♦ Details und Live-Demo von Ajax 		Der Ajax-Server sendet diesen Text:
r:255, g:0, b:255,
rgb:function() { return
"rgb(" + this.r + "," + this.g +
"," + this.b + ")";}
Javascript empfängt den Text und weist ihn einer Variablen zu:
atxt = ajax_obj.responseText;
Der Text wird mit eval interpretiert:
atxt = "magenta={"+atxt+"};";
eval(atxt);
■ Anwendung:
alert( magenta.rgb() );

Alternative mit split

Ajax - Sender (Server)

JSON-Formatierung ist nur ein gut genutztes Detail der Javascript Syntax.
• Das Beispiel zeigt, wie JSON durch Formatierung einer Liste mit einem beliebigen Trennzeichen ersetzt werden kann.
• Als Trennzeichen gut verwendbar sind u.a. ; Strichpunkt oder \n Zeilen-Umbruch. Die Trennzeichen dürfen im Text der Elemente allerdings nicht vorkommen.
• In diesem Fall kann man sogar auf Anführungszeichen für Text-Variable verzichten.
Text-Datei demob.txt
Bert;123;Christa;234;Dieter

PHP-Programm demob.php
print "Bert;123;Christa;234;Dieter";

Ajax-Decodierung:

Nach einer Ajax-Anforderung trifft bei Javascript ein Text ein.
Der Text wird an eine Variable (btxt) übergeben.
Mit Funktion split wird der Text an den Trennzeichen aufgespalten.
Die Daten sind danach als Elemente von Array br verfügbar.
Die abgeschaltete letzte Zeile zeigt als Alternative die Aufspaltung mit Zeilen-Umbruch \n als Trennzeichen. 		Verarbeitung eintreffender Texte zu einem Array:
var btxt = ajax_obj.responseText;
var br = btxt.split(";");
// br = btxt.split("\n");
Die Standard-Funktion split trennt Texte nach den angegebenen Trennzeichen in Array-Elemente. Sie ist in allen modernen Programmiersprachen verfügbar. ♦ Details zum Thema Array & String (split & join) in Javascript, Perl, PHP

Ausgewählte Links zum Thema 'JSON'

JSON - Detaillierte Syntax, JSON-Links  

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript