JSONP Beispiel in JQuery und in Vanilla JavaScript

erstellt am: 10.03.2016 | Kategorien: Webentwicklung | Schlagworte: Cross-Domain • Javascript • Jquery • JSONP • PHP

JSONP ist eine der ältesten Möglichkeiten Daten über verschiedene Domaingrenzen hinweg auszutauschen und die Einschränkungen die bei einem AJAX Request hinsichtlich Same-Origin-Policy bestehen würden zu umgehen.
Man braucht auf der Serverseite ein Script, dass JSON Daten mit einem Funktionsaufruf umhüllt. Z.B. müsste statt {some-key:'some-value'} callbackname({some-key:'some-value'}) vom Server zurückgegeben werden. Und diese Antwort wird vom Client über ein Script-Tag abgerufen. Also ein Script Tag mit der dem Scriptaufruf als Quelle. Natürlich muss nun die Funktion callbackname am Client vorhanden sein und die übergebenen Daten auswerten.
Warum funktioniert das Domainübergreifend? Der Grund ist, dass das Script-Tag nicht der Same-Origin-Policy unterliegt – sonst könnte man z.B. auch JQuery nicht von Google einbinden.
Nun ein Beispiel wie das funktioniert:

Serverseitig

Ein PHP-Script kann recht einfach aussehen und den Wert des Parameters callback als Funktionsaufruf um die JSON Daten herumlegen und alles als JavaScript zurückgeben. Bitte aber folgendes nie in Produktion einsetzen, da der Parameterwert nicht gefiltert ist und somit z.B. XSS Angriffe möglich sind:

header('content-type: application/javascript; charset=utf-8');
$data = array('some-key' => 'some-value');
echo $_GET['callback'] . '('.json_encode($data).')';

Ein bisschen ausgefeilteres Script findet sich hier: https://gist.github.com/mathiasbynens/5547352

Clientseitig

Vanilla JavaScript

In diesem Fall wird dynamisch ein Script-Tag mit der URL zum PHP Script eingefügt. Dann braucht man noch eine Funktion die genauso heißt wie der Wert des Callbacks (hier: handleJsonpResponse’) und die Daten weiterverarbeitet. Diese Funktion muss immer als Argument die JSON Daten entgegennehmen.

window.onload = init;
function init() {
   getJsonp('https://www.ulrischa.de/jsonp_server_simple.php?callback=handleJsonpResponse');
}
function getJsonp(url){
   var scriptElement = document.createElement("script");
   scriptElement.setAttribute("src", url);
   scriptElement.setAttribute("id", "jsonp");
   var head = document.getElementsByTagName("head")[0];
   head.appendChild(scriptElement);
}
function handleJsonpResponse(jsonpdata){
   alert(JSON.stringify(jsonpdata));
}

JQuery

Mit Jquery geht alles wieder recht einfach. Die Datenverarbeitung erfolgt wie beim AJAX Request auch über eine Funktion, die der Success Eigenschaft zugewiesen wird.

var url = 'https://www.ulrischa.de/jsonp_server.php?callback=?';
$.ajax({
   type: 'GET',
   url: url,
   async: false,
   jsonp: 'callback',
   jsonpCallback: 'handleJsonpResponse',
   contentType: "application/json",
   dataType: 'jsonp',
   success: function(json) { 
      alert(JSON.stringify(json));
   },
   error: function(e) {
      alert(e.message);
   }
});

Der Parametername für die URL wird über die Eigenschaft jsonp angegeben. jsonpCallback kann man weglassen. Hier generiert Jquery automatisch einen Namen.

Als erster einen Kommentar schreiben.