Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Die Ursache dieses Fehlers liegt in der Tatsache, dass Scripte nur vom gleichen Server geladen werden dürfen. Vom gleichen Server, mit der gleichen URL und dem gleichen Port. Das ist Sicherheit. Allerdings ist es möglich JavaScripte von jedem beliebigen Server zu inkludieren. Und hier kommt JSONP ins Spiel. jQuery erzeugt ein Script und erwartet eine angegebene Funktion, um anschließend das enthaltene JSON Objekt zurück zu geben. Genial! (Das P steht übrigens für Padding) So sieht die Ajaxabfrage aus:

$.ajax({
  dataType: 'jsonp',
  jsonp: 'jsonp_callback',
  url: 'http://www.interaktionsdesigner.de/stuff/json.php',
  success: function (j) {
    alert(j.response);
},
});

Wichtig ist neben dataType: ‘jsonp’ vorallem die Angabe jsonp: ‘FUNKTIONS_NAME’. Serverseitig braucht es auch noch eine kleine Veränderung, damit der JSON Code in eine Funktion gepackt wird:

<?
  $data = json_encode(Array("response" => "Thanks for the Fish!"));
  echo $_GET['jsonp_callback'] ."(". $data .");";
?>

Hier ist die zweite Zeile von besonderer Bedeutung und ermöglicht erst die ganze weltweite Abfragemöglichkeit. Aber: Die Abfrage funktioniert nur mit der Datenübertragungsmethode GET! Es wird ja ein Script eingebunden und an dieses kann keine POST Daten übersendet werden. Kurz und knapp hat es Remy Sharp beschrieben, den ich seit einiger Zeit mit seiner aktuellen Version von Visualjquery ständig in meiner Tableiste habe.