Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts

    XML, XSL, and AJAX

    Hey, I have some data stored in XML files, and I have written an XSL stylesheet that transforms these data into HTML that a web browser can render. I have tested this, and it is working correctly.

    I now have a separate page that makes AJAX requests to these XML files. I was surprised to see that the AJAX object returns the source code of the XML file, not the HTML generated by the XSL transformation.

    Does anyone know how I might use AJAX to get the HTML generated from an XSL transformation, rather than the raw XML source code?

    Thanks
    -- </byuhobbes>

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    Hey, I have some data stored in XML files, and I have written an XSL stylesheet that transforms these data into HTML that a web browser can render. I have tested this, and it is working correctly.

    I now have a separate page that makes AJAX requests to these XML files. I was surprised to see that the AJAX object returns the source code of the XML file, not the HTML generated by the XSL transformation.

    Does anyone know how I might use AJAX to get the HTML generated from an XSL transformation, rather than the raw XML source code?

    Thanks
    post the relevant code please.

    regards

  • #3
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    The first bit of one of the XML files is like this.

    Code:
    <?xml version="1.0"?>
    <?xml-stylesheet type="text/xsl" href="ScoTest.xsl"?>
    
    <TestItems>
    <item>
    	<itemId>0-48de9c82a963f</itemId>
    	<itemType>scriptMasculineFeminine</itemType>
    	<instructions>Identify whether the following word is masculine or feminine.</instructions>
    	<stimulus>
    		<stimulusType>script</stimulusType>
    		<stimulusLanguage>arabic</stimulusLanguage>
    		<stimulusValue> أنتِ </stimulusValue>
    	</stimulus>
    	<responses>
    		<responseType>text/script</responseType>
    		<responseLanguage>English</responseLanguage>
    		<response>
    			<correct>false</correct>
    			<responseValue>masculine</responseValue>
    		</response>
    		<response>
    			<correct>true</correct>
    			<responseValue>feminine</responseValue>
    		</response>
    	</responses>
    </item>
    ...
    ...
    The XSL I use to transform the XML is this.

    Code:
    <?xml version="1.0" encoding="utf-8"?><!DOCTYPE xsl:stylesheet  []>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    	<xsl:output method="html"
    		encoding="utf-8"
    		doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
    		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
    	<xsl:template match="/">
    			<p class="header1">SCO Test</p>
    			<p>
    			<xsl:apply-templates />
    			</p>
    	</xsl:template>
    	<xsl:template match="item"><span class="tooltip"><xsl:value-of select="itemId" /><span class="tooltip_text"><xsl:value-of select="instructions" /></span></span><br /></xsl:template>
    </xsl:stylesheet>
    This is what the browser renders when I open the XML file.

    Code:
    <p class="header1">SCO Test</p><p>
    <span class="tooltip">0-48de9c82a963f<span class="tooltip_text">Identify whether the following word is masculine or feminine.</span></span><br>
    <span class="tooltip">1-48de9cae32988<span class="tooltip_text">Identify whether the following word is masculine or feminine.</span></span><br>
    <span class="tooltip">27-48deb8717b234<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">28-48deb8aebf870<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">29-48deb9b73f8ec<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    
    <span class="tooltip">30-48deba1e96caf<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">31-48deba803abbb<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">32-48debafea8c8e<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">33-48debb4c2a8c2<span class="tooltip_text">Identify what the following Arabic words/phrases mean.</span></span><br>
    <span class="tooltip">20-48deb4c001b26<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">21-48deb5312740a<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    
    <span class="tooltip">22-48deb577c74b5<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">23-48deb617abfac<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">24-48deb69e21e03<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">25-48deb70c2509f<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">26-48deb7552c551<span class="tooltip_text">Listen to the audio.  Choose the appropriate English translation.</span></span><br>
    <span class="tooltip">2-48de9e8342cea<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    
    <span class="tooltip">3-48dea00d81ce7<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    <span class="tooltip">4-48dea0b40ecff<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    <span class="tooltip">5-48dea15528901<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    <span class="tooltip">6-48dea1c4a9bc5<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    <span class="tooltip">8-48dea393722b0<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    <span class="tooltip">9-48dea3f0eff27<span class="tooltip_text">Match the audio with the corresponding Arabic script.</span></span><br>
    
    <span class="tooltip">16-48deb11beb2e2<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">17-48deb1d84d9c2<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">18-48deb22710386<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">19-48deb28d00ba5<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">35-48e117bb2b10e<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">36-48e118d066cb1<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    
    <span class="tooltip">37-48e11992902d7<span class="tooltip_text">Listen to the Arabic word or phrase. Choose the image that corresponds with what you hear.</span></span><br>
    <span class="tooltip">10-48dea5c1da876<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    <span class="tooltip">11-48dea6b42db51<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    <span class="tooltip">12-48dea792f3e10<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    <span class="tooltip">13-48dea859df74f<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    <span class="tooltip">14-48deab1069cd4<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    
    <span class="tooltip">15-48deabca4683e<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    <span class="tooltip">34-48e115d5a9eef<span class="tooltip_text">Choose the Arabic script and sound that corresponds with the image.</span></span><br>
    </p>
    However, when I use AJAX to request the page, the XML is returned instead of the HTML. Is there a way to get the HTML?

    Thanks.
    -- </byuhobbes>

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    However, when I use AJAX to request the page, the XML is returned instead of the HTML. Is there a way to get the HTML?

    Thanks.
    well I'm a little confused,
    - did you try to use responseText instead and didn't work?
    - what processor do you use to make transformation?
    first time I was thinking that you use javascript to do that.

    http://www.mindlence.com/WP/?page_id=224

    best regards

  • #5
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Sorry for the ambiguity.

    The responseText attribute of the AJAX object returned the source code of the XML page, instead of the generated HTML which I am looking for.

    I used the FireFox Web Developer 1.1.6 add-on to get the HTML generated by the XSL transformation (View Source-->View Generated Source).
    -- </byuhobbes>

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    Sorry for the ambiguity.

    The responseText attribute of the AJAX object returned the source code of the XML page, instead of the generated HTML which I am looking for.

    I used the FireFox Web Developer 1.1.6 add-on to get the HTML generated by the XSL transformation (View Source-->View Generated Source).
    can you post a link to the test page?

    best regards

  • #7
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    The XML data is located at http://arclite.byu.edu/scorm_test.xml. If view the source and compare it to what you are seeing on the page, you will notice there is a difference. That's because I am using an XSL stylesheet (http://arclite.byu.edu/ScoTest.xsl) to transform the XML into browser-readable HTML. If you have the FireFox Web Developer extension, you can view the HTML generated by this XSL transformation by selecting (from the Web Developer toolbar) View Source --> View Generated Source.

    My problem is that when I request this page with AJAX, the responseText property returns the source of the XML file, not the HTML generated by the XSL transformation.

    Now, my original question was whether anyone knew how to access the generated HTML rather than the XML source?
    -- </byuhobbes>

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    sorry for delay with answer.

    Quote Originally Posted by byuhobbes85 View Post
    The XML data is located at http://arclite.byu.edu/scorm_test.xml. If view the source and compare it to what you are seeing on the page, you will notice there is a difference. That's because I am using an XSL stylesheet (http://arclite.byu.edu/ScoTest.xsl) to transform the XML into browser-readable HTML. If you have the FireFox Web Developer extension, you can view the HTML generated by this XSL transformation by selecting (from the Web Developer toolbar) View Source --> View Generated Source.

    My problem is that when I request this page with AJAX, the responseText property returns the source of the XML file, not the HTML generated by the XSL transformation.

    Now, my original question was whether anyone knew how to access the generated HTML rather than the XML source?
    I test the xml transformation with your xslt and are some problem:
    - the transformation result have a doctype and including this in the page will produce problems. Solution: Use omit-xml-declaration and remove doctype-* from xsl: output
    - the transformation result don't have a single root node therefor is not valid xml. The TestItems node is not matched by any template and ignored. Solution: depend of what you intend to do with generated fragment. As far you want to use ajax you need a document fragment not a full html page and the only thing to do is to modify template to add a root node, for exampe a div which will be inserted in the body element.
    If you don't use the browser xslt processor for xslt transformation you must use a external xslt processor or a javascript xslt processor, as in the link I posted.
    Can you post the javascript part? It's not clear for me how do you use ajax here.

    best regards

  • #9
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Sorry, I posted an older working version before making it a fragment. You can try those links again and they should be generating an HTML fragment rather than an entire document.

    Here is the JavaScript I am using to request this HTML and load it into my page.

    Code:
    function navigate(target) {
    	//alert(target);
    	var request;
    	var location = "scorm_test.xml";
    	
    	if (window.XMLHttpRequest) {
    		request = new XMLHttpRequest();
    	} else {
    		request = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    	}
    	
    	request.onreadystatechange = function() {
    		if (request.readyState == 4) {
    			alert("Response text: "+ request.responseText);
    			document.getElementById('content').innerHTML = request.responseText;
    		}
    	}
    	
    	request.open("POST", location, true);
    	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    	request.setRequestHeader('Cache-Control', 'no-cache')
    	request.send(null);
    }

    P.S. I understand this is a contrived example that would be much easier to do with server scripting. However, I'm operating under certain restraints and I am hoping that this is something I can do with AJAX.
    -- </byuhobbes>

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    Sorry, I posted an older working version before making it a fragment. You can try those links again and they should be generating an HTML fragment rather than an entire document.

    Here is the JavaScript I am using to request this HTML and load it into my page.

    Code:
    function navigate(target) {
    	//alert(target);
    	var request;
    	var location = "scorm_test.xml";
    	
    	if (window.XMLHttpRequest) {
    		request = new XMLHttpRequest();
    	} else {
    		request = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    	}
    	
    	request.onreadystatechange = function() {
    		if (request.readyState == 4) {
    			alert("Response text: "+ request.responseText);
    			document.getElementById('content').innerHTML = request.responseText;
    		}
    	}
    	
    	request.open("POST", location, true);
    	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    	request.setRequestHeader('Cache-Control', 'no-cache')
    	request.send(null);
    }

    P.S. I understand this is a contrived example that would be much easier to do with server scripting. However, I'm operating under certain restraints and I am hoping that this is something I can do with AJAX.
    this must work if you have an element with id="content".
    the script which send the responseText, what you have in 'location', apply xslt transformation to xml file? if not this is why you get a xml instead of html because nobody don't apply xslt transformation.

    Edit: sorry I miss the line with location='scorm_test.xml'.
    You must apply transformation, so location must point to a script who do that or do this stuff using javascript. First is better because avoid easy cross-browser problem with js.

    best regards
    Last edited by oesxyl; 11-26-2008 at 03:16 PM.

  • #11
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    So when you access an XML file through AJAX, it does not apply the XSL? When is the XSL applied?

    This was really my initial question. I didn't really think it would be this hard to answer...
    -- </byuhobbes>

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    So when you access an XML file through AJAX, it does not apply the XSL? When is the XSL applied?

    This was really my initial question. I didn't really think it would be this hard to answer...
    one of this way:
    - browser apply xsl to xml if you have a xsl:stylesheet declaration in xml, as you have, but this don't involve javascript, is native support more or less.
    - using ajax, you have a xslt processor, server-side, and a script which apply transformation, send response to the browser and there manipulate with javascript( client-side).
    - using ajax, using javascript on client-side, load xml, load xslt, apply transformation and manipulate.

    I don't know to be other methods.

    best regards

  • #13
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    After some searching, I found this page on the W3Schools website. It describes how to apply an XSL transformation to an XML document using JavaScript.

    http://www.w3schools.com/xsl/xsl_client.asp
    -- </byuhobbes>

  • #14
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by byuhobbes85 View Post
    After some searching, I found this page on the W3Schools website. It describes how to apply an XSL transformation to an XML document using JavaScript.

    http://www.w3schools.com/xsl/xsl_client.asp
    in my opinion w3schools is very good for starting, but later you must move to something else.
    Same thing with more details is in the link I posted in my previous post.

    XML, XSL, and AJAX

    I prefere the second way in list from my previous post, if is possible:

    - using ajax, you have a xslt processor, server-side, and a script which apply transformation, send response to the browser and there manipulate with javascript( client-side).
    you need to use this way, with javascript? Let's me know please, to know how I can help you.

    best regards

  • #15
    Regular Coder byuhobbes85's Avatar
    Join Date
    Oct 2006
    Location
    Ames, Iowa, USA
    Posts
    116
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Unfortunately, I have been constrained in this project to use browser-side functionality. Otherwise, this would be a lot simpler to do with server scripting.

    Thanks for your help.
    -- </byuhobbes>


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •