JSON- Verwendung

JSON-Text in ein JavaScript-Objekt konvertieren

Eine der häufigsten Verwendungen von JSON besteht darin, JSON-Daten von einem Webserver (als Datei oder als HttpRequest) zu lesen, die JSON-Daten in ein JavaScript-Objekt zu konvertieren und diese Daten dann auf einer Webseite zu verwenden.

Um es einfacher zu erklären, verwenden wir eine Zeichenkette als Eingabe zur Demonstration (anstelle einer Datei).

JSON-Beispiel - Objekt aus Zeichenkette

Erstellen Sie eine JavaScript-Zeichenkette, die JSON-Syntax enthält:

var txt = '{ "sites" : [' + '{ "name":"Example Tutorial" , "url":"www.example.com" },' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"Weibo" , "url":"www.weibo.com" ]}';

Da die JSON-Syntax eine Teilmenge der JavaScript-Syntax ist, kann die JavaScript-Funktion eval() verwendet werden, um JSON-Text in ein JavaScript-Objekt zu konvertieren.

Die Funktion eval() verwendet den JavaScript-Compiler, der JSON-Text analysieren und dann ein JavaScript-Objekt generieren kann. Der Text muss in Klammern eingeschlossen werden, um Syntaxfehler zu vermeiden:

var obj = eval ("(" + txt + ")");

Verwenden Sie das JavaScript-Objekt in einer Webseite:

Beispiel

var txt = '{ "sites" : [' + '{ "name":"Example Tutorial" , "url":"www.example.com" },' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"Weibo" , "url":"www.weibo.com" ]}'; var obj = eval ("(" + txt + ")"); document.getElementById("name").innerHTML=obj.sites[0].name document.getElementById("url").innerHTML=obj.sites[0].url

Selbst ausprobieren »

JSON-Parser

lampDie Funktion eval() kann jeden JavaScript-Code kompilieren und ausführen. Dies birgt ein potenzielles Sicherheitsproblem.

Die Verwendung eines JSON-Parsers zum Konvertieren von JSON in ein JavaScript-Objekt ist eine sicherere Vorgehensweise. Ein JSON-Parser erkennt nur JSON-Text und kompiliert keine Skripte.

In Browsern bietet dies native JSON-Unterstützung, und JSON-Parser sind schneller.

Neuere Browser und der neueste ECMAScript-Standard (JavaScript) enthalten native Unterstützung für JSON.

Webbrowser-Unterstützung Websoftware-Unterstützung
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • jQuery
  • Yahoo UI
  • Prototyp
  • Dojo
  • ECMAScript 1.5

Selbst ausprobieren »

Für ältere Browser können Sie eine JavaScript-Bibliothek verwenden: https://github.com/douglascrockford/JSON-js

Das JSON-Format war ursprünglich ursprünglich von Douglas Crockford spezifiziert

Weitere Erweiterungen