Wie man JavaScript Object Notation (JSON) für HTML5 und CSS3 Programmierung verwenden

HTML5 und CSS3 All-in-One For Dummies, 3. Auflage

JSON-Daten sind immer ein sehr wichtiger Teil der Web-Programmierung, da sie für den Transport von Daten zwischen Programmen und Programmiersprachen einen einfachen Mechanismus ermöglicht.

Das Speichern von Daten im JSON-Format

Um zu sehen, wie JSON funktioniert, schauen Sie sich dieses einfache Code-Fragment:

Dieser Code beschreibt ein Lebewesen. Die lebewesen haben zwei Eigenschaften, einen Namen und ein Alter. Die lebewesen sieht viel wie ein Array, sondern eher als einen numerischen Index wie die meisten Arrays verwenden, hat die lebewesen String-Werte als Indizes zu dienen. Es ist in der Tat ein Objekt.

Sie können mit einer Variation von Array-Syntax, wie diese auf die einzelnen Elemente beziehen:

Sie können auch verwenden, was Punktnotation genannt werden wie folgt (wie in Objekten verwendet):

Zum Speichern von Daten im JSON-Notation:

Erstellen Sie die Variable.

Sie können die var-Anweisung verwenden, wie Sie jede Variable tun.

Enthalten, um den Inhalt innerhalb von Klammern ( <> ).

Dies ist der gleiche Mechanismus Sie ein vorinstalliertes Array zu erstellen, verwenden.

Bezeichnen Sie einen Schlüssel.

Der Schlüssel kann ein String oder eine ganze Zahl sein.

Folgen Sie den Schlüssel mit einem Doppelpunkt (.).

Erstellen Sie den Wert mit dem Schlüssel zugeordnet ist.

Anschließend können Sie jede Art von Wert verbinden Sie mit dem Schlüssel mögen.

Trennen Sie den Namen / Wert-Paar mit einem Komma.

Sie können beliebig viele Namen / Wert-Paare hinzufügen, wie Sie es wünschen.

Der Aufbau einer komplexeren Struktur JSON

JSON ist praktisch, weil es verwendet werden kann, ziemlich komplexe Datenstrukturen zu handhaben. Zum Beispiel sehen Sie die Struktur folgenden Daten im JSON-Format geschrieben:

Diese Datenstruktur ist ein weiterer Weg, um die Entfernungsdaten zu repräsentieren verwendeten zweidimensionale Arrays zu beschreiben. Dies ist ein zwei-dimensionales Array.

Abstand ist ein JSON Objekt: Die gesamte Datenstruktur wird in einer Variablen gespeichert. Diese Variable ist ein JSON Objekt mit dem Namen / Wert-Paaren.

Der Abstand Objekt besitzt vier Tasten: Diese entsprechen den vier Reihen des ursprünglichen Diagramm.

Die Tasten sind Städtenamen: Das ursprüngliche 2D-Array verwendete numerische Indizes, die sind praktisch, aber ein wenig künstlich. In der JSON-Struktur sind die Indizes eigentliche Stadtnamen.

Einstellen der Daten auf diese Weise nach oben scheint ein bisschen langweilig, aber es ist sehr einfach, mit zu arbeiten. Die Stadtnamen werden direkt verwendet, Daten zu extrahieren, so können Sie den Abstand zwischen zwei Städten mit Array-ähnlicher Syntax finden:

Wenn Sie möchten, können Sie die Punkt-Syntax verwenden:

Sie können sogar mit einer Art Hybrid gehen:

JSON hat eine Reihe von wichtigen Vorteilen als Datenformat:

Selbsterklärend: Auch wenn Sie die Datenstruktur auf eigenem ohne Code um es sehen, können Sie sagen, was es bedeutet.

Die Verwendung von Zeichenketten als Indizes macht den Code besser lesbar.

JSON-Daten können als Text gespeichert und transportiert werden: Dies erweist sich als profunde Auswirkungen auf die Web-Programmierung haben, vor allem in AJAX.

JSON können komplexe Zusammenhänge beschreiben: Das JSON-Format verwendet werden können komplexere Beziehungen einschließlich der kompletten Datenbanken zu beschreiben.

JSON ist kompakter als XML: Ein anderes Datenformat namens XML wird häufig verwendet, um komplexe Daten zu übertragen. Allerdings ist JSON kompakte und weniger „wordy“ als XML.