Salut,

Je maîtrise pas très bien le JS d'où ma question. Smiley sweatdrop

Je veux transformer mon fichier XML grâce à mon fichier XSL coté client. Pour cela, j'utilise donc JS.

J'ai un code qui fonctionne sous IE mais j'en voudrais un qui fonctionne sous tout les navigateurs récents, comment faire pour adapter mon code ?

<script type="text/javascript">
// chargement du fichier XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("test.xml")

// chargement du fichier XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("test.xsl")

// transformation en Html
document.write(xml.transformNode(xsl))
</script>


Je suppose que c'est faisable avec le "XmlHttpRequest" qui est l'équivalent de "ActiveXObject" pour les navigateurs respectant les normes de la W3C.

Merci de votre aide.
LoK.
Modifié par LoK (07 Apr 2006 - 17:39)
LoK a écrit :
Je suppose que c'est faisable avec le "XmlHttpRequest" qui est l'équivalent de "ActiveXObject" pour les navigateurs respectant les normes de la W3C.


Ah non pas du tout. XmlHttpRequest permet de réaliser un appel http au serveur à partir de JavaScript, l'échange se faisant avec des données structurées avec xml. ActiveXObject() permet d'activer un activeX (sorte de plugins ou sous-programme, je saurais pas le définir correctement). Un de ces ActiveX peut être appellé avec l'identifiant "Microsoft.XMLHTTP" et correspond à la classe XmlHttpRequest disponible dans les autres navigateurs.

Pour ce que tu veux faire, je ne sais pas si Safari supporte le XSL. Opera l'implémente dans sa version 9, pas encore en version stable si je me trompe, et je n'ai pas les détails de leur implémentation.
Pour Firefox, voici l'équivalent:


var xmlDoc = document.implementation.createDocument('', '', null);
var xslDoc = document.implementation.createDocument('', '', null);

xmlDoc.load('test.xml');
xslDoc.load('test.xsl');

var xslt = new XSLTProcessor();
xslt.reset();
xslt.importStylesheet(xslDoc);

var result = xslt.transformToFragment(xmlDoc, document);
document.write(result); // j'ai un doute quand même


je suppose que le chargement se fait par défaut de façon synchrone mais je n'en jurerais pas.
a écrit :
Ah non pas du tout. XmlHttpRequest permet de réaliser un appel http au serveur à partir de JavaScript, l'échange se faisant avec des données structurées avec xml. ActiveXObject() permet d'activer un activeX (sorte de plugins ou sous-programme, je saurais pas le définir correctement). Un de ces ActiveX peut être appellé avec l'identifiant "Microsoft.XMLHTTP" et correspond à la classe XmlHttpRequest disponible dans les autres navigateurs.

Ah d'accord, confusion de ma part. Smiley confus


a écrit :
Pour ce que tu veux faire, je ne sais pas si Safari supporte le XSL. Opera l'implémente dans sa version 9, pas encore en version stable si je me trompe, et je n'ai pas les détails de leur implémentation.
Pour Firefox, voici l'équivalent:

Si le code marche avec IE et FF, cela me suffira comme "base", ca couvre la majorité des utilisateurs.

Donc, si j'ai bien compris, il faudrait que j'arrive à un code comme cela :


<script language="javascript">
var navactu = navigator.appName;
       
if(navactu=="Microsoft Internet Explorer")  {

// chargement du fichier XML

var xml = new ActiveXObject("Microsoft.XMLDOM")

xml.async = false

xml.load("test.xml")



// chargement du fichier XSL

var xsl = new ActiveXObject("Microsoft.XMLDOM")

xsl.async = false

xsl.load("test.xsl")



// transformation en Html

document.write(xml.transformNode(xsl))

}
      
else {
       if(navactu=="Mozilla Firefox") {

var xmlDoc = document.implementation.createDocument('', '', null);

var xslDoc = document.implementation.createDocument('', '', null);



xmlDoc.load('test.xml');

xslDoc.load('test.xsl');



var xslt = new XSLTProcessor();

xslt.reset();

xslt.importStylesheet(xslDoc);



var result = xslt.transformToFragment(xmlDoc, document);

document.write(result); // j'ai un doute quand même

      }

}
            
</script>

Modifié par LoK (25 Feb 2006 - 09:16)
J'ai posé a peu près la même question dans un autre sujet, j'ai testé le code de Lok mais ca marche pas chez moi Smiley decu
En fait, je ne connais que les bases du JS, mon code est surement faux.
Si quelqu'un peut l'améliorer, je suis preneur. Smiley smile
Modifié par LoK (07 Mar 2006 - 20:33)
J'ai retesté et en fait ca fonctionne, mais mal :
j'obtiens (sous FF toujours) :
[object DocumentFragment]

(en associant directement mon xml a mon xsl ca passe donc le probleme vient bien du script)

Donc l'écriture de la variable "result" marche bien, il doit y avoir un probleme dans ta définition de la variable "result"
var result = xslt.transformToFragment(xmlDoc, document);

qui n'a pas l'air de faire appel au fichier xsl, mais je suis pas du tout un spécialiste de JS.
Si il y en a un ce serait cool qu'il se manifeste pour changer ton code qui m'a l'air presque fonctionnel
Voici une fonction qui fait la transformation dans un div ou autre grâce à son id:
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;
  }
}


Avec xml et xsl étant des objets XML resultant du chargement du fichier...
Spack a écrit :

Avec xml et xsl étant des objets XML resultant du chargement du fichier...

