AJAX, JSON und Cross-Domain = JSONP

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 bei einem Flickr-Request

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.