Xml content parsed in JS

P

pierre

Hello,

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

Thanks in advance,
 
B

Bart Van der Donck

pierre wrote:

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

That shouldn't be a problem, but the code depends on the structure of
the XML file. Could you post it ?
 
M

Martin Honnen

pierre wrote:

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

Ajax? Well that does not really tell what code and APIs you use. If you
are using XMLHttpRequest then it already has XML parsing support for the
response the server sends built in, just make sure the server sends the
answer with an XML MIME type as the Content-Type header e.g.
Content-Type: application/xml
or
Content-Type: text/xml
and XMLHttpRequest parses the response body as XML and populates
requestObject.responseXML as an XML DOM document you can script with DOM
methods (DOM Level 2 Core and XML, some DOM Level 3 Core, DOM Level 3
XPath with Mozilla or with Opera 9, DOM Level 1 XML with IE/MSXML where
MSXML 3 and later support some MSXML specific stuff for XPath).
 
P

pierre

That shouldn't be a problem, but the code depends on the structure of
the XML file. Could you post it ?

This is my Xml content :

<MyData>
<Columns>
<Column>Id</Column>
<Column>Name</Column>
</Columns>
<Rows>
<Row>
<Id>1</Id>
<Name>Peter</Name>
</Row>
<Row>
<Id>2</Id>
<Name>John</Name>
</Row>
</Rows>
</MyData>

thanks in advance,
 
P

pierre

Ajax? Well that does not really tell what code and APIs you use. If you
are using XMLHttpRequest then it already has XML parsing support for the
response the server sends built in, just make sure the server sends the
answer with an XML MIME type as the Content-Type header e.g.
Content-Type: application/xml
or
Content-Type: text/xml
and XMLHttpRequest parses the response body as XML and populates
requestObject.responseXML as an XML DOM document you can script with DOM
methods (DOM Level 2 Core and XML, some DOM Level 3 Core, DOM Level 3
XPath with Mozilla or with Opera 9, DOM Level 1 XML with IE/MSXML where
MSXML 3 and later support some MSXML specific stuff for XPath).

In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

thanks,
 
M

Martin Honnen

pierre wrote:

In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

Well if you want a HTML table then certainly one solution is to have
your PHP script create the HTML table and not XML and send the HTML
table back to the client side script.

If your PHP script has to send XML then I have already explained that
XMLHttpRequest on the client does everything to parse the XML it
receives into a DOM document that you can navigate using DOM scripting.
So send your XML with HTTP response header
Content-Type: application/xml
use XMLHttpRequest on the client and traverse responseXML to extract the
XML data you need and build your HTML table with the DOM.
See
<http://www.faqts.com/knowledge_base/view.phtml/aid/6826/fid/616>

In some browsers (IE 6, Firefox/Mozilla, Opera 9) you can also run XSLT
transformations on responseXML thus if you know to write XSLT
stylesheets then you could write one to transform the XML to a HTML
table and run that transformation on the client and insert the result in
your HTML document.
For Mozilla's and Opera's XSLT processor API see here:
<http://developer.mozilla.org/en/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations>
 
B

Bart Van der Donck

pierre said:
This is my Xml content :

<MyData>
<Columns>
<Column>Id</Column>
<Column>Name</Column>
</Columns>
<Rows>
<Row>
<Id>1</Id>
<Name>Peter</Name>
</Row>
<Row>
<Id>2</Id>
<Name>John</Name>
</Row>
</Rows>
</MyData>

Here's one way to display this in tabular format:

x = '<MyData> ';
x += ' <Columns> ';
x += ' <Column>Id</Column> ';
x += ' <Column>Name</Column> ';
x += ' </Columns> ';
x += ' <Rows> ';
x += ' <Row> ';
x += ' <Id>1</Id> ';
x += ' <Name>Peter</Name> ';
x += ' </Row> ';
x += ' <Row> ';
x += ' <Id>2</Id> ';
x += ' <Name>John</Name> ';
x += ' </Row> ';
x += ' </Rows> ';
x += '</MyData> ';

