[JS] XML mit Javascript von externem Server auslesen

Hansi05 · 30.08.2010

Hallo,

wie im Titel schon steht, bin ich gerade mit meinen sehr beschränkten Kenntnissen dabei eine XML Datei mithilfe von Javascript auszulesen.
Ich habe lange bei Google gesucht und dann auch was gefunden, was ich ziemlich einfach auf meine Bedürfnisse anpassen konnte.
Ich habe die XML zunächst auf meinem Server bzw. auf meinem Laptop lokal gespeichert und es dann auch geschafft diese mit JS auszulesen.
Als ich das zum Laufen bekommen habe, habe ich dann die originale Datei aus dem Internet in mein JS eingefügt. Nachdem ich das gemacht habe, wird mir leider nicht das gewünschte Ergebnis geliefert.
Anfangs dachte ich, dass es am "http" oder so was liegt, dann habe ich aber den vollständigen Link der XML Datei die auf dem selben Server wie die HMTL liegt eingetragen und es hat funktioniert.
Über Google konnte ich bis jetzt leider kein anderes Script zum Auslesen finden, mit dem ich zurecht komme.

Hier mal mein Script:

Code:

<span id="ausgabeelement"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Wenn es sich bei dem vom Benutzer verwendeten Browser
// um einen Internet Explorer handelt, wird das Request-Objekt
// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.
var httpRequestObject = (navigator.appName == "Microsoft Inter<span id="ausgabeelement"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Wenn es sich bei dem vom Benutzer verwendeten Browser
// um einen Internet Explorer handelt, wird das Request-Objekt
// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.
var httpRequestObject = (navigator.appName == "Microsoft Internet Explorer") ? 
      new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();
// Verbindung per GET öffnen und die XML-Datei abrufen.
[COLOR=Red]httpRequestObject.open ('GET', 'http://www.fremderserver.de/datei_die_ich_auslesen_will.xml');[/COLOR]
// Event-Handler-Funktion handleReadyStateChange mit dem readystatechange-Event
// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich
// der Status der Abfrage ändert.
httpRequestObject.onreadystatechange = handleReadyStateChange;
// Als nächstes wird die Anfrage an den Server gesendet.
httpRequestObject.send (null);

// Event-Handler, der aufgerufen wird, wenn Statusänderungen beim Request-Objekt auftreten
function handleReadyStateChange () {
  // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?
  // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber
  // es wird nicht auf die Stati reagiert.
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    // Request ist abgeschlossen und alle Daten sind angekommen
    // => Empfangene XML-Daten im Ausgabeelement ausgeben
    xml_daten_ausgeben (httpRequestObject.responseXML);
  }
}

// Funktion zur formatierten Ausgabe der empfangenen Daten
function xml_daten_ausgeben (response) {
  // Neues HTML-Element vom Typ Table erzeugen
  var t = document.createElement ('table');
  // Tabellenzeile für die Spaltenüberschriften erzeugen
  var tr = document.createElement ('tr');
  // Überschriften Fett ausgeben
  tr.style.fontWeight = 'bold';
  // Spalten für die Tabellenüberschriften generieren
  var td = document.createElement ('td');
  // Textknoten mit der Überschrift in die Spalte einfügen
  td.appendChild (document.createTextNode ('Titel'));
  // und das Spaltenelement in die Tabellenzeile einhängen.
  tr.appendChild (td);
  // Knoten klonen, Text darin ändern und den geklonten Knoten
  // einfügen (zweimal mit veränderter Überschrift).
  td = td.*****Node (true);
  td.firstChild.nodeValue = 'Link';
  tr.appendChild (td);
  td = td.*****Node (true);
  td.firstChild.nodeValue = 'Nachricht';
  tr.appendChild (td);
  // Tabellenzeile mit den Überschriften in Tabelle einhängen.
  t.appendChild (tr);

  // Elemente aus der XML-Datei ermitteln, die unter dem Tagnamen
  // person gespeichert sind.
  var personen = response.getElementsByTagName ('item');
  // Alle gefundenen Elemente nacheinander abarbeiten.
  for (var i = 0; i < personen.length; i++) {
    // Jedes gefundene Element in einer eigenen Tabellenzeile darstellen
    tr = document.createElement ('tr');
    td = td.*****Node (true);
    // Attribut name des Datensatzes auslesen und in der ersten
    // Tabellenspalte ausgeben.
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('title')[0].firstChild.nodeValue;
    tr.appendChild (td);
    td = td.*****Node (true);
    // In die zweite Spalte kommt das Attribut alter
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('link')[0].firstChild.nodeValue;
    tr.appendChild (td);
    td = td.*****Node (true);
    // Die dritte Spalte wird mit dem Inhalt des Kindelements info gefüllt.
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('description')[0].firstChild.nodeValue;
    tr.appendChild (td);
    // Neue Tabellenzeile in die Tabelle einfügen.
    t.appendChild (tr);
  }
  // Tabelle als Kindelement an das SPAN-Element anhängen
  document.getElementById ('ausgabeelement').appendChild (t);
}
// -->
</script>net Explorer") ? 
      new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();
