Lire un xml avec javascript et generer code html ?

Version imprimable

03/04/2006, 11h40
zevince

Lire un xml avec javascript et generer code html ?

Bonjour,

Je commence a travailler sur un projet consistant a faire une requete sur le serveur pour obtenir une liste de produits, qui m'est renvoyée en XML ( ca c'est ok..) Mon probleme est de traiter ce XML avec javascript et d'afficher les produits de ce XML en HTML ...

Est-ce que vous auriez des pistes pour moi ?

Merci d'avance !

Bon j'ai commencé avec ce genre de codes :

1.html :

Code:

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
42
43
<html>
<body>
 
<script type="text/javascript">
 
function transform(xml, xsl, id)
{
  //try {
    // navigateur basé sur Gecko
    if (window.XSLTProcessor)
    {
 
      var fragment;
      var xsltProcessor = new XSLTProcessor();
      xsltProcessor.importStylesheet(xsl);
      fragment = xsltProcessor.transformToFragment(xml, document);
      alert(fragment);
      var target = document.getElementById(id);
      target.appendChild(fragment);
      document.appendChild(target);
      // ActiveX pour Internet Explorer
    } else if (window.ActiveXObject) {
      var target = document.getElementById(id);
      fragment = xml.transformNode(xsl)
      alert(fragment);
      target.innerHTML = fragment;
    }
 // } catch (e) {
 //   return e;
  //}
}
 
</script>
 
<script type="text/javascript">
	transform("1.xml", "1.xsl", "ici");
</script>
 
<div id="ici"></div>
 
 
</body>
</html>

J'ai mis le try/catch en commentaires pour avoir les retours d'erreur..

1.xml :

Code:

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
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- edited with XMLSPY v2004 rel. 2 U (http://www.xmlspy.com) by zevince (zev) -->
<catalog>
	<trip id_pkg="PKG-4-4751-P2C5-7N-DP" country="GR" city="Corfou" hotel="Aeolos Beach 3*" rank="3" duree="7" ville_depart="Paris" apartirde="399" pension="Demi-pension">
		<date>2006-04-16</date>
		<date>2006-04-23</date>
		<date>2006-04-30</date>
		<descriptif>8 jours / 7 nuits en chambre double, Demi pension</descriptif>
	</trip>
	<trip id_pkg="PKG-4-4756-LYON" country="GR" city="Heraklion" hotel="Adele Beach 3*" rank="3" duree="7" ville_depart="Paris" apartirde="399" pension="Demi-pension">
		<date>2006-04-16</date>
		<date>2006-04-23</date>
		<date>2006-04-30</date>
		<descriptif>8 jours / 7 nuits en chambre double, Demi pension</descriptif>
	</trip>
	<trip id_pkg="PKG-4-2439-LYON" country="TN" city="Djerba" hotel=" Djerba Zarzis 3*" rank="3" duree="7" ville_depart="Lyon" apartirde="160" pension="Demi-pension">
		<date>2006-04-09</date>
		<descriptif>8 jours / 7 nuits en chambre double, Demi pension</descriptif>
	</trip>
	<trip id_pkg="PKG-4-4652-A1B3" country="ES" city="Madrid" hotel=" Asturias 2*" rank="2" duree="2" ville_depart="Paris" apartirde="178" pension="Petit-déjeuner">
		<date>2006-04-16</date>
		<date>2006-04-23</date>
		<date>2006-04-30</date>
		<descriptif>2 jours / 1 nuits en chambre double, Petit déjeuner</descriptif>
	</trip>
	<trip id_pkg="PKG-4-4351-GREN" country="TN" city="Hammamet" hotel=" Le Paradis 3*" rank="3" duree="7" ville_depart="Paris" apartirde="189" pension="Demi-pension">
		<date>2006-04-16</date>
		<date>2006-04-23</date>
		<date>2006-04-30</date>
		<descriptif>8 jours / 7 nuits en chambre double, Demi pension</descriptif>
	</trip>
	<trip id_pkg="PKG-4-4751-P2C5-7N-DP" country="GR" city="Heraklion" hotel="Adele Beach 5*" rank="5" duree="14" ville_depart="Paris" apartirde="800" pension="Demi-pension">
		<date>2006-04-16</date>
		<date>2006-04-23</date>
		<date>2006-04-30</date>
		<descriptif>8 jours / 7 nuits en chambre double, Demi pension</descriptif>
	</trip>
</catalog>

1.xsl :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/">
  <html>
  <body>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">City</th> 
        <th align="left">Country</th> 
      </tr>
      <xsl:for-each select="catalog/trip">
      <tr>
        <td><xsl:value-of select="@city" /></td>
        <td><xsl:value-of select="@country" /></td>
      </tr>
      </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
 
</xsl:stylesheet>

Mais ca ne marche pas...

Message d'erreur sous firefox :
Erreur : Could not convert JavaScript argument arg 0 [nsIXSLTProcessor.importStylesheet] = NS_ERROR_XPC_BAD_CONVERT_JS
Fichier source : http://10.0.0.163/tests/jsxml/1.html
Ligne : 15

hmmmm....? et sous IE, rien du tout...

Quelqu'un a deja fait ca surement ?

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
  <head>
    <title>Transformation XSLT</title>
    <script type="text/javascript">
      function loadXML(url)
      {
        var xmlDoc;
        /* chargement du fichier XML */
        try {
          // navigateur basé sur Gecko
          if (document.implementation && document.implementation.createDocument)
          {
            xmlDoc = document.implementation.createDocument('', '', null);
            xmlDoc.load(url);
          // ActiveX pour Internet Explorer
          } else if (window.ActiveXObject) {
            try {
              xmlDoc = new ActiveXObject('Msxml2.XMLDOM');
            } catch (e) {
              xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            }
            xmlDoc.async = false;
            xmlDoc.load(url);
          // à l'aide de lobjet XMLHTTPRequest
          } else if (window.XMLHttpRequest) {
            xmlDoc = new XMLHttpRequest();
            xmlDoc.overrideMimeType('text/xml');
            xmlDoc.open('GET', url, false);
            xmlDoc.send(null);
            if (this.xmlDoc.readyState == 4) xmlDoc = xmlDoc.responseXML;
          }
        } catch (e) {
          return e;
        }
        return xmlDoc;
      }
 
 
      function transform(xml, xsl, id)
      {
        try {
          // navigateur basé sur Gecko
          if (window.XSLTProcessor)
          {
            var fragment;
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);
            fragment = xsltProcessor.transformToFragment(xml, document);
            var target = document.getElementById(id);
            target.appendChild(fragment);
            document.appendChild(target);
          // ActiveX pour Internet Explorer
          } else if (window.ActiveXObject) {
            var target = document.getElementById(id);
            target.innerHTML = xml.transformNode(xsl);
          }
        } catch (e) {
          return e;
        }
      }
      var XmlURL = '1.xml';
      var XslURL = '1.xsl';
      var xml = loadXML(XmlURL);
      var xsl = loadXML(XslURL);
    </script>
  </head>
  <body onload="transform(xml, xsl, 'transform')">
    <div id="transform">
      <!-- c'est ici que ce fait la transformation -->
    </div>
  </body>
