[Javascript] Trasformare dinamicamente un documento XML in HTML attraverso XSL
Visto il post di ieri riguardo alle trasformazioni XSL in PHP, oggi altro breve post su come effettuare tali trasformazioni con javascript attraverso un codice cross-browser.
Cominciamo con la funzione deputata al caricamento sincrono del documento XML e relativo documento di stile XSL:
Vediamo la funzione che effettua la trasformazione XSL del documento XML:
function loadDocument(fileName)
{
/* a seconda che il borwser sia IE o Firefox, si crea un oggetto
* MSXML2.DOMDocument oppure un Document object nativo per Firefox. */
var xmlDoc = window.ActiveXObject ? new ActiveXObject("MSXML2.DOMDocument.3.0") : document.implementation.createDocument("","",null);
xmlDoc.async = false;
xmlDoc.load(fileName);
return xmlDoc;
}
function getTransformedHTML(xmlDoc, xslDoc) {
var html = "";
/* Implementazione per Firefox */
if (window.XSLTProcessor)
{
var xsltProc = new XSLTProcessor(); // creazione di un'istanza del processore XSLT
xsltProc.importStylesheet(xslDoc); // importazione del foglio di stile
var fragment = xsltProc.transformToFragment(xmlDoc, document);
html = new XMLSerializer().serializeToString(fragment); // serializzazione del codice HTML in una stringa prima di aggiugnerla alla pagina
}
else if (window.ActiveXObject) /* Implementazione IE */
{
html = xmlDoc.transformNode(xslDoc);
}
return html;
}
Ammettiamo ora di avere una pagina HTML di appoggio che includa le funzioni precedentemente illustrate in uno script esterno e un foglio di stile CSS per abbellire la presentazione.
Cliccando sul link "Aggiungi al carrello", si richiamerà la funzione GenerateCart() che caricherà il documento XML effettuando la trasformazione XSL e mettendo l'output risultante nel elemento con id cart. La funzione GenerateCart() (presente nell oscript incluso nella pagina HTML) è così composta:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript"
src="StaticXSLT.js"></script>
<link id="Link1" rel="stylesheet" href="cart.css" type="text/css" />
</head>
<body>
<a href="javascript:GenerateCart();">Aggiungi al carrello</a>
<br /><br />
<span id="cart" ></span>
</body>
</html>
function GenerateCart()
{
var xmlDoc = loadDocument("cart.xml");
var xslDoc = loadDocument("cart.xsl");
document.getElementById("cart").innerHTML = getTransformedHTML(xmlDoc, xslDoc);
}
10:26
|
Categorie:
javascript,
XML/XSL
|
This entry was posted on 10:26
and is filed under
javascript
,
XML/XSL
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
Iscriviti a:
Commenti sul post (Atom)
0 comments:
Posta un commento