// Verbindung per GET öffnen und die XML-Datei abrufen.
httpRequestObject.open ('GET', 'test2.xml');
// Event-Handler-Funktion handleReadyStateChange mit dem readystatechange-Event
// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich
// der Status der Abfrage ändert.
httpRequestObject.onreadystatechange = handleReadyStateChange;
// Als nächstes wird die Anfrage an den Server gesendet.
httpRequestObject.send (null);

// Event-Handler, der aufgerufen wird, wenn Statusänderungen beim Request-Objekt auftreten
function handleReadyStateChange () {
  // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?
  // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber
  // es wird nicht auf die Stati reagiert.
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    // Request ist abgeschlossen und alle Daten sind angekommen
    // => Empfangene XML-Daten im Ausgabeelement ausgeben
    xml_daten_ausgeben (httpRequestObject.responseXML);
  }
}

// Funktion zur formatierten Ausgabe der empfangenen Daten
function xml_daten_ausgeben (response) {
  // Neues HTML-Element vom Typ Table erzeugen
  var t = document.createElement ('table');
  // Tabellenzeile für die Spaltenüberschriften erzeugen
  var tr = document.createElement ('tr');
  // Überschriften Fett ausgeben
  tr.style.fontWeight = 'bold';
  // Spalten für die Tabellenüberschriften generieren
  var td = document.createElement ('td');
  // Textknoten mit der Überschrift in die Spalte einfügen
  td.appendChild (document.createTextNode ('Titel'));
  // und das Spaltenelement in die Tabellenzeile einhängen.
  tr.appendChild (td);
  // Knoten klonen, Text darin ändern und den geklonten Knoten
  // einfügen (zweimal mit veränderter Überschrift).
  td = td.*****Node (true);
  td.firstChild.nodeValue = 'Link';
  tr.appendChild (td);
  td = td.*****Node (true);
  td.firstChild.nodeValue = 'Nachricht';
  tr.appendChild (td);
  // Tabellenzeile mit den Überschriften in Tabelle einhängen.
  t.appendChild (tr);

  // Elemente aus der XML-Datei ermitteln, die unter dem Tagnamen
  // person gespeichert sind.
  var personen = response.getElementsByTagName ('item');
  // Alle gefundenen Elemente nacheinander abarbeiten.
  for (var i = 0; i < personen.length; i++) {
    // Jedes gefundene Element in einer eigenen Tabellenzeile darstellen
    tr = document.createElement ('tr');
    td = td.*****Node (true);
    // Attribut name des Datensatzes auslesen und in der ersten
    // Tabellenspalte ausgeben.
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('title')[0].firstChild.nodeValue;
    tr.appendChild (td);
    td = td.*****Node (true);
    // In die zweite Spalte kommt das Attribut alter
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('link')[0].firstChild.nodeValue;
    tr.appendChild (td);
    td = td.*****Node (true);
    // Die dritte Spalte wird mit dem Inhalt des Kindelements info gefüllt.
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('description')[0].firstChild.nodeValue;
    tr.appendChild (td);
    // Neue Tabellenzeile in die Tabelle einfügen.
    t.appendChild (tr);
  }
  // Tabelle als Kindelement an das SPAN-Element anhängen
  document.getElementById ('ausgabeelement').appendChild (t);
}
// -->
</script>

Ich hab mal bewusst alle Kommentare mitgepostet, damit ihr es besser versteht. Wenn es zu unübersichtlich ist, poste ich auch gerne noch mal eine Version ohne Kommentare

Ich hoffe ihr habt mein Problem verstanden, und könnt mir helfen

mfg

pluspiano · 30.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Dein XML ist nun auf Deinem Server mit einem eindeutigen Pfad. Diesen kannst Du relativ oder absolut angeben. Vllt. ist das ja die Baustelle :uhm:

Hansi05 · 30.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Ich weiß nicht ob ich dich, oder du mich falsch verstanden hast bzw ich den Link nicht so ganz verstehe.
Aber die XML liegt nicht auf meinem Server um das noch mal zu sagen.

Ansonsten komme ich mit dem Link leider nicht weiter, da ich nicht genau weiß wo ich eine Anpassung in meinem Script vornehmen soll :eek:

EDIT: Hab mein oben geposteten Code noch mal angepasst, sodass es jetzt vllt eindeutiger ist

sokie · 30.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

