...

View Full Version : XML, XSL, and AJAX



byuhobbes85
11-22-2008, 05:29 PM
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

oesxyl
11-22-2008, 05:33 PM
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

byuhobbes85
11-22-2008, 05:43 PM
The first bit of one of the XML files is like this.


<?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.


<?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.


<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.

oesxyl
11-22-2008, 05:57 PM
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

byuhobbes85
11-24-2008, 05:06 PM
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).

oesxyl
11-24-2008, 11:35 PM
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

byuhobbes85
11-26-2008, 01:47 AM
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?

oesxyl
11-26-2008, 03:44 PM
sorry for delay with answer.


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

byuhobbes85
11-26-2008, 04:03 PM
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.


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.

oesxyl
11-26-2008, 04:11 PM
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.


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.

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

byuhobbes85
11-26-2008, 04:19 PM
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...

oesxyl
11-26-2008, 04:27 PM
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

byuhobbes85
11-26-2008, 04:47 PM
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

oesxyl
11-26-2008, 04:59 PM
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.

http://www.codingforums.com/showpost.php?p=752666&postcount=4

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

byuhobbes85
11-26-2008, 07:28 PM
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.

oesxyl
11-26-2008, 07:37 PM
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.
ok, I will try to post an working example as fast I can.

best regards

oesxyl
11-30-2008, 09:12 PM
The text that you have entered is too long (47375 characters). Please shorten it to 20000 characters long.


html:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>


test.css:


* { margin: 0; padding: 0; }
body { padding: 1.0em; }
.header1 { font-weight: bold; }
.tooltip { margin: 3px 0; border: outset 1px #ddd; color: #00f; background-color: #fff; }
.tooltip_text { padding: 0 0 0 2.0em; color: #000; background-color: #fff; }


test.js:


/* -*- c++ -*-
*/
/**
* Load a xml file from the disc.
* Tested only in Firefox 2.0
*/
function load_xml(fname){
var xmldoc = null;
if(window.ActiveXObject){
// IE specific, must be documented
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
}else{
// Gecko based, Opera and others???
xmldoc = document.implementation.createDocument('','',null);
}
xmldoc.async = false;
xmldoc.load(fname);
return ((xmldoc.nodeType == 9) ? xmldoc.documentElement : null);
}

/**
* Load a xslt file from the disc and create xslt processor
* Tested only in Firefox 2.0
*/
function load_xslt(fname){
var xsltdoc = null;
var xmldoc = load_xml(fname);
if(xmldoc){
xsltdoc = new XSLTProcessor();
if(xsltdoc){
xsltdoc.importStylesheet(xmldoc);
}
}
return xsltdoc;
}

/**
* Load test.xml, test.xsl, apply transformation and insert
* resulted tree in xhtml body.
*/
function loadall(){
var b = document.getElementsByTagName('body');
if(b){
b = b[0];
var xmldf = load_xml('test.xml');
var xsltr = load_xslt('test.xsl');
if(xmldf && xsltr){
var si = window.location.search;
var node = xsltr.transformToFragment(xmldf,document);
if(node){
b.appendChild(node);
}
}
}
}

window.onload = loadall;

oesxyl
11-30-2008, 09:18 PM
part 2:

test.xml: is your xml from the link you posted, I hope is not changed on download.
I can post it, because is still over 20000 chars,:rolleyes:

test.xsl:


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
<xsl:template match="/TestItems">
<div>
<p class="header1">SCO Test</p>
<p>
<xsl:apply-templates/>
</p>
</div>
</xsl:template>

<xsl:template match="item">
<p class="tooltip">
<xsl:value-of select="itemId"/>
<span class="tooltip_text">
<xsl:value-of select="instructions"/>
</span>
</p>
</xsl:template>

</xsl:stylesheet>


Some note:
- I asume that all this files are on your server.
- I use doctype declaration in xslt but was not necesary, all you need is the
xhtml namespace and in some cases omit-xml-declaration="yes"
- this could be usefull about span and divs:

http://www.htmldog.com/guides/htmlintermediate/spandiv/

- I used you xml and xslt files, I don't touch xml but xslt is modified
- you can use javascript, dom to add events, move/remove or change contents of the nodes,
change css on fly or other things.

best regards

keshi
12-04-2008, 06:18 PM
Thanks for the link http://www.w3schools.com/xsl/xsl_client.asp it provides detailed information on how to use XSLT to transform documents to XHTML which can be viewed in your browser easily. Glad that I found this page on this forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum