Json-Abkürzungsdekodierung. Grundlagen der Arbeit mit JSON. Was ist JSON?

Variablen, Arrays und Objekte sind eine bekannte und praktische Form der Datendarstellung. Es ist üblich, Daten in der Browsersprache JavaScript zu beschreiben, was in der PHP-Serversprache nicht notwendig ist. Das JSON-Format ermöglicht es Ihnen, sie zu einem Ganzen zusammenzufassen und sich nicht auf die Programmiersprache zu konzentrieren. In diesem Fall werden die Daten zu Paaren: „Name = Wert“. Der Wert in jedem von ihnen kann auch eine Sammlung solcher Paare sein.

Es ist üblich, JSON mit geschweiften Klammern zu verknüpfen, und letzteres ist durchaus berechtigt, da das JSON-Format = JavaScript Object Notation ist. In den letzten besonders dynamischen Jahren hat sich viel verändert. Was für einen bestimmten Zweck geschaffen wurde, brachte oft unerwartete Ergebnisse oder eröffnete neue Horizonte.

Die AJAX-Technologie ist zur traditionellen, regelmäßigen Seitenaktualisierung geworden vollständig ist nicht mehr beliebt. Wenn ein Besucher eine Website öffnet, initiiert er eine Reihe teilweiser Datenaustausche, bei denen sich bestimmte Seiten nur an der relevanten Stelle ändern.

Es wird angenommen, dass die Entstehung von JSON mit der Verwendung von AJAX zusammenhängt, aber tatsächlich haben Assoziativ und seine Objektnotation (Merkmale der Syntax zur Beschreibung und Verwendung von Objekten) eine viel stärkere Beziehung zu JSON als der Datenaustausch zwischen dem Browser und dem Server.

Da der Inhalt der Seiten moderner Websites wirklich „massiv“ (umfangreich) geworden ist, hat die Effizienz des Formats für den Datenaustausch besondere Bedeutung erlangt. Das soll nicht heißen, dass JSON zu einer neuen Datendarstellung geworden ist, aber die Tatsache, dass es schon lange ein Element der JavaScript-Syntax ist, ist von Bedeutung.

Die Verwendung von Kyrillisch bei der Benennung von Variablen ist ein sehr unerwartetes Phänomen (Unsinn), funktioniert aber in den neuesten Versionen von Chrome, Firefox und sogar Internet Explorer 11.

Natürlich macht es keinen Sinn, dieses völlig unerwartete Phänomen zu verwenden, wenn man bedenkt, wie leicht die Werte von Variablen, die in russischen Buchstaben geschrieben sind, zu Unsinn werden: Was können wir über Namen sagen, insbesondere über externe?

Es ist fraglich, ob die Initiative in kyrillischen Namen von der externen Umgebung des Browsers unterstützt wird, mit der er ständig zu tun hat. Diese Tatsache verdient jedoch aus dem einfachen Grund Beachtung, dass das JSON-Format die Möglichkeit bietet, Namen und Werte so zu schreiben, wie es der Entwickler wünscht. Dies ist wichtig, da in jeder Aufgabe die Beschreibung des Anwendungsbereichs nach Bedarf die Fehlersuche deutlich vereinfacht und die Fehleranzahl reduziert.

Es spielt keine Rolle, was genau die Grundlage der syntaktischen Innovation – JSON – war, wichtig ist, dass sie das rechtliche Recht und die tatsächliche Möglichkeit gibt, die Entsprechung festzulegen: „jeder Name = jeder Wert“.

Wir müssen der JavaScript-Sprache Tribut zollen: Was die Syntax vorsieht, verpflichtet den Entwickler nicht und zwingt ihm nichts auf. Der Entwickler nutzt die Sprachsyntax frei, um ein Datenmodell und einen Algorithmus für deren Verwendung optimal zu gestalten.

Durch die Annahme von Daten im JSON-Format bietet der Server (insbesondere über PHP) die Möglichkeit, diese unverändert zu verarbeiten und das Ergebnis in einem ähnlichen Format an den Browser zurückzugeben. PHP-Quellarray:

• $cJSON = Array („a“=> „alfa“, „b“=> „beta“, „g“=> „gamma“).

