RSS-Feed / XML über Cross-Domain laden
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
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 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
Diagramme zeichnen mit draw.io
Wie heißt es so schön: ein Bild sagt mehr als tausend Worte. Doch leider ist es oft auch wesentlich aufwändiger ein Bild zu erstellen, als einen Text zu schr...
Zielgruppen und Personas
Definition: Eine Zielgruppe definiert eine Ansammlung von Personen, die man mit seinen Marketingmaßnahmen erreichen möchte. Diese besteht aus potenziellen un...
Unterwegs programmieren lernen – App-Schmiede SoloLearn
Die App-Schmiede SoloLearn hat ein paar sehr schöne Apps als MBT (mobile based training) für einige Programmier- und Auszeichnungssprachen raus gebracht. Ich ...