JQuery Kochbuch (German Edition)

messageObject );
    });
})(jQuery);
    Diskussion
    Die JavaScript Object Notation (JSON) ist ein verbreitetes Datenformat, das genutzt wird, um Daten zwischen dem Browser und dem Server auszutauschen. Es ist ein leichtgewichtiges Format, einfach zu nutzen und lässt sich bequem in JavaScript parsen. Lassen Sie uns zunächst ein einfaches Objekt anschauen:
var messageObject = { title: 'Hallo Welt!', body: 'It\'s great to be alive!' };
    In diesem Beispiel haben wir ein einfaches Objekt mit den beiden Attributen
title
und
body
. Es ist ziemlich einfach, eine serialisierte Version des Objekts zu erzeugen:
var serializedJSON = '{"title":"Hallo Welt!","body":"It\'s great to be alive!"}';
    Die beiden häufigsten Aufgaben bei der Arbeit mit JSON sind die Serialisierung(Umwandeln eines Objekts in eine String-Darstellung) und die Deserialisierung(Umwandeln einer String-Darstellung in ein Objekt-Literal). Momentan bieten nur wenige Browser direkten Zugriff auf JSON-Funktionen (wie zum Beispiel Firefox 3.1+ und der Internet Explorer 8). Andere Browser planen dies, da JSON mittlerweile Teil der Spezifikation von ECMA 3.1 ist. Bis dahin gibt es zwei übliche Vorgehensweisen bei der Arbeit mit JSON-Daten. Douglas Crockford hat eine JavaScript-Implementierung für das Kodieren und Dekodieren von JSON geschrieben, die Sie unter http://jquery-cookbook.com/go/json finden. Lassen Sie uns das eben angeführte Objekt mit Hilfe der
JSON
-Bibliothek serialisieren:
var serializedJSON = JSON.stringify( messageObject );
    Jetzt haben wir eine String-Darstellung, die wir an unseren Server schicken können – zum Beispiel mit einer Ajax-Anfrage oder durch das Abschicken einer Form.

JSON parsen
    Problem
    Sie übergeben einen String mit JSON-Daten und müssen ihn in ein Objekt umwandeln.
    Lösung
(function($) {
    $(document).ready(function() {
     var serializedJSON = '{"title":"Hallo Welt!","body":"It\'s great to be
alive!"}';
     var message = JSON.parse( serializedJSON );
    });
})(jQuery);
    Diskussion
    Wie im vorigen Rezept besprochen kümmern wir uns jetzt um das Parsen oder Dekodieren eines JSON-Strings.
    ----
    Warning
    Manche der hier vorgestellten Vorgehensweisen sind unsicher und können zu potenziellen Sicherheitslücken führen. Verwenden Sie daher nur Daten aus vertrauenswürdigen Quellen.
    ----
    Der einfachste Ansatz beim Einlesen von JSON-Daten ist der Aufruf von
eval()
mit dem String. Beachten Sie, dass hier ernsthafte Sicherheitsprobleme auftreten können, da
eval()
die gesamte JavaScript-Funktionalität verarbeiten kann und sich nicht nur auf JSON beschränkt. Dies bedeutet, eine böswillige Person könnte Code ausführen lassen, der im JSON-String eingebettet ist. Wir empfehlen dieses Vorgehen daher nicht. Stattdessen wollen wir die
JSON
-Bibliothek von Douglas Crockford nutzen, die im vorigen Rezept erwähnt wurde. (Diese Bibliothek nutzt zwar auch
eval()
, aber sie führt eine Vorverarbeitung der Daten durch und sorgt so dafür, dass sie sicher sind.)
var serializedJSON = '{"title":"Hallo Welt!","body":"It\'s great to be alive!"}';
var message = JSON.parse( serializedJSON );
    Wir können jetzt mit unserem Message-Objekt wie mit jedem anderen JavaScript-Objekt arbeiten:
alert( "Neue Nachricht!\nTitle: " + message.title + "\nBody: " + message.body);
    Die
JSON
-Bibliothek sowie weitere Ressourcen zu JSON lassen sich unter http://jquery-cookbook.com/go/json herunterladen.

jQuery und JSONP verwenden
    Problem
    Sie wollen eine Liste von Bildern aus Flickrs öffentlichem Photo Stream übernehmen und die ersten drei Bilder anzeigen.
    Lösung
(function($) {
    $(document).ready(function() {
     var url = 'http://www.flickr.com/services/feeds/photos_public.gne?
     jsoncallback=?';
     var params = { format: 'json' };
     $.getJSON(url, params, function(json) {
     if ( json.items ) {
     $.each( json.items, function(i, n) {
     var item = json.items[i];
     $('')
     .append('')
     .appendTo('#photos');
     // Anzeigen der ersten 3 Bilder (Rückgabe von false
     // beendet die Schleife)
     return i < 2;
     });
     }
     });
    });
})(jQuery);
    Diskussion
    Die Frage der Sicherheit ist ein kritisches Thema, wenn man eine Website oder eine Anwendung erstellt – insbesondere seit dem Aufkommen von Ajax. Web-Browser nutzen eine Same Origin Policy für Anfragen, es können also nur Anfragen an die gleiche Domain der Seite oder an eine Subdomain gestellt werden. Eine Seite, die man unter http://www.example.com