Zur Übermittlung an den Browser in JSON konvertieren:

• $cJS = json_encode($cJSON).

Ergebnis:

• („a“: „alfa“, „b“: „beta“, „g“: „gamma“).

Die auf dem Foto gezeigte Verschachtelung ist zulässig.

Hier wurde das generierte Array mit einem neuen Element „in sich selbst“ mit dem automatischen Index „0“ und dann wieder mit dem angegebenen Index „z“ hinzugefügt.

Json_decode() konvertiert einen JSON-String in ein PHP-Array. Ähnliche Ergebnisse können durch Manipulieren von Funktionen und explosion() erzielt werden. In manchen Fällen ist diese Option vorzuziehen.

Elemente können sowohl browserseitig als auch serverseitig verschachtelt werden. In der Praxis bietet das JSON-Format (Standardbeschreibung RFC 4627) deutlich mehr als 4 Verschachtelungsebenen, diese Funktion sollte jedoch nicht missbraucht werden.

Es ist am besten, niemals über das angemessene Maß hinauszugehen; dadurch wird der Code lesbar und erleichtert das Debuggen und Verstehen für andere Entwickler.

JSON wird allgemein als Datenkonstrukt bezeichnet, das einfacher als XML und sowohl für Menschen als auch für Computer verständlich ist. Dies trifft zu, wenn die Datenmenge gering ist und der Entwickler die Verschachtelungsebene mit Bedacht gewählt hat. In allen anderen Fällen ist es sowohl auf der Browserseite als auch auf der Serverseite schwierig, die Anzahl der Klammern zu zählen und zu verstehen.

Der Einsatz von JSON beschränkt sich in der Praxis oft nicht auf eine für Menschen lesbare kurze Zeichenfolge. Jede Datenkonstruktion ist immer pragmatisch. Gleichzeitig kann JSON effektiv sowohl in realen Aufgabendaten (Unternehmensmitarbeiter) als auch zur Implementierung temporärer Daten (Objekt-Cache) eingesetzt werden.

Normalerweise besteht eine Aufzeichnung über eine Person aus einem Nachnamen, einem Vornamen, einem Vatersnamen, einem Geburtsjahr, einem Fachgebiet, einer Ausbildung usw. und einigen anderen einfachen Werten. Selbst in besonders anspruchsvollen Unternehmen wird ein Rekord von einer Person nicht mehr als ein Dutzend oder zwei Felder betragen. Dies ist wahrnehmbar und kann in einem Datenbankstring abgelegt werden.

Wenn ein Unternehmen mehrere Mitarbeiter beschäftigt, ist das eine Sache, wenn es Zehntausende sind, ist das eine ganz andere. Sie können die Datenbank weiterhin verwenden, die Speicherung als Datei erscheint jedoch praktischer und benutzerfreundlicher.

JSON ist eine reine Textdatei. Der Fall mit der Besetzungstabelle, egal was passiert. Man kann es immer lesen. Das Öffnen und Bearbeiten ist auch in jedem Texteditor möglich, der nicht die Angewohnheit hat, dem Inhalt der Datei eigene Serviceinformationen hinzuzufügen. Im Allgemeinen ist *.json sowohl im Browser als auch in der Datei reiner Text – ein String.

Das Foto zeigt den Cache des Objekts, das das Bild bildet, ein Beispiel.

Dies ist ein Beispiel für den Inhalt einer Datei, die von einer Website generiert wurde, die farbigen 3D-Druck auf Tassen und Keramik anbietet. Natürlich ist es bei einem solchen JSON-Format sehr problematisch zu entscheiden, wie man es öffnet. In diesem und ähnlichen Fällen gibt es jedoch keine Probleme beim Lesen der Datei: PHP liest die Datei, analysiert sie und übergibt sie an den Browser. Die vom Besucher geänderten Daten werden an den Server zurückgegeben und zurückgeschrieben.

In diesem Anwendungsfall fungiert die Datei als Variable, die außerhalb des Codes gespeichert wird. Bei Bedarf erhält die Variable einen Wert aus der Datei, und wenn sie vom Besucher im von der Site bereitgestellten Dialog geändert wird, werden alle Änderungen unverändert aufgezeichnet. Es ist nicht erforderlich, den Inhalt der Datei zu lesen und zu überprüfen.