ein einfacher Trick um das hinzubekommen könnte zB so aussehen:
du legst auf deinem eigenen Space eine php Datei an, in der du dir die xml der anderen domain holst.

PHP:

<?php
echo file_get_contents("http://fremde.domain.org/diexmldatei.xml");
?>

und verwendest diese Datei in deinem httpRequest.
und ja, das ist so, dass das mit dateien ausserhalb der "selben Domain" nicht funktioniert.

Wenn man diese xml Daten allerdings konsequenterweise schon mal mit den "boardmitteln" von php für die Ausgabe vorbereitet, wird man vielleicht feststellen, dass die allermeisten superwebzwopunktnullAJAX Requests überhaupt eher ne Modesache als ein tatsächliches Feature sind.

Hansi05 · 30.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Leider fällt PHP für mein Vorhaben aus.

Aber wenn es so nicht geht, dann habe ich wohl Pech gehabt

Vielen Dank

saila · 30.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Wieso fällt php für dich aus?

Es dürfte ja wohl kein Problem darstellen, ein kleines php-Script in eine php-Datei zu setzen und diese per ajax anzusprechen, um das gewünschte xml letztlich auszuliefern.

Hansi05 · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Weil das als kleine App für mein Telefon gedacht ist

saila · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Wenn du deinem JS evtl. noch einen dataType (xml) mitsenden kannst oder den dataType von jQuery-Framework nachbilden kannst und die entsprechenden Parameter mitübergeben werden, könnte die Antwort evtl. schon besser aussehen

pluspiano · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Hansi05 schrieb:
Weil das als kleine App für mein Telefon gedacht ist

Wieso sagst Du das nicht gleich? Trotzdem gibt es diesen Weg: Wenn Du einen eigenen Webspace hast, zieh dir dort diese ominöse xml (in aktualisierten Raten) hin, und browse (passwortgeschützt) mit JS, basierend auf PHP (BEACHTE: in der selben Domain) wie es Dir gefällt.

Hansi05 · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

saila schrieb:
Wenn du deinem JS evtl. noch einen dataType (xml) mitsenden kannst oder den dataType von jQuery-Framework nachbilden kannst und die entsprechenden Parameter mitübergeben werden, könnte die Antwort evtl. schon besser aussehen

Ich verstehe leider nicht viel mehr als Bahnhof

pluspiano schrieb:
Wieso sagst Du das nicht gleich? Trotzdem gibt es diesen Weg: Wenn Du einen eigenen Webspace hast, zieh dir dort diese ominöse xml (in aktualisierten Raten) hin, und browse (passwortgeschützt) mit JS, basierend auf PHP (BEACHTE: in der selben Domain) wie es Dir gefällt.

Habs jetzt nicht für nötig gehalten :eek:

Ja, aber dann kann ich mit der App die ich mir basteln will immer noch nicht drauf zugreifen, da mein JS ja auf dem Handy liegt und ich dann zu einem Server verbinden muss. Im Endeffekt ist das ja das selbe wie wenn ich das JS auf meinem Webspace oder auf dem Handy habe.
Oder verstehe ich dich gerade falsch?
Das würde ja an sich soweit funken, wenn ich mit dem Browser auf die XML zugreifen will. Sprich XML per PHP auf meinen Space laden und dann mit JS formatieren. Aber ich will die Daten halt gleich in der App haben ohne erst den Browser vom Telefon zu öffnen

pluspiano · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Zunächst. Mit meinem Handy gehe ich grundsätzlich nicht ins Inet. Ich bin doch nicht blöd. :lol:

Aber: Vorausgesetzt, dass Du deinen Webspace hast, alles soweit richtig gemacht hast, pieps Du Dich via Handy in die (hoffentlich) passwortgeschützte XML-Seite auf deiner HP ein. Die Html mitsamt JS AJAX wird dann auf Dein Handy übertragen. Du schickst deine Anfragen an Deinen Server. Er wird Dir geben, was Du suchst, wie auf Deinem localhost geschehen.

Das AJAX funktioniert aber nur dann, wenn es in der selben Domain zuhause ist wie das XML. Deshalb baue dir die Brücke des eigenen Webspace.

Wenn es so ist, dass statische Daten vorliegen, werte sie doch an deinem PC aus und sende die Auswertung ins Handy. Ich ging davon aus, dass es dynamische Daten sind. Daten, die sich chatroomartig erneuern.

Hansi05 · 31.08.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Ich glaube, ich sollte das lieber lassen, raff iwie nicht so recht wie du das meinst ;>

Danke erst mal

Frit · 03.09.2010

AW: [JS] XML mit Javascript von externem Server auslesen

Die Antwort ist recht einfach: Javascripts laufen nicht serverübergreifend, alleine schon aus Sicherheitsgründen. Das ist Prinzip.