ArticleJSONP

Eine Sicherheitsbeschränkung in Webbrowsern besagt, dass AJAX-Aufrufe nur zu dem Server erfolgen dürfen von dem auch die Webseite geladen wurde. Abhilfe schafft da JSONP (“JSON with padding”, siehe http://en.wikipedia.org/wiki/JSON#JSONP). Aber wie funktioniert das?

Während AJAX-Aufrufe auf die originale Domain beschränkt sind dürfen mit dem Script-Tag Javascriptdateien von beliebigen Domains geladen werden. Beispielsweise kann man JQuery aus einem CDN laden oder das Google-Analytics-Skript von Google-Domains laden. Und genau hier liegt die Lösung.

Der AJAX-Aufruf erfolgt also durch ein dynamisch eingefügtes Script-Tag in dem das src-Attribut die AJAX-URL enthält. Die als Ergebnis gelieferte JSON-Struktur wird allerdings nirgendwo ausgewertet. Hierfür muss der angesprochene Server etwas mithelfen, in dem es die JSON-Struktur in einen Methodenaufruf einbettet.

Am Beispiel von Flickr sieht die Antwort dann wie folgt aus:

JSONP von Flickr

Hier wird die JSON-Struktur als Parameter für die Methode jsonp1283328243343 angegeben. Welchen Methodennamen der Server angibt kann man beim AJAX-Aufruf als Parameter angeben, in der jeweiligen API-Beschreibung sollte man den Parameter finden. Bei Flickr ist es beispielsweise jsoncallback oder bei Delicious ist es callback.

Wer JQuery für AJAX-Aufrufe einsetzt hat es einfach, denn die Ajax-Methode von JQuery http://api.jquery.com/jQuery.ajax/ unterstützt bereits JSONP.

Keywords

JavascriptJSONAJAX
Stefan Urbansky
HxCode
Dr.-Ing. Stefan Urbansky

Sie interessieren sich für unsere Leistungen oder wollen ein eigenes Projekt starten?