Applicare xsl in html

[mgigio]

Ciao a tutti, ho sentito che è possibile applicare lato client un foglio di stile xsl a un documento xml richiamato con XMLHttpRequest, ossia quando il docuemento xml è parte di una pagina xhtml. Mi sembra di aver capito che la tecnica consista nell'effettuare una seconda richiesta per il file xsl.

Ne sapete qualcosa?

In alternativa ho provato ad utilizzare un normale css, applicando le regole ai tag dell'xml, ma su ie non funziona, firefox non elabora tutti i tag, invece opera risponde regolarmente. Suggerimenti?

Grazie

 

[lukeonweb]

E' una soluzione praticabile ma sconsigliata.

XML ed XSLT è preferibile usarli lato server.

 

[mgigio]

Eh si, me ne rendo conto. Sto cercando di risolvere questo problema per conto di un professore universitario e non è possibile modificare il progetto, perciò non ho alternative se non lavorare lato client e, fra parentesi, mi ha dato tempi strettissimi quindi sono alla disperata ricerca di qualsiasi aiuto. Grazie

 

[lukeonweb]

Prova a vedere se trovi qualcosa, se no fammi sapere...

https://www.mrw.it/fareweb/xlang/

 

[mgigio]

Grazie Lukeonweb, è stato il primo posto in cui ho cercato. Comunque qualche piccolo passo avanti l'ho fatto. Penso che potrebbe essere utile a tutti quello che ho trovato finora.

Ci sono alcune librerie che offrono la possibilità di trasformare xml con xsl: Freja, Ajaxlst e Sarissa

Freja consente con poche righe di ottenere il risultato voluto:

var data = getModel('documento.xml');
var display = getView('foglio.xsl');
display.render(data, document.getElementById('elemento'));

Simile è anche Ajaxslt, creata da Google, ma sembra abbandonata in favore proprio di Freja e Sarissa:

var xml = docXml; //ottenibile sia da una richiesta xmlhttp sia da una stringa con la funzione xmlParse(stringaXml)
var xslt = foglioXsl; // come per docXml
var html = xsltProcess(xml, xslt);
document.getElementById('elemento').innerHTML = html;

Il problema è che entrambe possono elaborare un solo documento xml, mentre nella mia pagina ne ho quattro a cui applicare un unico foglio di stile

Questo è il codice usando Sarissa:

var xmlHttp;
var xmlHttpXsl;

// richiamo i file xml e xsl con XMLHttpRequest e li assegno a xmlDoc e xslDoc
if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
  xmlHttpXsl = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  xmlHttpXsl=new ActiveXObject("Microsoft.XMLHTTP");  
}

xmlHttp.open("GET", urlXml, false);
xmlHttp.send(null);
xmlHttpXsl.open("GET",urlXsl, false);
xmlHttpXsl.send(null);

var xmlDoc = xmlHttp1.responseXML;
var xslDoc = xmlHttpXsl.responseXML;

// creo un processore xslt e lo configuro con il mio foglio di stile
var processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);

// creo un serializzatore per convertire l'oggeto xml in stringa
var serializza = new XMLSerializer();

// eseguo la trasformazione e inserisco il risultato nella pagina html
var resultDocument = processor.transformToDocument(xmlDoc);
var html = serializza.serializeToString(resultDocument);
document.getElementById('elemento').innerHTML = html;

eseguendo tante richieste xmlhttp quanti sono i file xml da caricare, ottengo quello che voglio sia su firefox che su opera.

Ma su ie ho l'errore:

"The stylesheet does not contain a document element. The stylesheet may be empty, or it may not be a well-formed XML document."

generato dall'istruzione: this.template.stylesheet = converted;
nella funzione: XSLTProcessor.prototype.importStylesheet = function(xslDoc).

Il foglio xsl non l'ho creato io, ma con gli altri browser funziona perfettamente.

Purtroppo ie è troppo diffuso per poterlo ignorare. Potete aiutarmi? Grazie

P.S. forse qualcuno potrebbe verificare il comportamento su ie7, in tal caso gli sarei grato se mi comunicasse l'esito

 

[mgigio]

Soluzione (parziale)

Ho trovato una soluzione alternativa per IE.

In realtà ho faticato molto perché con explorer ho problemi con la dichiarazione della dtd nei file xml, perlomeno in questo caso e ho perso due giorni per capirlo.

La soluzione è la più classica e banale, basta utilizzare il parser xml di microsoft, lasciando inalterato il codice per gli altri browser. Effettuando un semplice controllo per identificare IE è sufficiente eseguire il codice qui sotto (come dicevo io lavoro con quattro xml e un xsl)

var xml1;
var xml2;
var xml3;
var xml4;
var xsl;

// creo gli oggetti dom e carico quattro file xml e un xsl
xml1 = new ActiveXObject("MSXML2.DOMDocument")
xml1.async = false
xml1.load(urlxml1)
xml2 = new ActiveXObject("MSXML2.DOMDocument")
xml2.async = false
xml2.load(urlxml2)
xml3 = new ActiveXObject("MSXML2.DOMDocument")
xml3.async = false
xml3.load(urlxml3)
xml4 = new ActiveXObject("MSXML2.DOMDocument")
xml4.async = false
xml4.load(urlxml4)
xsl = new ActiveXObject("MSXML2.DOMDocument")
xsl.async = false
xsl.load(urlxsl);

//effettuo la trasformazione col foglio di stile e assegno il risultato ad un tag della pagina html
document.getElementById(elemento1).innerHTML = (xml1.transformNode(xsl));
document.getElementById(elemento2).innerHTML = (xml2.transformNode(xsl));
document.getElementById(elemento3).innerHTML = (xml3.transformNode(xsl));
document.getElementById(elemento4).innerHTML = (xml4.transformNode(xsl));

Non è certo una soluzione elegante e non mi piace dover utilizzare due approcci così diversi a seconda del browser; inoltre bisogna verificare la versione di msxml.dll, nel caso di quelle più vecchie l'oggetto activex da creare è Microsoft.XMLDOM, ma in attesa di soluzioni migliori utilizzerò questa.

Immagino che i problemi con la doctype dipendano dal fatto che non ho la dtd a disposizione, ma non ne sono proprio convinto. Qualcuno ne sa di più?