JSON wird häufig zum Speichern und Verwenden von Serviceinformationen verwendet. Dabei handelt es sich nicht um eine Besetzungstabelle, und weder der Entwickler noch der Website-Besucher müssen sie sehen.

„Alles hat seine Zeit“ ist ein klassisches Wissen, das bereits vor dem Aufkommen der Programmierung als Axiom galt. „Nichts erscheint einfach“ – das geschah auch, bevor der Mensch das erste verständliche Programm in einer künstlichen Sprache schrieb.

Datenformate entstehen aus realen Bedürfnissen und basieren auf erlangtem Wissen. HTML hat seinen eigenen Pfad, XML hat seinen eigenen Pfad und JSON ist eine auf andere Sprachen erweiterte JavaScript-Objektlogik. Ein Vergleich mit dem anderen ist nicht das Beste. Jedem das Seine.

XML meistert seine Aufgaben wunderbar und wird offensichtlich nicht zur Geschichte werden. Und JSON wurde bis 2006 verwendet; nur sah es nicht jeder Entwickler als seine Pflicht an, bestimmte Optionen zur Darstellung seiner Daten zu deklarieren.

In der Praxis gab es Fälle, in denen Programme in BASIC geschrieben wurden, die nicht JSON als solches verwendeten, sondern „Name = Wert“-Paare perfekt speicherten und sie den richtigen Algorithmen zur richtigen Zeit zur Verfügung stellten.

Die Gewohnheit, in JavaScript mit assoziativen Arrays und Objekten zu arbeiten, macht die Verwendung von JSON natürlich und bequem. Dies ist ein wirklich großartiges Format, aber die Fähigkeit, Strings und Arrays zu trennen und zu verbinden sowie Strings und Arrays zu manipulieren, hat viel tiefere Wurzeln.

Mit den Join/Split-Funktionen der JavaScript-Sprache und implode/explode der PHP-Sprache können Sie sowohl XML- als auch JSON-Datenformate und Ihre eigene Version bequem und effizient verwenden. Letzteres ist oft optimal, während die ersten beiden ideal für allgemeine Einsatzmöglichkeiten sind. Wenn Informationen an einen anderen Entwickler, Server, eine andere Datei oder Datenbank übertragen werden, gibt es keinen besseren Weg, XML und JSON zu finden. Jeder arbeitet mit ihnen, sodass die Übertragung/der Empfang von Informationen keine Kommentare erfordert.

Das Lesen und Schreiben von Daten im JSON-Format in Android ist nicht nur die Norm, sondern es gibt auch viele Objekte, die sich auf die Arbeit mit diesem speziellen Datenformat konzentrieren.

In diesem Fall wird das JSON-Format verwendet. Das mag stimmen, aber die Frage ist nicht die Phänomenalität sozialer Netzwerke, sondern die Tatsache, dass die Darstellung von Informationen im Format „Name = Wert“ sowohl für die Programmierung als auch für die Nutzung wirklich praktisch ist. Im Gegensatz zum strengen und komplexen „XML“ ist dies wirklich ein benutzerfreundliches Format.

Es kommt vor, dass Variablen beschrieben werden müssen (JavaScript) oder zumindest ein Anfangswert angegeben werden muss (PHP). In beiden Fällen kann die Variable ihren Typ sehr leicht ändern. Die Sprache führt diese Konvertierung bei Bedarf automatisch durch.

Aber warum sollte die Variable nicht auch ihren Namen ändern, während der Ausführung des Algorithmus erscheinen und verschwinden, wenn sie nicht mehr benötigt wird? Assoziative Arrays lösen dieses Problem, aber wenn solche relativ dynamischen Variablen verwendet werden, folgen der Array-Name und die entsprechenden syntaktischen Konstrukte dem Ort, an dem sie verwendet werden.