J'ai pas tout suivi là lol, voilà ma page html, cela sera peut être plus explicite
<html>
<head>
</head>
<body>
<script type="text/javascript" language="JavaScript">

var xml = xml.load("artiste.xml");
var xsl = xsl.load("parole.xsl");

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;

  }

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

Modifié par Bellami (11 Mar 2006 - 12:50)
Avant il faut charger les fichiers XML j'ai vu des procédures plus haut mais je donne quand même une fonction:
Smiley cligne
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;
}

Bémol, le chargement du fichier xml n'est pas asynchrone car je n'ai pas encore réussit à le faire fonctionner de cette façon il faut attendre que le xml soit complètement chargé pour continuer le chargement de la page... Cela ne pose de problème que si le fichier XML est assez gros...

Spack a écrit :
Avec xml et xsl étant des objets XML resultant du chargement du fichier...

Voilà pour la fonction transform(xml, xsl, id) xml et xsl sont les types d'objets retournés par la fonction loadXML...
Je sais que je vais commencer a devenir chiant mais j'ai testé moultes choses et je n'y arrive toujours pas Smiley bawling .
Serait il possible d'avoir le code entier du script pour un fichier xml "artiste.xml" et un fichier xsl "parole.xsl" ?

Merci d'avance spack Smiley cligne
Je l'ai testé et il fonctionne avec Firefox et IE:
<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 artisteURL = 'artiste.xml';
      var paroleURL = 'parole.xsl';

      var xml = loadXML(artisteURL);
      var xsl = loadXML(paroleURL);
    </script>
  </head>
  <body onload="transform(xml, xsl, 'transform')">
    <div id="transform">
      <!-- c'est ici que ce fait la transformation -->
    </div>
  </body>
</html>
merci beaucoup Spack, je te suis très redevable car ca marche nickel, j'ai même réussi à placer les 3/4 du code ds un fichier .js pour pas avoir à le recoller partout.

je vais pouvoir continuer la création de mon site :d :d
Spack a écrit :
Je l'ai testé et il fonctionne avec Firefox et IE:


Bonjour,

Tout d'abord merci pour cet example de XSLT en javascript, il fonctionne parfaitement sur Internet Explorer.
Malheureusement, j'ai un problème avec Firefox/1.5.0.2
C'est bien simple, dans le div qui doit recevoir le contenu de la transformation, il n'y a .. rien Smiley eek

Mon XML et la feuille XSL sont valides, je les ai testé en liant la feuille XSL au contenu XML .. donc le problème ne vient pas de là.

Bien sûr, javascript est activé.. j'ai repris strictement la même page que toi Spack (copier .. coller ..) et même si dans internet explorer j'ai exactement le rendu désiré, RIEN dans firefox.
Je ne comprend pas !

Quelqu'un a rencontré le même problème que moi sous firefox ? Une idée ? Smiley bawling


Edit #1 :
Bon, j'ai réussi à faire fonctionner ton script dans firefox.
Le problème venait du fait que mon contenu xml était généré par un script php. (xml.php?d=menu)
Apparement internet explorer comprenait que c'était du xml mais pas firefox.
Un petit
header("Content-Type: text/xml");
Et c'était réglé ! Smiley biggrin
Même si il y a un bug étrange .. lors de refreshs successifs, parfois la transformation n'est pas effectuée ..

Edit #2 :
Maintenant j'ai un autre problème Smiley sweatdrop

J'ai modifié un peu le code, afin de faire des fonctions qui conviennent mieux à mon usage du xslt ..

Voilà donc mon code, dans IE pas de problème, dans firefox 1.5, rien :
Besoin d'aide Smiley bawling


//===============================================
// loadXML (xml)
// Renvoie le contenu d'un fichier XML/XSL (sync)
//===============================================
function loadXML(url)
  {
  var xmlDoc;

  try 
    {
   	//===========================================
  	//Firefox
  	//===========================================
    if (document.implementation && document.implementation.createDocument)
      {
      xmlDoc = document.implementation.createDocument('', '', null);
      xmlDoc.load(url);
      }
  	//===========================================
  	//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);
      }

  	//===========================================
	  //Gecko
	  //===========================================
    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;
}
//===============================================



//===============================================
// xsltLoad (xml, xsl, div)
// Prépare la transformation XSL
//===============================================
function xsltLoad(XML, XSL, div) 
	{
    xsltDo(loadXML(XML), loadXML(XSL), div);
  }
//===============================================



//===============================================
// xsltDo (xml, xsl, div)
// Charge le résultat de la transformation
//===============================================
function xsltDo(xml, xsl, id)
  {
  try 
    {
  	//===========================================
	  //Gecko
	  //===========================================
    if (window.XSLTProcessor)
      {
      var fragment;
      var xsltProcessor = new XSLTProcessor();
      
      xsltProcessor.importStylesheet(xsl);
      fragment = xsltProcessor.transformToFragment(xml, document);
      var target = document.getElementById(id);
      target.innerHTML = "";
      target.appendChild(fragment);
      document.appendChild(target);
      }
  	//===========================================
	  //Internet Explorer
	  //===========================================
     else if (window.ActiveXObject) 
      {
      var target = document.getElementById(id);
      target.innerHTML = xml.transformNode(xsl);
      }
    }
    catch (e)
    {
      return e;
    }
  }
//===============================================


Je l'appelle avec un

xsltLoad ('xml.php?d=menu', 'style/menu.xsl', 'menu');


Et mon div menu reste vide sous firefox .. aucun problème sous IE Smiley confus Smiley sweatdrop
Modifié par narc (21 Apr 2006 - 15:47)