</html>

Ca ca marche sous IE, mais pas sous firefox.. et aucun message d'erreur ??

03/04/2006, 12h56
zevince

hmm, bizarre le comportement firefox sur le coup..
ca me l'affiche une fois de temps en temps, le reste du temps j'ai ca :

Citation:

Erreur : Node cannot be inserted at the specified point in the hierarchy = NS_ERROR_DOM_HIERARCHY_REQUEST_ERR
Fichier source : http://10.0.0.163/tests/jsxml/1.html
Ligne : 51
03/04/2006, 14h26
javatwister
ce morceau:
Citation:
Code:

1 2 3 var target = document.getElementById(id); target.appendChild(fragment); document.appendChild(target);
me paraît suspect: le noeud "target" existe déjà dans le document et tu demandes sa réinsertion (inutile);
surtout, "document" ne correspond pas au tag "body": pour ffx, au moins, ça veut sans doute dire que tu insères un élément entre </body> et </html>;
à part ça, fais attention aux mots clés dans tes noms de variables;

mouais, pas faux, pour le id, j'ai changé le nom de la variable...
Mais c'est tres bizarre... !!!

Firefox (1.5.0.1) m'affiche le resultat attendu 1 fois sur 4 ou 5 environ... et le reste du temps, aucun message d'erreur ...???
Je ne comprends pas bien, tous les exemples que je croise sont de ce genre.. et sont censés fonctionner

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
  <head>
    <title>Transformation XSLT</title>
    <script type="text/javascript">
      function loadXML(url)
      {
        var xmlDoc;
        /* chargement du fichier XML */
        try {
          // navigateur basé sur Gecko
          if (document.implementation && document.implementation.createDocument)
          {
            xmlDoc = document.implementation.createDocument('', '', null);
            xmlDoc.load(url);
          // ActiveX pour Internet Explorer
          } else if (window.ActiveXObject) {
            try {
              xmlDoc = new ActiveXObject('Msxml2.XMLDOM');
            } catch (e) {
              xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            }
            xmlDoc.async = false;
            xmlDoc.load(url);
          // à l'aide de lobjet XMLHTTPRequest
          } else if (window.XMLHttpRequest) {
            xmlDoc = new XMLHttpRequest();
            xmlDoc.overrideMimeType('text/xml');
            xmlDoc.open('GET', url, false);
            xmlDoc.send(null);
            if (this.xmlDoc.readyState == 4) xmlDoc = xmlDoc.responseXML;
          }
        } catch (e) {
          return e;
        }
        return xmlDoc;
      }
 
 
      function transform(xml, xsl, place)
      {
        //try {
          // navigateur basé sur Gecko
          if (window.XSLTProcessor)
          {
            var fragment;
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);    
            xsltProcessor.setParameter(null, "rank", "2");         
            fragment = xsltProcessor.transformToFragment(xml, document);
						document.getElementById(place).appendChild(fragment);
 
          // ActiveX pour Internet Explorer
          } else if (window.ActiveXObject) {
            var target = document.getElementById(place);
            target.innerHTML = xml.transformNode(xsl);
          }
        //} catch (e) {
        //  return e;
        //}
      }
      var XmlURL = '1.xml';
      var XslURL = '1.xsl';
 
      var Xsl2URL = '2.xsl';
 
      var xml = loadXML(XmlURL);
      var xsl = loadXML(XslURL);
 
      var xsl2 = loadXML(Xsl2URL);
 
      window.onload = function() {
      transform(xml, xsl, 'transform');
      transform(xml, xsl2, 'transform2')
      }
    </script>
  </head>
  <body>
       <div id="transform2">
      <!-- c'est ici que ce fait la transformation -->
    </div>
    <div id="transform">
      <!-- c'est ici que ce fait la transformation -->
    </div>
  </body>
</html>

03/04/2006, 17h53
zevince

Autre souci.. le passage de parametres avec IE ....
avec firefox, ca passe (quand ca veut bien s'afficher..) avec ca :

Code:

xsltProcessor.setParameter(null, "rank", "2");

mais avec IE ???
04/04/2006, 10h32
zevince

personne n'utilise ce genre de fonction ?
04/04/2006, 11h45
zevince

bon, je change d'approche.. on va tenter plus simple ! donc résolu, meme si pas résolu !