Dieser Umstand ist in PHP besonders ausgeprägt, aber Sie können ihn in Kauf nehmen, wie beispielsweise mit dem „$“-Symbol im Variablennamen und der „$this->“-Kombination innerhalb des Objekts. Wenn man gleichzeitig in JavaScript und PHP programmiert, ist man zunächst wirklich erstaunt, wie unterschiedlich alles ist, aber dann wird alles so vertraut und natürlich ...

In diesem Beispiel wird ein *.docx-Dokument mit der PHPOffice/PHPWord-Bibliothek erstellt und das aProperties-Array enthält die Eigenschaften dieses Dokuments (Autor, Firma, Titel, Kategorie, Erstellungsdatum...).

Das zweite Array enthält Daten für die Seite:

• Ausrichtung (Querformat oder Normal);
• vertikale und horizontale Abmessungen;
• Einzüge (Ränder links, oben, unten, rechts);
• Kopf-und Fußzeilen.

Das Dokument wird auf dem Server generiert, auf dem die PHPOffice/PHPWord-Bibliothek installiert ist. Auf der Website können Sie die Werte dieser Arrays mithilfe von JavaScript verwalten. Das Ergebnis im JSON-Format wird an den Server zurückgegeben und in PHP-Algorithmen, in seinen Konstrukten, also in Arrays, verwendet.

Das JSON-Format löst das Problem dynamischer Variablen. Hier können Sie Variablen ohne unnötigen syntaktischen Aufwand erstellen, ändern und löschen. Es sieht gut aus und wird in JavaScript verwendet.

In diesem Beispiel ruft die Funktion GetOjInfo() den Wertnamen und den Wert von einem Objekt ab. Anfänglich besteht das der Variablen ojInfo zugewiesene JSON-Zeichenfolgenobjekt aus drei Elementen: Name, Alter und Arbeit. Etwas später wird die Variable Status hinzugefügt.

Nach dem ersten Löschoperator verliert die ojInfo-Zeile das Alterselement, nach dem zweiten Löschoperator verliert sie das Arbeitselement. Wenn wir davon ausgehen, dass es sich bei dieser Zeichenfolge um eine Auswahl von Variablen handelt, die eine bestimmte Bedeutung haben, können Sie mit JSON tatsächlich beliebige Mengen davon außerhalb des operativen Bereichs (Syntax) der Beschreibung und Verarbeitung der JavaScript-Sprache erstellen, ändern und löschen.

Das JSON-Format wurde für diese Option nicht konzipiert, ist aber möglich, praktisch und bequem.

JSON (JavaScript Object Notation) ist ein Datenübertragungsformat. Wie der Name schon sagt, basiert das Format auf der Programmiersprache JavaScript, es ist aber auch in anderen Sprachen (Python, Ruby, PHP, Java) verfügbar.

JSON verwendet die Erweiterung .json. Bei Verwendung in anderen Dateiformaten (z. B. .html) wird die JSON-Zeichenfolge in Anführungszeichen gesetzt oder einer Variablen zugewiesen. Dieses Format lässt sich problemlos zwischen dem Webserver und dem Client oder Browser übertragen.

JSON ist leichtgewichtig und leicht verständlich und eine großartige Alternative zu XML.

Dieses Tutorial führt Sie in die Vorteile, Objekte, allgemeine Struktur und Syntax von JSON ein.

Ein JSON-Objekt liegt in Schlüsselwertform vor und wird normalerweise in geschweiften Klammern geschrieben. Bei der Arbeit mit JSON werden alle Objekte in einer .json-Datei gespeichert, sie können aber auch als separate Objekte im Kontext des Programms existieren.

Das JSON-Objekt sieht folgendermaßen aus:

„Vorname“: „John“,
„last_name“: „Smith“,
„Standort“: „London“,
„online“: wahr,
„Follower“: 987

Dies ist ein sehr einfaches Beispiel. Ein JSON-Objekt kann viele Zeilen enthalten.

Wie Sie sehen, besteht ein Objekt aus Schlüssel-Wert-Paaren, die in geschweifte Klammern eingeschlossen sind. Die meisten Daten in JSON werden als Objekte geschrieben.

Zwischen Schlüssel und Wert wird ein Doppelpunkt gesetzt. Nach jedem Paar müssen Sie ein Komma setzen. Das Ergebnis ist:

