HTML / CSS, JavaScript / DHTML

CrossDomain AJAX mit jQuery ( $.getJSON() )

WordPress Entwickler und Webdesigner

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.

Anzeige:

Bootstrap 4 Kurs

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.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Eine Antwort zu “CrossDomain AJAX mit jQuery ( $.getJSON() )”

  1. Zu simple gehalten.
    Du musst mehr schreiben.
    Du denkst die Leser müssen alles in winzig kleinen Schritten lernen, aber es dauert einfach sehr lange und im Endeffekt muss man sich später für Zusammenhänge wieder 100 andere Artikel durchlesen.
    Als normaler User geht man da schnell mal wo anders schauen.

    Schreib einfach mehr.
    Oder mach es wie ich und Stell dir ein {THEMA} ABC zusammen.

    Und dann solltest du noch auf Funktionen zurückgreifen die z.B. die JSON Ausgabe in PHP vereinfachen und später unverzichtbar sind, wie json_encode() oder json_decode() um aus einem Objekt/Array JSON zu machen oder umgekehrt.

    Mach doch mal ein Tutorial zur OOP in PHP.
    Ich möchte mal sehen, wie es bei dir aussieht.
    Vielleicht kann ich dir als PHP-Entwickler noch ein paar Tipps geben 😉 ( Hab sowieso nichts anderes zu tun )

    Und dann noch was ganz großes: Schau dir mal ExtJS an. Das ist in jedem Punkt besser als jQuery und im Endeffekt sogar einfacher, wobei man weniger Code braucht.

    Oder versuch es mal mit einem CSS Tutorial, für die wichtigsten Eigenschaften.
    Denk dir was aus. Wenn nichts raus kommt, egal. Lass dir Zeit

    G, J

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.