Webdesign, Tutorials und mehr - Webmasterpro.de

XML mit Javascript auslesen

roby86, am Samstag den 13.08.2011 um 03:56:32

Hallo,

ich habe kaum Ahnung von XML.

Ich möchte folgende XML in eine statische Html Seite einlesen und den Bildpfad und Beschreibung dynamisch einbinden.

Die Bilder sollen dann in ein div mit scrollbalken unter einander folgen.

Nur wie soll das Javascript aussehen?

1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<photos>
    <photo desc="bild 1 text" url="1.jpg" />
    <photo desc="bild 2 text" url="2.jpg" />
    <photo desc="bild 3 text" url="3.jpg" />
</photos>

Ich möchte dann quasi anhand der XML dynamsich die Bilder einfügen.

1
2
3
4
5

<div class="eltern">
      <div class="kind"><img src="{url}"><br />{desc}</div>
      <div class="kind"><img src="{url}"><br />{desc}</div>
      <div class="kind"><img src="{url}"><br />{desc}</div>
</div>

An der XML kann ich wegen einer parallel laufenden SWF Datei nichts ändern.

Kann mir jemand helfen, suche und probiere schon die ganze Nacht bis jetzt.

Jannik Zschiesche, am Samstag den 13.08.2011 um 12:40:01

Hallo,
da du beim Parsen von dem XML mit Browserinkompatibilitäten zu rechnen hast, würde ich hierfür eine JavaScript-Bibliothek verwenden. Ich habe hierfür nun einmal jQuery verwendet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var xml = '<?xml version="1.0" encoding="utf-8"?>' +
    '<photos>' +
        '<photo desc="bild 1 text" url="1.jpg" />' +
        '<photo desc="bild 2 text" url="2.jpg" />' +
        '<photo desc="bild 3 text" url="3.jpg" />' +
    '</photos>';
        
var photos = $.parseXML(xml).getElementsByTagName('photo');
        
for (var i = 0, length = photos.length; i < length; i++)
{
    console.log('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
}

Die Ausgabe dieses Beispiels ist:

Bitte beachte, dass wenn du die XML-Datei sowieso schon über jQuery und Ajax lädst, du das $.parseXML() nicht explizit aufrufen musst, sondern bei den jQuery-Ajax-Funktionen den Datentyp als Parameter mitgeben kannst und jQuery das automatisch umwandelt:

• $.get() und $.post(): hier als letzter Parameter "dataType"
• $.ajax(): hier im settings-Object als Parameter "contentType"

roby86, am Samstag den 13.08.2011 um 21:10:59

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<javascript>

var xml = '<?xml version="1.0" encoding="utf-8"?>' +
    '<photos>' +
        '<photo desc="bild 1 text" url="1.jpg" />' +
        '<photo desc="bild 2 text" url="2.jpg" />' +
        '<photo desc="bild 3 text" url="3.jpg" />' +
    '</photos>';
        
var photos = $.parseXML(xml).getElementsByTagName('photo');
        
for (var i = 0, length = photos.length; i < length; i++)
{
    console.log('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
}

</javascript>

füge ich das dann so an der stelle ein?

und die xml verwenden kann man nicht?

Also einen Pfad zu einer xml datei hat man nicht, da man den inhalt einfügt?

wenn ich das so einfüge würde, dann könnte ich das auch einfach händisch in HTML programmieren?!

Oder hab ich jetzt dein Script nicht verstanden? :-)

Weil es sind nicht immer 3. Ich möchte das so machen da ich 10 Galerien habe und dann auch in deutsch und in englisch.

Das xml verwende ich je für die Flash-Galerie, das Script was ich suche soll dann quasi als nicht Flash-Variante am besten mit der selben XML arbeiten. :-) :-)

Gut ausgedacht nur ist es umsetzbar :-)

Danke für deine Hilfe.

Tobias K., am Samstag den 13.08.2011 um 22:28:02

Doch, du kannst auch über eine extra Datei arbeiten (sofern die unter der gleichen Domain erreichbar ist) - den Hinweis auf jQuery und z.B. die Funktion $.get() hat dir Jannik ja schon gepostet ...