„key“: „value“, „key“: „value“, „key“: „value“

Der JSON-Schlüssel befindet sich auf der linken Seite. Der Schlüssel muss in doppelte Anführungszeichen gesetzt werden. Als Schlüssel kann jede gültige Zeichenfolge verwendet werden. Innerhalb eines Objekts müssen alle Schlüssel eindeutig sein. Der Schlüssel kann ein Leerzeichen („Vorname“) enthalten, die Programmierung kann jedoch Probleme beim Zugriff auf einen solchen Schlüssel haben. Daher ist es besser, anstelle eines Leerzeichens einen Unterstrich („Vorname“) zu verwenden.

Die JSON-Werte stehen auf der rechten Seite der Spalte. Als Wert kann jeder einfache Datentyp verwendet werden:

• Saiten
• Zahlen
• Objekte
• Arrays
• Boolesche Daten (wahr oder falsch)

Werte können auch durch komplexe Datentypen (zum Beispiel Objekte oder JSON-Arrays) dargestellt werden.

JSON unterstützt eine individuelle Syntax für jeden der oben aufgeführten Datentypen: Wenn der Wert durch eine Zeichenfolge dargestellt wird, wird er in Anführungszeichen gesetzt, wenn es sich jedoch um eine Zahl handelt, ist dies nicht der Fall.

Normalerweise werden Daten in JSON-Dateien in eine Spalte geschrieben, JSON kann jedoch auch in eine Zeile geschrieben werden:

(„Vorname“: „John“, „Nachname“: „Smith“, „online“: wahr,)

Auf diese Weise werden JSON-Daten normalerweise in andere Dateitypen geschrieben.

Durch das Schreiben von JSON-Daten in eine Spalte verbessern Sie die Lesbarkeit der Datei (insbesondere, wenn die Datei viele Daten enthält). JSON ignoriert Leerzeichen zwischen Spalten, sodass Sie diese verwenden können, um Ihre Daten in eine überschaubare Anzahl von Spalten aufzuteilen.

„Vorname“: „John“,
„last_name“: „Smith“,
„online“: wahr

Beachten Sie, dass JSON-Objekte JavaScript-Objekten sehr ähnlich sind, aber nicht dasselbe Format haben. Beispielsweise können Sie Funktionen in JavaScript verwenden, jedoch nicht in JSON.

Der Hauptvorteil von JSON besteht darin, dass Daten in diesem Format von vielen gängigen Programmiersprachen unterstützt werden und daher schnell übertragen werden können.

Sie sind jetzt mit der grundlegenden JSON-Syntax vertraut. JSON-Dateien können jedoch komplexe, hierarchische Strukturen aufweisen, die verschachtelte Arrays und Objekte enthalten.

JSON kann verschachtelte Objekte und Arrays speichern, die als Wert des ihnen zugewiesenen Schlüssels übergeben werden.

Nachfolgend finden Sie ein Beispiel – die Datei „users.json“, die Benutzerdaten enthält. Für jeden Benutzer

(„john“, „jesse“, „drew“, „jamie“) wird ein verschachteltes Objekt als Wert übergeben, das wiederum aus Schlüsseln und Werten besteht.

Hinweis: Das erste verschachtelte JSON-Objekt wird rot hervorgehoben.

