JSON verstehen

JSON (JavaScript Object Notation, die ich "Jason" ausspreche und Sie können sagen, wie Sie möchten) ist ein textbasiertes Datenformat, das für Menschen lesbar, leichtgewichtig und einfach zwischen einem Server und einem Webclient zu übertragen ist. Die Syntax wird von JavaScript abgeleitet - daher auch der Name -, kann jedoch in den meisten Sprachen verwendet werden, einschließlich AS3 und C #..


Arrays

Wenn Sie viel programmiert haben, sind Sie bereits auf Arrays gestoßen: Sammlungen von Elementen, die jeweils einer bestimmten Ganzzahl zugeordnet sind.

In JSON würde ein Array der ersten sechs Buchstaben des Alphabets folgendermaßen dargestellt:

 ["a", "b", "c", "d", "e", "f"]

Für AS3- und JavaScript-Codierer ist die obige Auflistung sehr bekannt. Es ist ähnlich wie bei der C # - Methode, ein Array zu definieren.

Wie Sie sich vermutlich vorstellen können, steht in den eckigen Klammern "this is a array", und die Kommas werden verwendet, um verschiedene Elemente zu trennen (beachten Sie, dass nach dem letzten Element kein Komma steht). Angenommen, die Sprache, in der Sie analysieren, verwendet JSON nullbasierte Arrays (und wie viele Sprachen) nicht, in diesen Tagen?), Element 0 wird "a" sein, 1 wird "b" sein, 2 wird "c" sein und so weiter.

Um das Lesen von Arrays zu erleichtern, schreiben wir sie oft mit zusätzlichen Zeilenumbrüchen und Einrückungen:

 ["a", "b", "c", "d", "e", "f"]

Beachten Sie, dass nach dem abschließenden Element immer noch kein Komma erscheint, daher sieht es jetzt etwas seltsam aus.

Wir müssen keine Strings als Elemente eines JSON-Arrays verwenden. Wir können auch Zahlen verwenden, wahr, falsch, und Null. Es gibt keine strikte Typisierung, dh Sie können die Wertetypen, die Sie in einem bestimmten Array verwenden, mischen. Dies ist zum Beispiel vollkommen gültig:

 ["apple", 3, 912, null, -7.2222202, "#", true, false]

