Latest web development tutorials

XSLT sur le client

Si votre navigateur prend en charge XSLT, le navigateur qui peut être utilisé pour convertir des documents en XHTML.


solution JavaScript

Dans le chapitre précédent, nous avons appris comment utiliser XSLT pour transformer un document XML en XHTML. Nous le faisons à travers les manières suivantes: Ajout feuille de style XSL dans le fichier XML, et terminer la conversion via un navigateur.

Même si l'effet de cette méthode est très bonne, les références de feuille de style ne sont pas toujours satisfaisantes (par exemple, dans le navigateur XSLT ne reconnaît pas cette approche ne fonctionnera pas) est inclus dans le fichier XML.

Une approche plus générale est d'utiliser JavaScript pour terminer la conversion.

En utilisant JavaScript, nous pouvons:

  • Le navigateur pour le test de confirmation
  • Selon le navigateur et les besoins des utilisateurs d'utiliser une feuille de style différent

Ceci est le charme de XSLT! XSLT est un conçu pour rendre les données d'un format à un autre format possible et supporter différents types de navigateurs et différents besoins des utilisateurs.

transformation XSLT Client deviendra l'avenir l'une des principales tâches exécutées par le navigateur, et nous verrons sa croissance (Braille, navigateurs oraux, imprimantes réseau, les appareils de poche, etc.) dans un marché du navigateur particulier.


documents XML et les fichiers XSL

Regardez ce dans la section précédente a montré hors d'un document XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

Voir le fichier XML .

Et accompagnant la feuille de style XSL:

<?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>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Voir le fichier XSL .

S'il vous plaît noter, le fichier XML ne contient pas une référence au fichier XSL.

IMPORTANT: La phrase signifie ci - dessus, les fichiers XML peuvent utiliser plusieurs différentes feuilles de style XSL pour convertir.


Dans le navigateur convertir XML en XHTML

Ceci est pour le client de fichiers XML en XHTML code source:

Exemples

<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.ActiveXObject)
{
xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
else
{
xhttp=new XMLHttpRequest();
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>

Essayez »

Astuce: Si vous ne savez pas comment écrire JavaScript, s'il vous plaît étudier notre tutoriel JavaScript .

Exemples expliquent:

fonction loadXMLDoc ()

fonction loadXMLDoc () est utilisée pour charger les fichiers XML et XSL.

Il vérifie le type de navigateur et l'utilisateur doit charger le fichier.

fonction displayResult ()

Cette fonction permet de définir le fichier XML de style d'affichage à l'aide des fichiers XSL.

  • Chargement de fichiers XML et XSL
  • Les utilisateurs des tests ont le type de navigateur
  • Si le support du navigateur des objets ActiveX de l'utilisateur:
    • Utiliser la méthode transformNode () de la feuille de style XSL au document XML
    • Placez le document courant (id = "exemple") contient le style du corps a été appliqué des documents XML
  • Si le navigateur de l'utilisateur ne prend pas en charge les objets ActiveX:
    • Créer un nouveau fichier objet et XSL import XSLTProcessor
    • Utiliser la méthode transformToFragment () de la feuille de style XSL au document XML
    • Placez le document courant (id = "exemple") contient le style du corps a été appliqué des documents XML