"John" :(
„Benutzername“: „John“,
„Standort“: „London“,
„online“: wahr,
„Follower“: 987

„Jesse“ :(
„Benutzername“: „Jesse“,
„Standort“: „Washington“,
„online“: falsch,
„Follower“: 432

„gezeichnet“ :(
„Benutzername“: „Drew“,
„Standort“: „Paris“,
„online“: falsch,
„Follower“: 321

„Jamie“ :(
„Benutzername“: „Jamie“,
„Standort“: „Berlin“,
„online“: wahr,
„Follower“: 654

Beachten Sie, dass sowohl im verschachtelten Objekt als auch im Hauptobjekt geschweifte Klammern verwendet werden. Kommas in verschachtelten Objekten werden auf die gleiche Weise verwendet wie in regulären Objekten.

Daten können mithilfe von JavaScript-Arrays, die als Werte übergeben werden, in JSON verschachtelt werden. JavaScript verwendet eckige Klammern () am Anfang und Ende eines Arrays. Ein Array ist eine geordnete Sammlung von Daten, die verschiedene Datentypen enthalten kann.

Ein Array dient der Übertragung einer großen Datenmenge, die gruppiert werden kann. Versuchen wir zum Beispiel, Benutzerdaten aufzuzeichnen.

{
„Vorname“: „John“,
„last_name“: „Smith“,
„Standort“: „London“,
"Websites" : [

„Beschreibung“: „Arbeit“,
„URL“: „https://www.johnsmithsite.com/“

},
{

„Beschreibung“: „Tutorials“,
„URL“: „https://www.johnsmithsite.com/tutorials“

"sozialen Medien" : [

„Beschreibung“: „Twitter“,
„Link“: „https://twitter.com/johnsmith“

„Beschreibung“: „Facebook“,
„Link“: „https://www.facebook.com/johnsmith“

„Beschreibung“: „Github“,
„Link“: „https://github.com/johnsmith“

Den Schlüsseln „websites“ und „social_media“ werden Arrays als Werte zugewiesen, die in eckige Klammern gesetzt werden.

Mithilfe verschachtelter Arrays und Objekte können Sie eine komplexe Datenhierarchie erstellen.

Mit XML (eXtensible Markup Language) können Sie Daten in einer für Mensch und Maschine leicht verständlichen Form speichern. Das XML-Format wird von einer Vielzahl von Programmiersprachen unterstützt.

XML und JSON haben viele Gemeinsamkeiten. Allerdings erfordert XML viel mehr Text, was bedeutet, dass solche Dateien größer und schwieriger zu lesen und zu schreiben sind. Darüber hinaus wird XML nur mit einem XML-Interpreter verarbeitet, während JSON mit einer einfachen Funktion verarbeitet werden kann. Im Gegensatz zu JSON kann XML keine Arrays speichern.

Vergleichen wir zwei Dateien: Sie enthalten dieselben Daten, aber die erste ist im XML-Format und die zweite in JSON geschrieben.

user.xml

John London

Jesse Washington

Zeichnete Paris

Jamie Berlin

user.json
("Benutzer": [

(„Benutzername“: „John“, „Standort“: „London“),
(„Benutzername“: „Jesse“, „Standort“: „Washington“),
(„Benutzername“: „Drew“, „Standort“: „Paris“),
(„Benutzername“: „JamieMantisShrimp“, „Standort“: „Berlin“)

JSON ist ein sehr kompaktes Format und erfordert nicht so viele Tags wie XML. Darüber hinaus unterstützt XML im Gegensatz zu JSON keine Arrays.

Wenn Sie mit HTML vertraut sind, werden Sie feststellen, dass das XML-Format diesem sehr ähnlich ist (insbesondere die Tags). JSON ist einfacher, erfordert weniger Text und lässt sich beispielsweise einfacher in AJAX-Anwendungen verwenden.

Natürlich muss das Format je nach den Anforderungen der Anwendung gewählt werden.

JSON wird häufig in JavaScript verwendet, das Format ist jedoch auch in anderen Programmiersprachen weit verbreitet.

Weitere Informationen zur JSON-Kompatibilität und -Verarbeitung finden Sie auf der Projektwebsite und in der jQuery-Bibliothek.

Es kommt selten vor, JSON von Grund auf zu schreiben. Typischerweise werden Daten aus der Quelle geladen oder in JSON konvertiert. Sie können CSV- oder tabulatorgetrennte Daten mit dem Open-Source-Tool Mr. in JSON konvertieren. Datenkonverter. Um XML in JSON und umgekehrt zu konvertieren, verwenden Sie utilities-online.info. Überprüfen Sie beim Arbeiten mit automatischen Werkzeugen unbedingt die Ergebnisse.

JSON-Dateien (einschließlich konvertierter Daten) können mit dem JSONLint-Dienst überprüft werden. Informationen zum Testen von JSON in einem Webentwicklungskontext finden Sie unter JSFiddle.

JSON ist ein einfaches und leichtes Datenformat. JSON-Dateien lassen sich einfach übertragen, speichern und verwenden.

Heutzutage wird JSON häufig in APIs verwendet.

JavaScript Object Notation (JSON) ist ein Standardtextformat zur Darstellung strukturierter Daten basierend auf der JavaScript-Objektsyntax. Es wird häufig für die Datenübertragung in Webanwendungen verwendet (zum Beispiel das Senden einiger Daten vom Server an den Client, damit sie auf einer Webseite angezeigt werden können oder umgekehrt). Das wird Ihnen ziemlich oft passieren, deshalb geben wir Ihnen in diesem Artikel alles, was Sie brauchen, um mit JSON mithilfe von JavaScript zu arbeiten, einschließlich der Analyse von JSON, damit Sie auf die darin enthaltenen Daten zugreifen und JSON erstellen können.

Wir laden es auf unsere Seite und rendern es mithilfe einiger netter DOM-Manipulationen, etwa so:

Um den JSON zu empfangen, verwenden wir eine API namens XMLHttpRequest (oft als XHR bezeichnet). Dies ist ein sehr nützliches JavaScript-Objekt, das es uns ermöglicht, Netzwerkanfragen zu stellen, um Ressourcen vom Server über JavaScript abzurufen (z. B. Bilder, Text, JSON, sogar HTML-Snippets), was bedeutet, dass wir kleine Inhaltsabschnitte aktualisieren können, ohne die gesamte Seite neu laden zu müssen . Dies hat zu reaktionsschnelleren Webseiten geführt und hört sich spannend an, geht aber leider über den Rahmen dieses Artikels hinaus, um es ausführlicher zu behandeln.

Hier speichern wir die Antwort auf unsere Anfrage (verfügbar in der Eigenschaft) in der SuperHeroes-Variable; Diese Variable enthält jetzt ein JSON-basiertes JavaScript-Objekt! Anschließend übergeben wir dieses Objekt an zwei Funktionsaufrufe – der erste füllt es mit den richtigen Daten und der zweite erstellt eine Infokarte für jeden Helden im Team und fügt sie in ein.

Wir haben den Code in einen Ereignishandler eingebunden, der ausgelöst wird, wenn das Ladeereignis auf dem Anforderungsobjekt ausgelöst wird (siehe). Dies liegt daran, dass das Ladeereignis ausgelöst wird, wenn die Antwort erfolgreich zurückgegeben wird. Dadurch wird sichergestellt, dass „request.response“ auf jeden Fall verfügbar ist, wenn wir versuchen, etwas dagegen zu unternehmen.

Jetzt haben wir die JSON-Daten extrahiert und in ein JavaScript-Objekt umgewandelt. Lassen Sie uns es nutzen, indem wir die beiden oben verknüpften Funktionen schreiben. Fügen Sie zunächst die folgende Funktionsdefinition unterhalb des vorherigen Codes hinzu:

Funktion populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Heimatstadt: " + jsonObj["homeTown"] + " // Gebildet: " + jsonObj["formed"];

Wir haben den Parameter jsonObj benannt, um uns daran zu erinnern, dass dieses JavaScript-Objekt von JSON stammt. Hier erstellen wir zunächst ein Element mit , setzen es auf die Eigenschaft „squadName“ des Objekts und fügen es dann mit zum Header hinzu. Anschließend führen wir einen ganz ähnlichen Vorgang mit einem Absatz durch: Wir erstellen ihn, legen seinen Textinhalt fest und fügen ihn der Überschrift hinzu. Der einzige Unterschied besteht darin, dass der Text als verkettete Zeichenfolge angegeben wird, die sowohl die Eigenschaften „homeTown“ als auch „formed“ des Objekts enthält.

Fügen Sie dann am Ende des Codes die folgende Funktion hinzu, die die Superheldenkarten erstellt und anzeigt:

Funktion showHeroes(jsonObj) ( var heros = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

Speichern wir zunächst die Members-Eigenschaft des JavaScript-Objekts in einer neuen Variablen. Dieses Array enthält mehrere Objekte, die Informationen für jeden Helden enthalten.

Anschließend durchlaufen wir jedes Objekt im Array. Für jeden von ihnen haben wir: