CrossDomain AJAX mit jQuery ( $.getJSON() )

Es gibt verschiedene Anwendungsfälle in denen es nötig ist Daten via AJAX von einer externe Webseite zu laden, z.B. für die Ausgabe der letzten Tweets einer Twitter-Timeline. Am einfachsten lässt sich dies über jQuery mit der $.getJSON() Funktion lösen. Für diejenigen, die bis dato noch nicht mit dem JSON Datenformat gearbeitet haben, empfehle ich sich kurz einen Überblick in der Wikipedia zu verschaffen: JavaScript Object Notation (JSON).

In diesem Artikel möchte ich euch zum einen zeigen, wie ihr die letzten Tweets eurer Timeline auslesen könnt und natürlich wie ihr eure eigene JSON Datei für die jQuery $.getJSON() Funktion erstellt.

Letzte Tweets auslesen …

Die URL zur JSON Datei in der die letzten Tweets enthalten sind lautet wie folgt: https://twitter.com/status/user_timeline/Webdesigncast.json?count=5 – Webdesigncast muss entsprechend durch euren Twitter-Usernamen ausgetauscht werden und count=5 gibt die Menge der zuladenden Tweets an. Um dieses Beispiel besser verstehen zu können, solltet ihr euch den Inhalt hinter der URL auch unbedingt einmal anschauen.

Der JavaScript / jQuery Code für eine entsprechende Abfrage würde nun wie folgt aussehen:

<script>
$.getJSON('https://twitter.com/status/user_timeline/Webdesigncast.json?callback=?', { count: 5 }, function(json){
    alert(json[0].text);
});
</script>

Extrem wichtig ist an dieser Stelle der GET Parameter callback=?, wenn dieser fehlt, wird eure gesamte Abfrage scheitern. Mit json[0].text wird der letzte Tweet ausgegeben, mit json[1].text der vorletzte usw.

Diese Daten könnt ihr nun nach Lust und Laune weiterverarbeiten.

CrossDomain JSON selber erstellen

Solltet ihr selber von einer eurer Domains auf eine andere Domain zugreifen wollen, die ebenfalls euch gehört, so könnt ihr eure JSON Daten wie folgt ausgeben:

Bei folgendem Script handelt es sich um ein PHP-Script, dass auch ganz normal als .php Datei abgespeichert werden muss:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: application/javascript; charset=utf-8');
 
echo( $_GET['callback'].'({ "titel": "Ausgabe eines Titels", "text": "Lorem ipsum dolor sit amet,..."});' );
?>

Auch hier sind die beiden Datei Header und die Ausgabe des $_GET[‚callback‘] Wertes sehr wichtig, damit das ganze funktioniert. Die eigentlichen JSON Daten könnt ihr natürlich euren Bedürfnissen anpassen.

Ich hoffe ich konnte dem einen oder anderen mit diesem kleinen Tutorial weiterhelfen.