PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
PHP, Javascript, jQuery, Ajax, nodeJS, MySQL...
[JS] XML mit Javascript von externem Server auslesen
Beitrag
<blockquote data-quote="Hansi05" data-source="post: 1555916" data-attributes="member: 32607"><p>Hallo,</p><p></p><p>wie im Titel schon steht, bin ich gerade mit meinen sehr beschränkten Kenntnissen dabei eine XML Datei mithilfe von Javascript auszulesen.</p><p>Ich habe lange bei Google gesucht und dann auch was gefunden, was ich ziemlich einfach auf meine Bedürfnisse anpassen konnte.</p><p>Ich habe die XML zunächst auf meinem Server bzw. auf meinem Laptop lokal gespeichert und es dann auch geschafft diese mit JS auszulesen.</p><p>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.</p><p>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.</p><p>Über Google konnte ich bis jetzt leider kein anderes Script zum Auslesen finden, mit dem ich zurecht komme.</p><p></p><p>Hier mal mein Script:</p><p></p><p>[code]<span id="ausgabeelement"></span></p><p><script language="javascript" type="text/javascript"></p><p><!-- // JavaScript-Bereich für ältere Browser auskommentieren</p><p>// Wenn es sich bei dem vom Benutzer verwendeten Browser</p><p>// um einen Internet Explorer handelt, wird das Request-Objekt</p><p>// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.</p><p>var httpRequestObject = (navigator.appName == "Microsoft Inter<span id="ausgabeelement"></span></p><p><script language="javascript" type="text/javascript"></p><p><!-- // JavaScript-Bereich für ältere Browser auskommentieren</p><p>// Wenn es sich bei dem vom Benutzer verwendeten Browser</p><p>// um einen Internet Explorer handelt, wird das Request-Objekt</p><p>// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.</p><p>var httpRequestObject = (navigator.appName == "Microsoft Internet Explorer") ? </p><p> new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();</p><p>// Verbindung per GET öffnen und die XML-Datei abrufen.</p><p>[COLOR=Red]httpRequestObject.open ('GET', 'http://www.fremderserver.de/datei_die_ich_auslesen_will.xml');[/COLOR]</p><p>// Event-Handler-Funktion handleReadyStateChange mit dem readystatechange-Event</p><p>// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich</p><p>// der Status der Abfrage ändert.</p><p>httpRequestObject.onreadystatechange = handleReadyStateChange;</p><p>// Als nächstes wird die Anfrage an den Server gesendet.</p><p>httpRequestObject.send (null);</p><p></p><p>// Event-Handler, der aufgerufen wird, wenn Statusänderungen beim Request-Objekt auftreten</p><p>function handleReadyStateChange () {</p><p> // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?</p><p> // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber</p><p> // es wird nicht auf die Stati reagiert.</p><p> if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {</p><p> // Request ist abgeschlossen und alle Daten sind angekommen</p><p> // => Empfangene XML-Daten im Ausgabeelement ausgeben</p><p> xml_daten_ausgeben (httpRequestObject.responseXML);</p><p> }</p><p>}</p><p></p><p>// Funktion zur formatierten Ausgabe der empfangenen Daten</p><p>function xml_daten_ausgeben (response) {</p><p> // Neues HTML-Element vom Typ Table erzeugen</p><p> var t = document.createElement ('table');</p><p> // Tabellenzeile für die Spaltenüberschriften erzeugen</p><p> var tr = document.createElement ('tr');</p><p> // Überschriften Fett ausgeben</p><p> tr.style.fontWeight = 'bold';</p><p> // Spalten für die Tabellenüberschriften generieren</p><p> var td = document.createElement ('td');</p><p> // Textknoten mit der Überschrift in die Spalte einfügen</p><p> td.appendChild (document.createTextNode ('Titel'));</p><p> // und das Spaltenelement in die Tabellenzeile einhängen.</p><p> tr.appendChild (td);</p><p> // Knoten klonen, Text darin ändern und den geklonten Knoten</p><p> // einfügen (zweimal mit veränderter Überschrift).</p><p> td = td.*****Node (true);</p><p> td.firstChild.nodeValue = 'Link';</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> td.firstChild.nodeValue = 'Nachricht';</p><p> tr.appendChild (td);</p><p> // Tabellenzeile mit den Überschriften in Tabelle einhängen.</p><p> t.appendChild (tr);</p><p></p><p> // Elemente aus der XML-Datei ermitteln, die unter dem Tagnamen</p><p> // person gespeichert sind.</p><p> var personen = response.getElementsByTagName ('item');</p><p> // Alle gefundenen Elemente nacheinander abarbeiten.</p><p> for (var i = 0; i < personen.length; i++) {</p><p> // Jedes gefundene Element in einer eigenen Tabellenzeile darstellen</p><p> tr = document.createElement ('tr');</p><p> td = td.*****Node (true);</p><p> // Attribut name des Datensatzes auslesen und in der ersten</p><p> // Tabellenspalte ausgeben.</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('title')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> // In die zweite Spalte kommt das Attribut alter</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('link')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> // Die dritte Spalte wird mit dem Inhalt des Kindelements info gefüllt.</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('description')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> // Neue Tabellenzeile in die Tabelle einfügen.</p><p> t.appendChild (tr);</p><p> }</p><p> // Tabelle als Kindelement an das SPAN-Element anhängen</p><p> document.getElementById ('ausgabeelement').appendChild (t);</p><p>}</p><p>// --></p><p></script>net Explorer") ? </p><p> new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();</p><p>// Verbindung per GET öffnen und die XML-Datei abrufen.</p><p>httpRequestObject.open ('GET', 'test2.xml');</p><p>// Event-Handler-Funktion handleReadyStateChange mit dem readystatechange-Event</p><p>// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich</p><p>// der Status der Abfrage ändert.</p><p>httpRequestObject.onreadystatechange = handleReadyStateChange;</p><p>// Als nächstes wird die Anfrage an den Server gesendet.</p><p>httpRequestObject.send (null);</p><p></p><p>// Event-Handler, der aufgerufen wird, wenn Statusänderungen beim Request-Objekt auftreten</p><p>function handleReadyStateChange () {</p><p> // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?</p><p> // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber</p><p> // es wird nicht auf die Stati reagiert.</p><p> if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {</p><p> // Request ist abgeschlossen und alle Daten sind angekommen</p><p> // => Empfangene XML-Daten im Ausgabeelement ausgeben</p><p> xml_daten_ausgeben (httpRequestObject.responseXML);</p><p> }</p><p>}</p><p></p><p>// Funktion zur formatierten Ausgabe der empfangenen Daten</p><p>function xml_daten_ausgeben (response) {</p><p> // Neues HTML-Element vom Typ Table erzeugen</p><p> var t = document.createElement ('table');</p><p> // Tabellenzeile für die Spaltenüberschriften erzeugen</p><p> var tr = document.createElement ('tr');</p><p> // Überschriften Fett ausgeben</p><p> tr.style.fontWeight = 'bold';</p><p> // Spalten für die Tabellenüberschriften generieren</p><p> var td = document.createElement ('td');</p><p> // Textknoten mit der Überschrift in die Spalte einfügen</p><p> td.appendChild (document.createTextNode ('Titel'));</p><p> // und das Spaltenelement in die Tabellenzeile einhängen.</p><p> tr.appendChild (td);</p><p> // Knoten klonen, Text darin ändern und den geklonten Knoten</p><p> // einfügen (zweimal mit veränderter Überschrift).</p><p> td = td.*****Node (true);</p><p> td.firstChild.nodeValue = 'Link';</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> td.firstChild.nodeValue = 'Nachricht';</p><p> tr.appendChild (td);</p><p> // Tabellenzeile mit den Überschriften in Tabelle einhängen.</p><p> t.appendChild (tr);</p><p></p><p> // Elemente aus der XML-Datei ermitteln, die unter dem Tagnamen</p><p> // person gespeichert sind.</p><p> var personen = response.getElementsByTagName ('item');</p><p> // Alle gefundenen Elemente nacheinander abarbeiten.</p><p> for (var i = 0; i < personen.length; i++) {</p><p> // Jedes gefundene Element in einer eigenen Tabellenzeile darstellen</p><p> tr = document.createElement ('tr');</p><p> td = td.*****Node (true);</p><p> // Attribut name des Datensatzes auslesen und in der ersten</p><p> // Tabellenspalte ausgeben.</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('title')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> // In die zweite Spalte kommt das Attribut alter</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('link')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> td = td.*****Node (true);</p><p> // Die dritte Spalte wird mit dem Inhalt des Kindelements info gefüllt.</p><p> td.firstChild.nodeValue = personen[i].getElementsByTagName ('description')[0].firstChild.nodeValue;</p><p> tr.appendChild (td);</p><p> // Neue Tabellenzeile in die Tabelle einfügen.</p><p> t.appendChild (tr);</p><p> }</p><p> // Tabelle als Kindelement an das SPAN-Element anhängen</p><p> document.getElementById ('ausgabeelement').appendChild (t);</p><p>}</p><p>// --></p><p></script>[/code]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 <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>Ich hoffe ihr habt mein Problem verstanden, und könnt mir helfen <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>mfg</p></blockquote><p></p>
[QUOTE="Hansi05, post: 1555916, member: 32607"] 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>[/code]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 [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
PHP, Javascript, jQuery, Ajax, nodeJS, MySQL...
[JS] XML mit Javascript von externem Server auslesen
Oben