roby86, am Samstag den 13.08.2011 um 22:51:50

Ja ist unter gleichen domain.

Dann versteh ich das Script am Anfang wirklich nicht.

Tobias K., am Sonntag den 14.08.2011 um 00:06:01

Was genau verstehst du nicht? Du ersetzt halt den Teil in dem der XML-Code definiert wird durch den Aufruf der XML-Datei ...

roby86, am Montag den 15.08.2011 um 21:25:59

Hallo quasi so: ?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script></head>

<Body>
  <script>



//var xml = '<?xml version="1.0" encoding="utf-8"?>' +

//    '<photos>' +

//        '<photo desc="bild 1 text" url="1.jpg" />' +

//        '<photo desc="bild 2 text" url="2.jpg" />' +

//        '<photo desc="bild 3 text" url="3.jpg" />' +

//    '</photos>';



var xml = 'flashgalerie/installationen/installationen.xml'

        

var photos = $.parseXML(xml).getElementsByTagName('photo');

        

for (var i = 0, length = photos.length; i < length; i++)

{

    console.log('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');

}



</script>
</body>

Da passiert leider nix. Gibt das Script eine Code für jedes Bild aus?

1

<div class="kind"><img src="{url}><br />{desc}</div>

Vielen Dank für die ganze Hilfe.

Jannik Zschiesche, am Montag den 15.08.2011 um 22:07:22

Hallo,

sieh dir vielleicht erst einmal die angesprochenen jQuery-Funktionalitäten an. Ein funktionierendes Beispiel könnte (ich habe es jetzt nicht getestet) so aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
    <head>
        <title>XML-Beispiel</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">

            $.get(
                'flashgalerie/installationen/installationen.xml',
                {},
                function (data)
                {
                    var photos = data.getElementsByTagName('photo');

                    for (var i = 0, length = photos.length; i < length; i++)
                    {
                        console.log('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
                    }
                },
                'xml'
            );  

        </script>
    </body>
</html>

roby86, am Mittwoch den 17.08.2011 um 00:14:24

hab es 1:1 kopiert und getestet. leider nicht.

dibt das script denn schon was aus oder muss eine zeile rein, die dann eine html zeile ausgibt mit den dynamischen feldern?

<divclass="kind"><imgsrc="{url}><br/>{desc}</div>

Wenn ich die Tuturials/Funktionen lese sagt mir das leider nicht viel :-)

Ich kann einiges ahnen, was es bedeutet nur es dann zu übertragen auf mein Fall ist das Problem. :-)

Jannik Zschiesche, am Donnerstag den 18.08.2011 um 11:24:52

Wenn du keinen Browser verwendest, der eine Console hat (oder diese nicht anzeigt), kannst du es auch so probieren:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
    <head>
        <title>XML-Beispiel</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">

            $.get(
                'flashgalerie/installationen/installationen.xml',
                {},
                function (data)
                {
                    var photos = data.getElementsByTagName('photo');

                    for (var i = 0, length = photos.length; i < length; i++)
                    {
                        document.write('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
                    }
                },
                'xml'
            );  

        </script>
    </body>
</html>

roby86, am Montag den 22.08.2011 um 23:52:13

Hallo,

es geht VIELEN DANK.

Für die anderen habe es so umgebaut, das HTML Code ausgegeben wird:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 <!DOCTYPE html>
<html>
    <head>
        <title>XML-Beispiel</title>
        <script src="inc/jquery-1-4-2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">

            $.get(
                'flashgalerie/gemaelde/gemaelde.xml',
                {},
                function (data)
                {
                    var photos = data.getElementsByTagName('photo');

                    for (var i = 0, length = photos.length; i < length; i++)
                    {
                        // document.write('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
                        document.write('<p style="text-align:center;font-size:11px;font-family:arial,verdana;"><img src="'+ photos[i].getAttribute("url") + '" width="330" height="330" border="0" alt="' + photos[i].getAttribute("desc") + '"><br />' + photos[i].getAttribute("desc") + '</p>');
                    }
                },
                'xml'
            );  

        </script>
    </body>
</html>

Er gibt auch es genauso an.

NUR er läd ins unermessene, Alle anderen HTML befehle außenherum werden gelöscht wie H1, Body, HEAD Tags und so.

Firefox zeigt mir jetzt kein Quelltext mehr an.

ABER von der Ansicht geht es :-)

