Beispiel mit JSON
Bei Ilias finden Sie demnächst einen Ordner namens Ajax_JSON_Beispiel. Dort ist eine HTML, CSS, JS und JSON Datei enthalten. Sie werden feststellen, dass die HTML-Datei kaum Inhalt enthält, jedoch einen JS-Aufruf. Mittels JS wird der gesamte Inhalt aus der JSON-Datei ausgelesen und an verschiedenen Stellen auf der HTML-Seite eingefügt.
Bitte machen Sie sich mit dem Code vertraut und überprüfen Sie die Variablenzuweisungen mit console.log();
Hier eine Strukturierung und Erklärung des Codes:
Festlegungen der Ausgabebereiche auf der HTML-Seite. Statt mit dem querySelector kann auch einfach mit getElementById() gearbeitet werden.
var header = document.querySelector('header');
var section = document.querySelector('section');
Datenquellenpfad auf dem Server
var requestURL = 'DataBase/Heroes.json';
AJAX: Erzeugen des XMLHttpRequest Objekts, öffnen der Verbindung zum Serverpfad, Angabe des Responsetypes und senden.
var request = new XMLHttpRequest();
request.open('GET', requestURL, true);
request.responseType = 'json';
request.send();
Nachdem das XMLHttpRequest Objekt geladen wurde, wird der Response des Servers als Array auf der Variablen superHeroes abgelegt.
Anschließend erfolgt ein Funktionsaufruf, um die Überschrift einzufügen und um die Superhelden auszugeben. Beiden Funktionen wird als Parameter die Variable superHeroes mitgegeben, die den Inhalt der JSON Datei als JS Objekte enthält.
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
Die Funktion populateHeader ist deklariert mit jsonObj als Parameter, dieser wird beim Funktionsaufruf oben mit der Variaben superHeroes 'belebt'.
function populateHeader(jsonObj) {
Mit createElement() wird ein HTML-Element erzeugt.
var myH1 = document.createElement('h1');
Mit console.log(Variable);kann der Inhalt einer Variablen auf der Konsole ausgegeben werden. Wird zur Kontrolle eingesetzt!
console.log(myH1);
Mit textContent wird die gewünschte Information zwischen die HTML-Tags geschrieben.
myH1.textContent = jsonObj['squadName'];
Nun wird im Ziel-Bereich (header) auf der HTML Seite ein Kindelement mit entschprechendem Inhalt (myH1) hinzugefügt.
header.appendChild(myH1);
Somit ist nun die Überschrift Super hero squad auf der HTML-Seite eingefügt und mit CSS gestylt.
Nun folgt nach gleichen Schema die Unterüberschrift, die in der Ausgabe zusätzlich zu den Inhalten des jsonObj auch noch eine Textausgabe enthält:
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
Alternativ könnte hier auch document.getElementById("header").appendChild(myPara); eingesetzt werden.
}
Die Funktion showHeroes ist deklariert mit jsonObj als Parameter, dieser wird beim Funktionsaufruf oben mit der Variaben superHeroes 'belebt'.
function showHeroes(jsonObj) {
Im Gegensatz zu oben, erfolgt hier kein Zugriff auf eine einfache Variable, sondern auf das Array members. Der Inhalt des Arrays members wird auf der Variablen heros abgelegt.
var heroes = jsonObj['members'];
Nun wird das Array mit einer for-Schleife durchlaufen. Zunächst werden die notwendigen Elemente erzeugt und auf Variablen abgelegt, so dass eine Struktur, wie diese aufgebaut werden kann:
article
h2 /h2
p
p
p
ul /ul
/article
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');
Anschließend werden wieder die entsprechenden Inhalte hinzugefügt (+ zusätzliche Textausgabe):
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
Die verschiedenen Superkräfte der Helden heroes[i].powers; sind wiederum in einem Array, das nun durchlaufen werden muss(superPowers). So werden die li für die ul oben generiert und in der Variablen listItem zusammen mit dem Werte (über listItem.textContent) gespeichert:
var superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
Der Ziel-Bereich ist die ul, die in der Variablen myList abgelegt ist und so wird das Kindelement mit entschprechendem Inhalt (listItem) hinzugefügt.
myList.appendChild(listItem);
}
In der Variablen myArticle wurde das HTML-Tag article erzeugt und nun werden die Kindelemente mit entschprechenden Inhalten (myH2,myPara1, myPara2, myPara3 und myList) hinzugefügt.
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
Erneut wird im Ziel-Bereich (section) auf der HTML Seite ein Kindelement mit entschprechendem Inhalt (myArticle) hinzugefügt.
section.appendChild(myArticle);
}
}