Das Problem:

Letztens hatte ich das Problem, das ein Suggester Daten per Ajax von einer anderen Domain anfragen sollte. Da Ajax-Requests in der Regel nur innerhalb der gleichen Domain gestellt werden darf, und es sonst zu dem Cross-Domain-Problem kommt, brauchte ich eine entsprechende Lösung. Hier beschreibe ich einmal wie ich dieses Problem dank der JSONP-Logik gelöst habe.


JSONP als Lösung:

Im Prinzip arbeitet JSONP (das P steht für Padding) als Erweiterung zu JSON (JavaScript Object Notation) mit einem sogenannten Hash-Key. Hierbei übergibt man im Query-String einen Funktionsnamen als Wert eines wohldefinierten (zwischen Client und Server) Parameters.

Serverseitig wird dieser Funktionsname aus dem Query-String gelesen und (meist inkl. der angeforderten Daten) beim HTTP-Response an den Client zurückgesandt. Diesen Response können wir dann Clientseitig per Javscript auswerten. Die JSONP-Technik erlaubt so z.B. auch das Nachladen von Scripten inkl. OnLoad-Eventhandling.


Beispiel:

Als Basis meines Beispiels benutze ich das weit verbreitete JavaScript-Framework  jQuery, welches uns das ganze Ajax- und JSONP-Gehampel schon abnimmt.

Schauen wir uns also erst einmal das Serverseitige PHP-Script an. Dieses nimmt den Ajax-Request entgegen und liefert (falls gewünscht) die Daten per JSONP zurück. Wird die Anfrage ohne JSONP-Anforderung (Parameter jsonpCallbackFunction) gestellt, liefert das Script reines JSON zurück.

Als Beispiel erstellen wir die Datei getWordpressStats.php und lassen uns eine proprietäre WordPress-Statistik ausgeben:

Server-Script:

   // Die Dummy-Daten basteln
   $stats = array('artikelcount' => 100, 'wordcount' => 30000);

   // Erzeugung der JSON-Repräsentation unserer Dummy-Daten. Hier wird das
   // eigentliche JSON Objekt aus dem Array gebaut.
   $jsonData = json_encode($stats);

   $start = '';
   $end = '';	

   // ist es eine definierte JSONP-Anfrage?
   if (isset($_GET['jsonpCallbackFunction']))
   {
      // unser Funktionsnamen-Parameter lauetet "jsonpCallbackFunction"
      $callbackFunctionName = $_GET['jsonpCallbackFunction'];

      // in die ausgelesene Callback-Funktion einbetten;
      $start = $callbackFunctionName.'(';
      $end   = ')';
   }

   // Ausgabe (Response)
   echo $start.$jsonData.$end;

Als nächstes benötigen wir noch das Client-Script, welches die Ajax-Anfrage stellt und die Daten auswertet.

Client-Script:

$.ajax
(
    {
      // die Daten sollen als JSONP übermittelt werden.
      dataType: 'jsonp',

      // zwischen Client und Server definierter Funktionsnamen-Parameter
      jsonp: 'jsonpCallbackFunction',

      // Die URL zu obiger Testseite
      url: 'http://localhost/getWordpressStats.php',

      // Ausgabe der Daten per Ajax-Event 'success'
      success: function (stats)
               {
                  alert('Anzahl der Artikel: '+stats.artikelcount);
                  alert('Anzahl der Wörter: '+stats.wordcount);
               }
     }
 );

Das Script könnt Ihr hier live testen. Ich habe die Client-HTML extra auf meine Domain gewinnspiele-fuer-blogger.de gepackt um das ganze Crossdomain zu testen.

So, ich hoffe ich konnte das Thema AJAX-Request ohne Crossdomain-Problematik per JSONP ein wenig entmystifizieren. Viel Spaß beim Entwickeln.