AJAX und das Web 2 0 - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 319

"bemerkung": "Twitter-Account"
} ]
}
}
Sie sehen auch in der JSON-Struktur ein Root-Element webseiten , das als Inhalt ein Array
mit Namen seiten enthält. Und jedes Element im Array seiten besteht aus den Elementen
titel , url und bemerkung . Die Webseite kap10_6.html bleibt bis auf irrelevante Änderun-
gen gleich. Von Interesse ist nur die hier jetzt referenzierte JavaScript-Datei kap10_6.js:
Listing 10.15■ Eine Auswertung von JSON mit analogem Ergebnis wie bei der XML-Verarbeitung
var resOb = erzXHRObjekt();
function sndReq() {
resOb.open('get', 'serverantworten/kap10_6.json', true);
resOb.onreadystatechange = function() {
if (resOb.readyState == 4) {
var obj = JSON.parse(resOb.responseText);
document.getElementById("antwort").innerHTML =
obj.webseiten.seite[0].titel + "<br/>" + obj.webseiten.seite[0].url
+ "<hr/>" + obj.webseiten.seite[1].titel + "<br/>" +
obj.webseiten.seite[1].url + "<hr/>" + obj.webseiten.seite[2].titel
+ "<br/>" + obj.webseiten.seite[2].url;
}
};
resOb.send(null);
}
window.onload = function() {
document.getElementById("frage").onclick = sndReq;
};
Sie sehen, dass wir im Fall von JSON wieder responseText verwenden - im Gegensatz zu
der Verwertung von XML. Sie sehen aber auch, dass wir über die Klasse JSON einen Parser
verwenden, der aus dem JSON-String ein Objekt erzeugt 2 . Denn indem wir diese Funktion
auf die JSON-Struktur in responseText anwenden, erhalten wir ein Objekt, auf dem wir
navigieren können. Die verschachtelten JSON-Strukturen sind in so einem Objekt über eine
gewöhnliche Punktnotation zugänglich, einfach und vollkommen analog zur normalen
objektorientierten Vorgehensweise. Sie gehen also vom Root-Element webseiten zum ent-
sprechenden Array-Element (über den Index) und dann zu dessen Inhaltselement, das Sie
interessiert.
Bild 10.6■
JSON-Daten lassen sich noch einfacher und zuverlässiger
wie XML-Daten im Browser verarbeiten.
2 Für alte Browser können Sie auch mit eval() arbeiten.