RSS-Feed / XML über Cross-Domain laden

Veröffentlicht von Bastian - 18. Mai 2016

Möchte man einen bzw. ein XML Dokument auf einer Seite per JavaScript einlesen (Cross-Domain), um damit beispielsweise HTML-Container zu befüllen, so muss dieses XML Dokument unter der gleichen Domain abgelegt sein wie auch die Webseite aufgerufen wird. Beispielsweise www.example.com und www.example.com/xml-document.xml. http://xml.example.com/xml-document.xml ist nicht erlaubt. Hier springt sofort die Cross Domain Policy an und unterbindet

x-domain_problem-1

Hierfür muss ein Zwischenschritt eingebaut werden. Beispielsweise über eine entsprechende API wie die von Yahoo https://developer.yahoo.com/javascript/json.html. Diese API ermöglicht es JSON Dokumente anzusprechen und Daten darüber zu laden. Doch wir wollen ja eigentlich ein XML Dokument ansprechen. Hierfür müssen wir die Daten entsprechend umwandeln und anschließend über diesen Proxy abrufen. Um also einen solchen Aufruf durchzuführen werden zwei Schritte benötigt. Zunächst muss von unseren Script die API aufgerufen werden und gleichzeitig müssen die XML Inhalte als JSON umformatiert werden. Abruf über die Yahoo API: https://gist.github.com/Nowalon/6581887 Wandeln von XML in JSON: https://github.com/abdmob/x2js

Der Aufruf sieht dabei folgendermaßen aus:
jQuery(document).ready(function() {
     jQuery.ajax({
         type: 'GET',
         url: 'http://xml.example.com/xml-dokument.xml',
         success: function(result) {
             var x2js = new X2JS();
             var myXML = result.responseText;
             var JSONConvertedXML = x2js.xml_str2json(myXML);
             console.log(JSONConvertedXML);
         }
     }
 }

Es wird zunächst Asynchron über AJAX die URL http://xml.example.com/xml-dokument.xml abgerufen. Dieser Aufruf erhält dann als response Text den Inhalt des XML Dokuments. Nun wird ein Wandler initialisiert durch var x2js = new X2JS();.  Nun wird der response Text der Variable myXML zugewiesen. Durch var JSONConvertedXML = x2js.xml_str2json(myXML); wird nun der Wandler über die Yahoo API angesprochen und der Inhalt des response Textes in gewandelter Form über den Proxy und somit ohne Verletzung der Cross Domain Policy geliefert. Mit console.log(JSONConvertedXML); wird nun der Inhalt in der Console ausgegeben. Er wird hier als Objekt dargestellt. Auf die einzelnen Einträge kann nun per Pfad-Navigation zugegriffen werden. Navigiert wird hier durch einfache Aufrufe wie Beispielsweise JSONConvertedXML.plist.array.dict[i].string[2] oder ähnliche Aufrufe. Dies kommt dabei ganz darauf an wie die einzelnen Komponenten des XML Dokumentes benannt sind. Ein Beispiel für einen solchen Aufruf wäre es, zunächst zu prüfen ob ein Inhalt im XML Dokument (Array) geliefert wurde. Die Menge an Einträgen wird hierfür der Variable number zugewiesen und anschließend geprüft ob die Menge an Einträgen mehr als 0 (also 1 oder mehr) ist. Ist dies der Fall werden durch eine FOR-Schleife alle Einträge in eine Box geschrieben solange Einträge im Array vorhanden sind. Die einzelnen Einträge können sich im durch den o.g. aufgeführten console.log des Arrays angeschaut werden und die entsprechende Pfade für den Aufruf aufgestellt werden.

Beispiel:
var number = JSONConvertedXML.plist.array.dict.length;

if (number > 0 ) {
  for (i = 0; i <= number; i++) { 
     jQuery('#box').append('<div class="box">NAME: '
     +JSONConvertedXML.plist.array.dict[i].string[1]+'</div>')
  }
}

Doch wann wird solch ein Script / solch ein Umweg überhaupt benötigt? Weitere Informationen zur Cross Domain bzw. Same Domain Policy: https://de.wikipedia.org/wiki/Same-Origin-Policy same_origin             Das Bild wurde von der Tabelle https://de.wikipedia.org/wiki/Same-Origin-Policy#Vergleich_der_Herkunft_.28origin.29 entnommen.

Das könnte Dich auch interessieren

Virtual- & Augmented Reality

Dieser Eintrag soll einen kurzen Einblick über Virtual Reality und die damit verbundenen Technologien geben, doch zunächst einmal wollen wir die Frage klären...

Dashboards: Einheitliches Zielverständnis und Transparenz im ganzen Unternehmen

Schon immer war es für Sales-Manager oder Vertriebsmitarbeiter gängig, auf Basis definierter Ziele zu arbeiten. In der digitalen Transformation kommen nun auc...

Design Thinking – Wozu das ganze Denken?

Der Begriff Design Thinking wird oft genannt, wenn es um Innovation und nutzerzentrierte Digitalprodukte geht. Aber was genau ist damit gemeint und wann ist es ...