Beachten Sie, dass Sie doppelte Anführungszeichen verwenden müssen (") um alle deine Saiten zu umgeben; Einzelzitate (') sind nicht erlaubt. Ja, dies ist der Fall, auch wenn Sie in JavaScript die Möglichkeit haben, Strings in beide Anführungszeichen einzuschließen. Wenn Sie in JSON-Strings doppelte Anführungszeichen verwenden möchten, verwenden Sie \ " stattdessen.


Objekte

Ein Array ist eine Sammlung von Elementen, bei denen jedes einer bestimmten Ganzzahl zugewiesen ist. Ein Objekt ist eine Sammlung von Elementen, von denen jedes einem bestimmten Objekt zugewiesen ist Schnur. Die Elemente werden aufgerufen Werte, und die zur Identifizierung verwendeten Zeichenfolgen werden aufgerufen Schlüssel. Einige Programmiersprachen nennen diese Art von Datenstruktur a Hash-tabelle oder Hash-Karte.

Wir könnten das Alter der Menschen in einem Objekt so darstellen:

 "Alan": 44, "John": 58, "Brian": 19, "Eliza": 4, "Jessie": 58

Geschweifte Klammern sagen: "Dies ist ein Objekt", und wie bei Arrays trennen Kommas verschiedene Elemente. Die Elemente sind jedoch in angegeben Paare, diesmal. Es ist einfacher zu sehen, ob wir neue Zeilenumbrüche und Einrückungen hinzufügen:

 "Alan": 44, "John": 58, "Brian": 19, "Eliza": 4, "Jessie": 58

In jedem Paar trennt ein Doppelpunkt den Schlüssel (der eine Zeichenfolge ist) vom Wert (der in diesem Fall eine Zahl ist). Bei der Erstellung eines Arrays mussten wir nicht angeben, welcher Ganzzahl jedes Element zugewiesen wurde (dh wir mussten nur die Werte und nicht die Schlüssel angeben), da sie in der Reihenfolge zugewiesen wurden, in der sie geschrieben wurden das Array.

Anstatt das zweite oder fünfte Element wie beim Zugriff auf ein Array anzufordern, werden Sie bei einem Objekt das Element "Alan" oder "Eliza" angefordert.

Um die Verwirrung zu erhöhen, können Sie mit Objekten auch Strings als Werte verwenden - nicht nur die Schlüssel. So könnten Sie ein Objekt wie dieses haben:

 "Activetuts +": "http://active.tutsplus.com/", "Psdtuts +": "http://psd.tutsplus.com/", "Nettuts +": "http://net.tutsplus.com/ "," Aetuts + ":" http://ae.tutsplus.com/ "," Vectortuts + ":" http://vector.tutsplus.com/ "," Audiotuts + ":" http://audio.tutsplus.com / "," Cgtuts + ":" http://cg.tutsplus.com/ "," Phototuts + ":" http://photo.tutsplus.com/ "," Webdesigntuts + ":" http: //webdesign.tutsplus. com / "," Mobiletuts + ":" http://mobile.tutsplus.com/ "

Auf diese Weise können Sie die URL für eine bestimmte Tuts + -Site abrufen, indem Sie den Namen der Site als Schlüssel verwenden. Die Umkehrung stimmt jedoch nicht - Sie können "http://cg.tutsplus.com/" nicht verwenden, um "Cgtuts +" abzurufen..

Für Objekte gelten dieselben Regeln wie für Arrays. Objekte können auch Strings und Zahlen verwenden, wahr, falsch, und Null als Werte (aber nur Strings als Schlüssel).


Verschachtelung

Objekte und Arrays können auch andere Objekte und Arrays speichern. Dadurch können wir verschachtelte Datenstrukturen erstellen. zum Beispiel:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url ":" http: //ae.tutsplus.com/ "," hasPremium ": true," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," Audiotuts + ": "url": "http://audio.tutsplus.com/", "hasPremium": true, "Cgtuts +": "url": "http://cg.tutsplus.com/", "hasPremium" : true, "Phototuts +": "url": "http://photo.tutsplus.com/", "hasPremium": true, "Webdesigntuts +": "url": "http: //webdesign.tutsplus .com / "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false

Lassen Sie uns das mit etwas mehr Leerzeichen sehen:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "Psdtuts +": "url": "http://psd.tutsplus.com/ "," hasPremium ": true," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," Aetuts + ": " url ":" http: //ae.tutsplus.com/ "," hasPremium ": true," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ": true," Audiotuts + ": "url": "http://audio.tutsplus.com/", "hasPremium": true, "Cgtuts +": "url": "http://cg.tutsplus.com/", "hasPremium" : true, "Phototuts +": "url": "http://photo.tutsplus.com/", "hasPremium": true, "Webdesigntuts +": "url": "http: //webdesign.tutsplus .com / "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false

Jedes Objekt enthält zwei Felder: eines mit dem Schlüssel "URL" deren Wert eine Zeichenfolge ist, die die URL der Site enthält, und eine mit dem Schlüssel hasPremium deren Wert ein boolescher Wert ist, gilt, wenn die Site über einen Premium-Abschnitt verfügt.

Wir sind jedoch nicht darauf beschränkt, dieselbe Struktur für jedes Objekt in der JSON zu haben. Wir könnten beispielsweise eine zusätzliche URL hinzufügen, die auf die Premium-Programm-URL verweist, jedoch nur für Websites, die über eine solche verfügen:

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/active-Premium/ "," Psdtuts + ": " url ":" http://psd.tutsplus.com/ "," hasPremium ": wahr," premiumUrl ":" http://tutsplus.com/Premium-program/psd- Premium / "," Nettuts + ": " url ":" http://net.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http://tutsplus.com/Premium-program/ net-Premium / "," Aetuts + ": " url ":" http://ae.tutsplus.com/ "," hasPremium ": wahr," premiumUrl ":" http://tutsplus.com/Premium- Programm / ae-Premium / "," Vectortuts + ": " url ":" http://vector.tutsplus.com/ "," hasPremium ":" true "," premiumUrl ":" http://tutsplus.com/ Premium-Programm / vector-Premium / "," Audiotuts + ": " url ":" http://audio.tutsplus.com/ "," hasPremium ": true," premiumUrl ":" http: // tutsplus. de / Premium-Programm / audio-Premium / "," Cgtuts + ": " url ":" http://cg.tutsplus.com/ "," hasPremium ":" true "," premiumUrl ":" http: // tutsplus.com/Premium-program/cg-Premium/ "," Phototuts + ": " url " : "http://photo.tutsplus.com/", "hasPremium": "true", "premiumUrl": "http://tutsplus.com/Premium-program/photo-Premium/", "Webdesigntuts +": " url ":" http://webdesign.tutsplus.com/ "," hasPremium ": false," Mobiletuts + ": " url ":" http://mobile.tutsplus.com/ "," hasPremium ": false 

Wir könnten sogar eine Reihe der neuesten Premium-Tutorials für eine bestimmte Site einbinden (ich werde Activetuts + hier nur zeigen und auf einige Prämien beschränken, um Platz zu sparen):

 "Activetuts +": "url": "http://active.tutsplus.com/", "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-program/active-Premium/ "" PreviousPremiums ": [" http://tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using- as3http: //tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/obscuring-and-revealing-scenes-mit-as3http://tutsplus.com/join/ "," http://active.tutsplus.com/tutorials/games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/ "," http://tutsplus.com/join / "], / ** SNIP! ** / "Mobiletuts +": "url": "http://mobile.tutsplus.com/", "hasPremium": false

Ein Array ist für die Auflistung der Prämien sinnvoll, da ich davon aus gehe, dass jede App, die diese Daten tatsächlich liest, nur eine Liste von Premium-Tutorials anzeigt, anstatt sie nach ihrem Namen aufrufen zu müssen Sie müssen ihnen nicht jeweils einen String-Schlüssel zuweisen.

Wir könnten das noch weiter gehen:

 "Activetuts +": "url": "http://active.tutsplus.com/", "premium": "hasPremium": true, "premiumUrl": "http://tutsplus.com/Premium-programm / active-Premium / "," previousPremiums ": [" title ":" Erstellen Sie eine anpassbare Flash-Quizanwendung "," url ":" http://tutsplus.com/join/ ",, " title ": "Erstellen eines Space Shooter-Spiels in Flash mit AS3", "url": "http://active.tutsplus.com/tutorials/games/create-a-space-shooter-game-in-flash-using-as3http:/ /tutsplus.com/join/ ",, " title ":" Szenen mit AS3 verdecken und enthüllen "," url ":" http://active.tutsplus.com/tutorials/games/obscuring-and-revealing- scenes-with-as3http: //tutsplus.com/join/ ",, " title ":" Dynamische Shadow Casting-Engine in AS3 erstellen "," url ":" http://active.tutsplus.com/tutorials /games/building-a-dynamic-shadow-casting-engine-in-as3http://tutsplus.com/join/ ",, " title ":" Animieren des Envato-Community-Podcasts "," url ":" http : //tutsplus.com/join/ "], / ** SNIP! ** / "Mobiletuts +": "url": "http://mobile.tutsplus.com/", "premium": "hasPremium": false

Puh! Wenn wir wollten, könnten wir Objekte erstellen, die die Namen und Profil-URLs der einzelnen Autoren der Premium-Tutorials enthalten. Können Sie den besten Weg finden, dies zu tun??

Arrays innerhalb von Arrays zu behalten, kann ebenfalls nützlich sein. besonders für das Spielen. Dies könnte das aktuelle Layout eines Tic-Tac-Toe-Boards sein:

 [[1, 2, 0], [0, 1, 0] [0, 2, 1]]

Es nicht sehen? Versuchen Sie, einige Leerzeichen zu entfernen:

 [[1,2,0], [0,1,0], [0,2,1]]

1 ist ein Nichts, 2 ist ein Kreuz und 0 ist ein leerer Raum. Nullen gewinnen! Und ich bin mir sicher, dass Sie sehen können, wie etwas Ähnliches für Schlachtschiffe oder Connect 4 oder Minesweeper verwendet werden könnte. Weitere Informationen zu verschachtelten Arrays finden Sie in meinem vorherigen Tutorial.


Verwendung von JSON mit verschiedenen Plattformen

Da JSON so beliebt ist, gibt es das Parser (Werkzeuge und Bibliotheken, die eine Programmiersprache dekodieren, damit eine andere sie verstehen kann) und Generatoren (Tools und Bibliotheken, die das Gegenteil tun; eine Programmiersprache in eine andere codieren), die für die meisten Programmiersprachen verfügbar ist. Einfach suchen [JSON-Parser (Name Ihrer Sprache)]. Ich möchte einige hervorheben, die für Activetuts + -Leser relevant sind.


Für Flash und AS3

Die Standardbibliothek zum Kodieren und Dekodieren von JSON-Daten in AS3 ist die as3corelib. Weitere Informationen finden Sie in meinem Handbuch zur Verwendung externer Bibliotheken, wenn Sie nicht sicher sind, wie Sie es installieren.

Sie können einen JSON-formatierten String in AS3-Objekte und Arrays dekodieren, indem Sie ihn an übergeben com.adobe.serialization.json.JSON.decode (); Je nach JSON ist der Rückgabewert entweder ein Array oder ein Objekt. Wenn du bestanden hast falsch Als zweites Argument folgt der Decoder nicht so streng dem JSON-Standard, sodass Sie mit der Sloppier-Formatierung zurechtkommen.

Sie können ein AS3-Objekt oder -Array (das verschachtelte Objekte und Arrays enthalten kann) zu einem JSON-String kodieren, indem Sie es an übergeben com.adobe.serialization.json.JSON.encode (); Der Rückgabewert ist ein String.

Es wurde angekündigt, dass zukünftige Versionen von Flash natives JSON-Parsing enthalten werden, so dass bald keine Notwendigkeit besteht, die as3corelib für diesen Zweck zu verwenden.


Für .NET (einschließlich Silverlight)

Um JSON zu analysieren, fügen Sie einfach einen Verweis auf hinzu System.Json. Dann:

 # using System.Json; decodiert = JsonValue.Parse (JsonString); // kann ein JsonPrimitive, JsonArray oder JsonObject sein, abhängig von der übergebenen JSON

Ein Objekt in eine JSON-Zeichenfolge zu kodieren ist etwas komplizierter. Sie müssen zuerst einen Datenvertrag für den zu verschlüsselnden Objekttyp erstellen. Lass uns unsere nennen Ding, und das eigentliche Objekt meine Sache. Dann:

 # using System.Runtime.Serialization.Json; MemoryStream myStream = new MemoryStream (); DataContractJsonSerializer jsonEncoder = new DataContractJsonSerializer (typeof (Thing)); jsonEncoder.WriteObject (myStream, myThing); myStream.Position = 0; StreamReader sr = neuer StreamReader (myStream); encoded = sr.ReadToEnd ();

Sie können diese Methode auch verwenden, um eine JSON-Zeichenfolge in eine bestimmte Objektklasse zu dekodieren:

 # using System.Runtime.Serialization.Json; myStream.Position = 0; myOtherThing = ser.ReadObject (myStream); // Du solltest das als Thing wirken

Weitere Informationen finden Sie auf den MSDN-Seiten Arbeiten mit JSON-Daten und Gewusst wie: Serialisieren und Deserialisieren von JSON-Daten.


Für JavaScript (und damit HTML 5-Apps)

Sie könnte Übergeben Sie einfach den JSON-String an eval () in JavaScript, aber dies ist ein schreckliches Sicherheitsrisiko. Die meisten modernen Browser unterstützen eine Funktion JSON.parse (), die einen JSON-String in JavaScript-Objekte parst, und JSON.stringify (), Dadurch wird ein JavaScript-Objekt oder -Array in eine JSON-Zeichenfolge umgewandelt.

Douglas Crockford hat dafür eine Bibliothek in älteren Browsern erstellt. es ist auf github verfügbar.


Für die Einheit

Es gibt eine C # -Baugruppe namens LitJSON, die Sie in Ihren Unity-Projekten zum Analysieren und Generieren von JSON verwenden können. Sie können dies auch verwenden, wenn Ihr Projekt in JavaScript oder Boo anstatt in C # geschrieben ist..

So dekodieren Sie ein Unity-Objekt in eine JSON-Zeichenfolge:

 # using LitJson; String jsonString = JsonMapper.ToJson (meinObjekt);

So codieren Sie eine JSON-Zeichenfolge in ein Unity-Objekt vom Typ Thing:

 # using LitJson; Thing myThing = JsonMapper.ToObject (JsonString);

Das LitJSON-Handbuch ist großartig. Ich empfehle, das zu lesen, um weitere Informationen zu erhalten.


Für andere Sprachen

JSON.org hat eine lange Liste von Bibliotheken für verschiedene Plattformen und Sprachen - außerdem können Sie Google durchsuchen, wie oben erwähnt;)

Diese Site bietet auch einige großartige Visualisierungen, wie JSON erstellt werden kann, und viele Details, die über das hinausgehen, was ich in dieser kurzen Einführung erklärt habe. Überprüfen Sie es, wenn Sie mehr wissen möchten!