Das Problem besteht egal ob Qjuery lokal oder von Google geladen. Dachte das es daran liegt.

Ninos Ego, am Dienstag den 23.08.2011 um 03:09:30

klick mal auf strg+shift+j (Fehlerkonsole), dann auf Fehler und schau mal nach, was die Konsole so ausgibt. Eventuell hast nen Fehler reingebastelt^^
Außerdem kannst ja vorerst, bevor du die Variablen irgendwo reinbastelst mit alert() diese ausgeben und den Inhalt auslesen. und das soweit, bis du die Fehlerquelle gefunden hast..
Ausklammern eventuell auch noch und von ganz oben abarbeiten..

Tobias K., am Dienstag den 23.08.2011 um 06:51:46

du darfst deinen neu erzeugten HTML-Code nicht einfach ins Dokument schreiben (damit überschreibst du den Inhalt wenn das Laden bereits abgeschlossen war) - du musst den Inhalt über jQuery-Funktionen (in deinem Fall html()) ins DOM einhängen.

Jannik Zschiesche, am Dienstag den 23.08.2011 um 21:00:46

Was heißt "kein"? Ist der Quelltext einfach komplett leer?

In deinem Beispiel kann außer den ausgegebenen <p>-Tags (und dem HTML-Grundgerüst) kein Quellcode ausgegeben werden, da kein weiterer in der Datei existiert. Davon abgesehen, dass das document.write() nicht eingebettet auf der Seite ausgeführt wird, sondern in einem Callback und dadurch genau das auftritt, was Tobias bereits erwähnt hat.

alert() ist eine ungünstige Debug-Methode, vor allem, wenn man aus Versehen irgendwo Endlosschleifen eingebaut hat. Dann muss man den Browserprozess mit dem Aktivitätsmanager / Taskmanager beenden, um weiter arbeiten zu können (außer Opera).

Wenn sowieso schon Firefox verwendet wird, einfach Firebug installieren und mit Breakpoints und dem eingebauten JavaScript-Debugger den Fehler suchen.

roby86, am Mittwoch den 24.08.2011 um 18:41:01

Ich bin sehr dankbar für euche Hilfe. Nur bin ich kein Java Programmierer.

Firebug zeigt mit unter den Reiter Script, das keins da ist.

Das habe ich drin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
    <head>
        <title>XML-Beispiel</title>
        <script src="inc/jquery-1-4-2.min.js" type="text/javascript"></script>
    </head>
    <body>
    
    <h1>&Uuml;berschrift</h1>
        <script type="application/javascript">

            $.get(
                'flashgalerie/gemaelde/gemaelde.xml',
                {},
                function (data)
                {
                    var photos = data.getElementsByTagName('photo');

                    for (var i = 0, length = photos.length; i < length; i++)
                    {
                        // document.write('Foto ' + i + ', desc: "' + photos[i].getAttribute("desc") + '", url: "' + photos[i].getAttribute("url") + '"');
                        document.write('<p style="text-align:center;font-size:11px;font-family:arial,verdana;"><img src="'+ photos[i].getAttribute("url") + '" width="330" height="330" border="0" alt="' + photos[i].getAttribute("desc") + '"><br />' + photos[i].getAttribute("desc") + '</p>');
                    }
                },
                'xml'
            );  

        </script>
    </body>
</html>

Raus kommt:

http://aventu.de/INTERN/BOERNER/TEST/gemaelde-static.html

Mal zeigt er ewig im Queltest von Firebox leer mal nur hintereinander weg:

1

<p style="text-align:center;font-size:11px;font-family:arial,verdana;"><img width="330" height="330" border="0" alt="Morgenrote" src="flashgalerie/gemaelde/morgenroete.jpg"><br>Morgenrote</p>

Ich komme also nicht weiter.