Ajaxer

Javascript punks

JSON-P mit jQuery

| 1 Kommentar

Viele Webapplikationen laden Daten per JavaScript im JSON-Format von einem Server in den Browser, um sie dort darzustellen oder zu verarbeiten. Ein solcher Beispieldatensatz im JSON-Format könnte wie folgt aussehen:


{
    “cities”: [”Hamburg”, “New-York”, “Tokio”]
}

Ein Webbrowser lässt allerdings nicht zu, dass ein Script Daten von einer anderen Domain lädt als der, von der die Seite, in die das Script eingebettet wurde, geladen wurde. JavaScript hat also keinen Zugriff auf Daten, die von einer anderen Domain kommen. Diese Einschränkung ist ein Security-Feature des Browsers und als Same Origin Policy bekannt.

Oft ist es aber nötig, Daten von einer fremden Domain oder einer eigenen Subdomain zu ermitteln. Die saubere technische Lösung für dieses Problem ist Cross Origin Resource Sharing. Beim Cross Origin Resource Sharing werden Berechtigungen über HTTP-Header gesteuert. Leider funktioniert Cross Origin Resource Sharing nicht mit Legacy-Browsern, die noch häufig anzutreffen sind.

Ein Workaround, der in jedem Browser funktioniert, ist JSON-P: JSON with Padding. Ein Script darf selbst zwar keine Daten von einer fremden Domain anfordern, aber es darf einen Script-Tag generieren, der ein weiteres JavaScript von dieser fremden Domain lädt und direkt ausführt. Diesem nachgeladenen JavaScript übergibt man als GET-Parameter den Namen einer Callback-Funktion, die von dem nachgeladenen JavaScript ausgeführt werden sollte. Per Konvention trägt dieser GET-Parameter den Namen „_jsonp“.

Das so eingebundene Script muss dynamisch auf dem Server in einer Weise erzeugt werden, dass es die übergebene Callback-Funktion aufruft, sobald es vom Browser geladen wurde. Der Callback-Funktion werden in der Regel die Daten übergeben, die man ansonsten direkt als JSON-Objekt angefragt hätte:


jsonpCallback (

  {

    “cities”: [”Hamburg”, “New-York”, “Tokio”]

  }

);

Die Callback-Funktion wird von dem Script, das eigentlich die Daten anfordern wollte, bereitgestellt. So werden Daten von einer fremden Domain per JSON-P geladen. Front-End-Libraries wie jQuery stellen eine automatisch generierte Callback-Funktion bereit. Daher muss sich der Entwickler nicht um das Schreiben dieser Callback-Funktion kümmern.


return $.ajax(
 {

  type: “GET”,

  url: “http://my.otherdomain.de/rest-ws/myservice/” + data,

  error: errorcallback,

  success: callback,

  dataType: “jsonp”,

  jsonp: “_jsonp”,

  jsonpCallback: “ jsonpCallback “

 }
);

Auf Client-Seite stellt JSON-P also kein Problem dar und wird von gängigen JavaScript-Bibliotheken unterstützt.

Wie man auf einem Java Enterprise Server mit dem Spring Framework und CXF einen JSON-P-Provider realiseren kann, lässt sich auf dem Holisticon-Blog nachlesen.

Dies ist ein Crosspost vom SimonOx-Blog.

Gesucht und gefunden durch:

  • jquery jsonp callback
  • json jquery
  • Cross-Origin Resource Sharing
  • jquery json
  • daten von anderer Domain lesen jquery

Autor: Oliver Ochs

Oliver Ochs ist bei der Management- und IT-Unternehmensberatung Holisticon AG in Hamburg tätig. Er beschäftigte sich in den letzten Jahren mit Content Management Systemen, Webframeworks und Portalen auf Java-Basis. In diesem Umfeld arbeitete er als Entwickler, Architekt und Projektleiter. Er hat darüber hinaus Erfahrungen in Schulungen und Coachings. In letzter Zeit setzte er einen seiner Schwerpunkte auch auf Web- Application-Security, Identity-Management und neue Seiten von JavaScript. Ein anderer persönlicher Schwerpunkt sind agile Methoden und Prozesse

Ein Kommentar

  1. Great weblog here! Also your site loads up very fast! What
    host are you the use of? Can I am getting your associate link in your host?
    I wish my site loaded up as quickly as yours lol

Schreib einen Kommentar

Pflichtfelder sind mit * markiert.