Neueste Web-Entwicklung Tutorials
 

JSON Lernprogramm

JSON: JavaScript Object Notation.

JSON ist eine Syntax für die Speicherung und den Austausch von Daten.

JSON ist ein einfacher zu bedienende Alternative zu XML.


Die folgende JSON Beispiel definiert ein Mitarbeiter-Objekt, mit einer Reihe von 3 Mitarbeiterdaten:

JSON Beispiel

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

Das folgende XML-Beispiel definiert auch ein Mitarbeiter mit 3 Mitarbeiterdaten Objekt:

XML-Beispiel

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

Was ist JSON?

  • JSON steht für JavaScript Object Notation
  • JSON ist eine leichte Datenaustauschformat
  • JSON ist sprachunabhängig *
  • JSON ist "selbsterklärend" und leicht zu verstehen

* JSON verwendet JavaScript-Syntax, aber das JSON-Format ist nur Text, so wie XML.
Text kann als ein Datenformat, das von einer beliebigen Programmiersprache gelesen und verwendet werden.


JSON - Wertet auf JavaScript-Objekte

Das JSON-Format ist syntaktisch identisch mit dem Code für JavaScript-Objekte zu erstellen.

Wegen dieser Ähnlichkeit, anstatt einen Parser zu verwenden (wie XML der Fall ist), kann ein JavaScript-Programm Standard JavaScript-Funktionen verwenden, um JSON-Daten in native JavaScript-Objekte umwandeln.


Versuch es selber

Mit unserem Editor können Sie JavaScript-Code online und klicken Sie auf eine Schaltfläche, bearbeiten das Ergebnis zu sehen:

JSON Beispiel

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>
Versuch es selber "

Ähnlich wie XML Weil

  • Sowohl JSON und XML sind "selbst beschreiben" (für Menschen lesbaren)
  • Sowohl JSON und XML sind hierarchisch (Werte innerhalb Werte)
  • Sowohl JSON und XML können von vielen Programmiersprachen analysiert und verwendet werden,
  • Sowohl JSON und XML kann mit einem XMLHttpRequest abgeholt werden

Viel Im Gegensatz zu XML Weil

  • JSON nicht End-Tag verwenden
  • JSON ist kürzer
  • JSON ist schneller lesen und schreiben
  • JSON-Arrays verwenden

Der größte Unterschied ist:

XML muss mit einem XML-Parser analysiert werden. JSON kann durch eine Standard-JavaScript-Funktion analysiert werden.


Warum JSON?

Für AJAX-Anwendungen, ist JSON schneller und einfacher als XML:

Verwenden von XML

  • Fetch ein XML-Dokument
  • Verwenden Sie die XML-DOM-Schleife durch das Dokument
  • Auszug Werte und speichern Sie in Variablen

Mit JSON

  • Holt eine JSON-String
  • JSON.parse die JSON-String