How to parse an xml and extract the xslt element from it in javascript

Question

I am sending an xml response from my servlet to my html page. I receive it via the xmlresponse object of the xmlhttprequest object. My xml document contains a xsl:stylesheet as an element I want to extract this element and execute that xslt code in my java script.
Is it possible? This is my xml code :

<samlp:AuthnRequest xmlns:samlp="urn:oasis:names:tc:SAML:2.0:protocol"
Version="2.0" IssueInstant="2012-05-22T13:40:52:390" ProtocolBinding="urn:oasis:na
mes:tc:SAML:2.0:bindings:HTTP-POST" AssertionConsumerServiceURL="localhos
t:8080/consumer.jsp">
<UserID>
   xyz
</UserID>
<testing>
   text
</testing>
<saml:Issuer xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion">
   http://localhost:8080/saml/SProvider.jsp
</saml:Issuer>
<xslt>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="text" />
<xsl:template match="/">
UserID : <xsl:copy-of select="//UserID"/>
testing : <xsl:copy-of select="//testing"/>
</xsl:template>
</xsl:stylesheet>
</xslt>
</samlp:AuthnRequest>

Once I get this xml string from the ajax response, I want to convert it into xml, extract the xslt part and execute it and show the output in a text area.
EDIT2
What is wrong with this code :

    var xmlDoc=xmlhttp.responseXML;
     //var xmltext=new XMLSerializer().serializeToString(xmlDoc);
     var xsltProcessor = new XSLTProcessor();
var element=xmlDoc.getElementsByTagNameNS("http://www.w3.org/1999/XSL/Transform","stylesheet");//
 //document.forms['my']['signature'].value=xmltext;
var stylesheet=xsltProcessor.importStylesheet(element[0]);
var result=xsltProcessor.transformToDocument(xmlDoc);
 var xmltext1=new XMLSerializer().serializeToString(result);
document.forms['my']['signature2'].value = xmltext1;

The output(xmltext1) for the xslt transformation is -

<transformiix:result xmlns:transformiix="http://www.mozilla.org/TransforMiix">
UserID : 1212

Testing : 1212
</transformiix:result>

But if you see in the xslt code, the outputmethod is set to "text". then why are xml tags included in the output?

Answer
This gives the exlpanation for edit2. Thanks for the answers:)

Yoshi · Accepted Answer · 2012-05-24T15:10:11.177

This is what worked for me, though I only tested it in the newest chrome:

var getNsResolver = function (element) {
  var ns = {
    samlp: 'urn:oasis:names:tc:SAML:2.0:protocol',
    xsl: 'http://www.w3.org/1999/XSL/Transform'
  };

  return function (prefix) {
    return ns[prefix] || null;
  };
};

var handleResponse = function (xhr) {
  var
    doc = xhr.responseXML,
    xsl = doc.evaluate('/samlp:AuthnRequest/xslt/xsl:stylesheet', doc, getNsResolver(doc.documentElement), XPathResult.ANY_TYPE, null).iterateNext(),
    processor = new XSLTProcessor(),
    result;

  processor.importStylesheet(xsl);
  result = processor.transformToFragment(doc, document);

  document.getElementById('foo').value = result.textContent;
};

window.addEventListener('load', function () {
  var request = new XMLHttpRequest();
  request.addEventListener('load', function (evt) {
    handleResponse(request);
  }, false);

  request.open('GET', 'sample.xml', true); // sample.xml contains the xml from the question
  request.send();
}, false);

I tried a piece of code. I cannot figure out where I went wrong. Please see the edit. — Ashwin, May 24 '12 at 14:52
@Ashwin have you tried to use the code I posted? What you added differs greatly. — Yoshi, May 24 '12 at 14:58
@Ashwin I changed the code a bit (the `handleResponse` function). Also as I read your comment on Christophes answer, I'd like to suggest: don't use w3schools as a reference, see [w3fools](http://w3fools.com/) for reasons why. — Yoshi, May 24 '12 at 15:11

Christophe · Answer 2 · 2012-05-24T17:20:20.693

1

This is what I use to get namespaced xml from an xmlHttpRequest (in your case ns=xsl, not tested):

var xml=xhr.responseXML;
var elts = (xml.getElementsByTagNameNS)?xml.getElementsByTagNameNS("ns","tag"):xml.getElementsByTagName("ns\:tag");

Note that you can only use responseXML if the server returns well formed xml. If not, you'll need to parse xhr.responseText.

edited May 24 '12 at 17:20

answered May 24 '12 at 14:27

Christophe

27,383
28
97
140

I read your edit, there no such method as getElementsByTag. Which browser did you use for the test? – Christophe May 24 '12 at 14:56
Sorry I wanted to use getElementsByTagNameNS(). I have edited the code. Still the same problem. For getElementsByTagNameNS() see http://www.w3schools.com/dom/met_element_getelementsbytagnamens.asp I am using mozilla – Ashwin May 24 '12 at 15:01
That's what I have in my code ;-) Maybe the issue is that your response doesn't start with a regular xml header? – Christophe May 24 '12 at 16:43
To clarify, getElementsByTagNameNS is not supported by all browsers, this is why my code includes a fallback to getElementsByTagName – Christophe May 24 '12 at 16:45
it works fine now. I have posted the reason at the end of my question. thank you:) – Ashwin May 25 '12 at 04:42
I am sorry to disturb you again. But the code that I mentioned in my question edit2 works only in mozilla. It does not work in google chrome(the part where xslt is processed is not working)I also tried it with getelmentsbytagname("ns\:tag"). It only does not work in chrome. It even works in IE! – Ashwin May 25 '12 at 09:08
Not sure why. Do you have a recent version of Chrome? I recall testing my code in IE, Firefox and Chrome (not with xsl though). – Christophe May 25 '12 at 22:53

score 0 · Answer 3 · answered May 24 '12 at 08:25

0

I'm using this ATM, works great! Its a parser written on jQuery

http://www.jongma.org/webtools/jquery/xslt/

answered May 24 '12 at 08:25

Spiros Souliotis

175
3

How to parse an xml and extract the xslt element from it in javascript

3 Answers3