Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

jQuery: AJAX-Lösungen

JSONP: Daten von anderen Servern holen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein Problem gibt es bei AJAX-Anfragen: Diese können Daten nur von demselben Server laden. Doch es gibt Abhilfen: Eine davon – JSONP – sehen Sie sich hier genauer an.

Transkript

Eine Einschränkung gibt es bei Ajax Anfragen. Sie können nur Daten von dem selben Server laden. Dafür gibt es Abhilfe und eine sehen wir uns an, nämlich JSONP, das steht für JSON mit Padding. Aber beginnen wir erst einmal am Anfang. Wir haben ein kleines Beispiel, wo wir eine JSON Datei lesen, die befindet sich hier auf dem selben Server und wir lassen die als Liste ausgeben, und das schaut dann so aus. Jetzt haben wir ein bisschen viel Code hier gehabt, um das schon ausgeben zu lassen. Wir wollen das einmal vereinfachen, einfach nur um zu Überprüfen, ob die Daten geladen werden können. Das hab ich jetzt hier, hier steht: "$.getJSON". Ich habe das Dokument angegeben und eine Callback-Funktion und lasse da das ausgeben, einfach nur um zu sehen, klappt das oder klappt das nicht. Gehen wir hier hin, aktualisieren dass und dann kann man in den Entwicklertools sich eben die Sachen anzeigen lassen und sieht es hat prinzipiell geklappt. Jetzt machen wir einmal folgendes. Derzeit befindet sich meine JavaScript Datei und mein JSON Dokument, auf dem selben Server. In diesem Beispiel jedoch hab ich dass geändert und habe die JSON Datei auf meinem Webserver hochgeladen. Die befindet sich wirklich dort, dass können wir uns anschauen, hier sehen Sie die befindet sich an dieser Stelle. Wenn ich das Script jetzt genau wie eben erstelle und Ausführen möchte, wird es nicht klappen. Wir kriegen hier eine schöne Meldung, die auch sagt was das Problem ist, Quellübergreifende (Cross-Origin) Anfrage blockiert. Es geht also nicht, dass ich die externe Ressource lese. Dafür gibt es jetzt, für dieses Problem, mehrere Lösungen. Weil grade wenn Sie irgendwelche APIs nutzten oder so, kann es ja sein, dass Sie eben JSON Daten von einer anderen Stelle brauchen und von einem anderen Server, als ihrem eigenen Server. Die Lösung heißt: JSONP, P steht für Padding und dass kann man so verstehen wie "Ummantelung" und dass ist dafür notwendig. Erst einmal hab ich mein JSON Dokument geändert, Sie sehen hier das Ursprüngliche und an dieser Stelle ist das Neue. Was hat sich geändert? Es gibt jetzt eine Funktion, die das Ganze umschließt. Die hab ich hier definiert. Die Sache ist nämlich die, dass ich sehr wohl Scripte von anderen Servern anfordern kann und das mache ich jetzt, in dem ich aus diesem JSON Dokument, sozusagen eine JAVAScript-Funktion mache und wenn ich diese dann aufrufe, als dataType: "jsonp" angebe, dann kann ich eine Funktion unter dem angegebenen Namen, wie auch hier definieren und bspw. das ausgeben lassen. Schauen wir uns erst einmal an, auf dem Webserver ist wirklich das Dokument jetzt vorhanden. Sie sehen hier JSON mit Ummantelung und dann kann ich das aufrufen und wenn wir uns das jetzt anschauen, dann klappt das wieder, obwohl es eben, wie gesagt, von einem anderen Webserver kommt. Also wie funktioniert JSONP im Grundprinzip. Das bedeutet, dass die JSON Datei ummantelt wird, von einer JavaScript-Funktion und diese JavaScript-Funktion rufen Sie dann direkt auf und das funktioniert und das funktioniert natürlich auch, weil hier der DataType "jsonp" angegeben ist. Eine Sache ist jetzt noch wichtig, wenn Sie eine URL bei Ajax Anfragen in jQuery erstellen, mit "callback=?" oder ähnlich, dann wird die Antwort automatisch von jQuery als JSONP interpretiert. Was sie gesehen haben, war jetzt eine Möglichkeit mit Daten von einem anderen Server umzugehen. Es gibt noch weitere Möglichkeiten, bspw. können Sie einen Proxy nutzen, oder auch es gibt CORS und das ermöglicht ihnen bestimmte Header in der Datei vom anderen Server zu definieren, es muss natürlich von diesem Server dort gemacht werden und dass ist dann eine weitere Möglichkeit damit diese Einschränkung umgangen wird. Wir haben uns in diesem Film JSONP angeschaut. Eine Möglichkeit, wie Sie von einem anderen Webserver JSON Daten laden können. Grundprinzip: Das Ganze wird in einer Funktion gekapselt, die dann die JSON Daten als Argument erhält und dann können Sie diese Funktion aufrufen und auf die Daten zugreifen.

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!