x = x.replace(/<MyData>/ig,'<table border="1">');
x = x.replace(/<\/MyData>/ig,'</table>');
x = x.replace(/<Columns>|<Row>/ig,'<tr>');
x = x.replace(/<\/Columns>|<\/Row>/ig,'</tr>');
x = x.replace(/<Id>|<Name>/ig,'<td>');
x = x.replace(/<\/Id>|<\/Name>/ig,'</td>');
x = x.replace(/<Column>/ig,'<th>');
x = x.replace(/<\/Column>/ig,'</th>');
x = x.replace(/<Rows>|<\/Rows>/ig,'');

document.writeln(x)
 
P

pierre

Tom Cole said:
Use XSLT.

I've looked in this direction... still, all browsers don't really seem to be
compliant with it (from what I quickly read).
Am I wrong ?
 
J

Jeremy

pierre said:
In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

thanks,

I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML. Instead of messing with the DOM
tree of responseXML (as you would have to with XML), you can simply use
one line of code to turn your JSON data (from responseText) into an
array of Objects, and use much less code to generate your table using DOM.

For more information about JSON, go to <http://www.json.org> - in
particular, check out the "PHP-JSON" link
(<http://www.aurore.net/projects/php-json/>), which provides a very fast
PHP extension that encodes any PHP variable, object, or array into a
JSON string with one call. Handy!

If you want to stick with XML, you may want to look at Google's
heavyweight "AJAXSLT" library: <http://goog-ajaxslt.sourceforge.net/> -
I have never used it and am not vouching for it, but if you want to
reliably do XSLT from Javascript you're going to have to use a fairly
heavy library to do it.

Jeremy
 
T

Tom Cole

I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML. Instead of messing with the DOM
tree of responseXML (as you would have to with XML), you can simply use
one line of code to turn your JSON data (from responseText) into an
array of Objects, and use much less code to generate your table using DOM.

I agree that JSON might be easier, but he's already got XML coming from
his server. If you've got the option to provide JSON text output, you
may want to consider it. It's no harder then pumping out an XML file.
If you want to stick with XML, you may want to look at Google's
heavyweight "AJAXSLT" library: <http://goog-ajaxslt.sourceforge.net/> -
I have never used it and am not vouching for it, but if you want to
reliably do XSLT from Javascript you're going to have to use a fairly
heavy library to do it.

How heavyweight is XSLTProcessor (non-IE) or Microsoft.XMLDOM (IE)?
Doesn't seem that cumbersome to me. I do something similar (you'd have
to hack at this code a bit but for your purposes, but)...

if (typeof XSLTProcessor != 'undefined') {
var processor = new XSLTProcessor();
var request = getXMLHttpRequest();
if (request) {
request.open("GET", url, false);
request.send(null);
var xsl = request.responseXML;
processor.importStylesheet(xsl);
var fragment = processor.transformToFragment(value, document);
if (element)
element.appendChild(fragment);
}
else {
return;
}
}
else {
var processor = new ActiveXObject("Microsoft.XMLDOM");
if (processor) {
processor.async = false;
processor.load(url);
var xmlString = value.transformNode(processor);
if (element)
element.innerHTML = xmlString;
}
else {
return;
}
}
 
P

pierre

Tom Cole said:
I agree that JSON might be easier, but he's already got XML coming from
his server. If you've got the option to provide JSON text output, you
may want to consider it. It's no harder then pumping out an XML file.


How heavyweight is XSLTProcessor (non-IE) or Microsoft.XMLDOM (IE)?
Doesn't seem that cumbersome to me. I do something similar (you'd have
to hack at this code a bit but for your purposes, but)...

if (typeof XSLTProcessor != 'undefined') {
var processor = new XSLTProcessor();
var request = getXMLHttpRequest();
if (request) {
request.open("GET", url, false);
request.send(null);
var xsl = request.responseXML;
processor.importStylesheet(xsl);
var fragment = processor.transformToFragment(value, document);
if (element)
element.appendChild(fragment);
}
else {
return;
}
}
else {
var processor = new ActiveXObject("Microsoft.XMLDOM");
if (processor) {
processor.async = false;
processor.load(url);
var xmlString = value.transformNode(processor);
if (element)
element.innerHTML = xmlString;
}
else {
return;
}
}

thank you all for your response.
i think i'll use json.
 
M

Martin Honnen

Jeremy wrote:

I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML.

Which browser supports _XML_HttpRequest but does not support _XML_ in
your view?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,780
Messages
2,569,607
Members
45,240
Latest member
pashute

Latest Threads

Top