Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery: AJAX-Lösungen

Flickr-API nutzen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Am Beispiel der Flickr-API sehen Sie, wie Sie auf JSON-Daten zugreifen können, die auf einem anderen Server liegen. Hier lassen Sie sich aktuelle Fotos anzeigen.

Transkript

Am Beispiel von Flickr wollen wir uns ansehen, wie wir auf externe JSON Daten zugreifen können. Es sollen vier öffentliche Bilder von Flickr angezeigt werden und jeweils mit einem Link, sodass man auf das original Bild bei Flickr, dann auch kommt. Sehen wir uns an wie das Funktioniert. Also erst einmal muss ich natürlich die Adresse wissen und außerdem hier angeben "jsoncallback=?", nur durch diese Angabe weiß jQuery auch automatisch, dass es sich um JSONP handelt und es erzeugt dann automatisch eine Funktion mit dem angegebenen Namen und die wird dann aufgerufen beim "callback" oder hier beim "success". Sehen wir uns einmal an, wie dieses Format ausschaut. Also wenn ich diese Adresse angebe, dann sehen wir, ich habe hier Daten im JSON Format. Was mich jetzt interessiert, ist zum einen der "link", weil der führt dann zum Originalbild bei Flickr und zum anderen interessiert mich "media": { "m", das eigentliche Bild hier, also zum Beispiel eine jpg-Datei. Sehen wir uns dann an, wie das funktioniert. Also ich habe hier die URL spezifiziert, die gebe ich bei Ajax an. Ich muss außerdem noch mitteilen, dass ich als Format "json" haben möchte, sonst erhalte ich XML oder irgendetwas anderes. Das schreibt Flickr vor, dass ich das hier in dieser Form mache und das es "format" heißt. Ich gebe den Datentyp an und bestimme was im Erfolgsfall passieren soll und da durchlaufe ich dann die einzelnen Items und verwende dafür "each" und an dieser Stelle erstelle ich mir meine Links, indem ich auf "item.link" zugreife und innerhalb der Links sollen die Bilder stehen, die Pfade dafür erreiche ich über "item.media.m" und das Ganze soll an ein Element mit der ID "bilder" angehängt werden, dass gibt es hier oben. Ich möchte jetzt nicht beliebig viele Bilder, sondern genau genommen nur vier. Der interne Zähler hier beginnt bei Null, das heißt wenn dieser Zähler auf drei ist hab ich vier Bilder und dann verlasse ich dieses "each" wieder mit "return false". Sehen wir uns dann hier nochmal das Ergebnis an, wenn ich das aktualisiere kommen natürlich neue Bilder und ich kann bei "Element untersuchen", mir auch den erzeugten HTML Code ansehen. Sie sehen, dass sind immer diese "a" Elemente, mit den Bildern drinnen. Sie haben an einem Beispiel gesehen, wie man eine externe API nutzen kann, die JSON zurückliefert. Wichtig ist die Angabe von JSON "callback", in unserem Fall, mit "=?", weil dadurch jQuery automatisch weiß, dass es sich um JSONP als Format handelt und damit dann auch eine Funktion unter dem Namen erzeugt, die dann aufgerufen wird, beim "callback" oder hier beim "success".

jQuery: AJAX-Lösungen

Lernen Sie die Vorteile von Ajax bei der Webseitenerstellung kennen und nutzen Sie die verschiedenen Austauschformate in Ihren Projekten.

1 Std. 34 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!