How to display XML in a browser?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Dec 2007
Posts: 621
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

How to display XML in a browser?

 
0
  #1
Jul 13th, 2009
I would like to know how to display XML in a browser.
Also if possible to maniuplate the XML elements.
Havent touched based with XML in awhile and still abit rusty.

Thanks, Regards X

PS: Below is the listed code and below is the wished output.

Code :
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <urlset
  3. xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
  6. http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
  7. xsl:output method="html">
  8. <url>
  9.   <loc>http://www.google.com/</loc>
  10.   <lastmod>2009-07-03T19:00:55+00:00</lastmod>
  11.   <changefreq>monthly</changefreq>
  12.   <priority>1.00</priority>
  13. </url>

Output :
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <a href="http://www.google.com/">Google</a>
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: How to display XML in a browser?

 
1
  #2
Jul 13th, 2009
It's either you can use plain stylesheet(css), XSLT(xsl) or Ajax/XMLDOM Parser's using javascript.

But here's a bit of example, formattimg its layout using XSLT, also try the XML section to get precise results over this issue.

From your XML file, you must add a single of this:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="./test.xsl"?>
...

code for the test.xsl stylesheet:
xml Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/REC-html40">
  3. <xsl:output method="html"/>
  4. <xsl:template match="/">
  5.    <html>
  6.       <head>
  7.          <title>Displaying XML Document to a browser</title>
  8.       </head> 
  9.       <body>
  10.       <h1>XML-XSL Generated Content</h1>
  11. <xsl:apply-templates/>
  12.       </body>
  13.       </html>
  14. </xsl:template>
  15. <xsl:template match="url">
  16. <p><xsl:apply-templates/></p>
  17. </xsl:template>
  18. <xsl:template match="url/loc">
  19.       <a style="text-decoration:none;color:red;">
  20.       <xsl:attribute name="href">
  21.          <xsl:apply-templates/>
  22.       </xsl:attribute>
  23.       <xsl:apply-templates/>
  24.    </a><br/>
  25. </xsl:template>
  26. </xsl:stylesheet>

The .xsl sample document will only work in IE6+/OPERA9+/FF2+

hope it helps...
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 621
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to display XML in a browser?

 
0
  #3
Jul 19th, 2009
I tired your document as a .html and a .xsl .
The html appeared in html and the xsl appeared in an xml format but nothing useful.
Any ideas? Thanks.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: How to display XML in a browser?

 
0
  #4
Jul 19th, 2009
The only document that you need to open is your posted XML file, which you must referenced into my posted XSL file.

Converting the XSL document into html format, will get displayed as a normal tags in your browser or opening it directly will get parsed as a normal XML document.

Doing this with AJAX is more reliable than having it formatted as XML-based content and will take alot of work.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: How to display XML in a browser?

 
0
  #5
Jul 22nd, 2009
Here's a little demonstration of displaying XML content into a browser.

Saying that we have this declaration along with our XML doc's.

url.xml:

xml Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="UTF-8" standalone='yes'?>
  2. <!DOCTYPE urlset [
  3.    <!ELEMENT urlset ( url* )>
  4.    <!ELEMENT url ( loc, lastmod, changefreq, priority )>
  5.       <!ATTLIST url
  6.          id ID #IMPLIED
  7.          title CDATA #IMPLIED
  8.          xml:lang CDATA "en">
  9.    <!ELEMENT loc (#PCDATA)>
  10.    <!ELEMENT changefreq ( schedule )>
  11.       <!ATTLIST 
  12. changefreq
  13.          update CDATA #REQUIRED>
  14.    <!ELEMENT schedule ( sunday, monday, tuesday, wednesday, thursday, friday, saturday )>
  15.       <!ELEMENT sunday (#PCDATA)>
  16.       <!ELEMENT monday (#PCDATA)>
  17.       <!ELEMENT tuesday (#PCDATA)>
  18.       <!ELEMENT wednesday (#PCDATA)>
  19.       <!ELEMENT thursday (#PCDATA)>
  20.       <!ELEMENT friday (#PCDATA)>
  21.       <!ELEMENT saturday (#PCDATA)>
  22.    <!ELEMENT lastmod (#PCDATA)>
  23.    <!ELEMENT priority EMPTY>
  24.       <!ATTLIST priority
  25.          set CDATA #REQUIRED>
  26. ]>
  27. <urlset>
  28.    <url xmlns:urlset="http://www.yoursite.org/2009/urlset" xml:lang="en">
  29.       <loc>http://www.google.com/</loc>
  30.       <lastmod>2009-07-21T16:34:19+08:00</lastmod>
  31.       <changefreq update="weekly">
  32.  
  33. <!-- I'll use it as a weekly basis to make it short.
  34.    - you can add new elements for the monthly tags -->
  35.  
  36.          <schedule>
  37.             <sunday>Sunday-Group</sunday>
  38.             <monday>Monday-Group</monday>
  39.             <tuesday>Tuesday-Group</tuesday>
  40.             <wednesday>Wednesday-Group</wednesday>
  41.             <thursday>Thursday-Group</thursday>
  42.             <friday>Friday-Group</friday>
  43.             <saturday>Saturday-Group</saturday>
  44.          </schedule>
  45.       </changefreq>
  46.       <priority set="1.00" />
  47.    </url>
  48. </urlset>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: How to display XML in a browser?

 
1
  #6
Jul 22nd, 2009
And here's the start page, along with the script that will generate our XML content:

main.html:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Iframe Page</title>
  11. <meta name="author" content="DANI-USER : essential" />
  12. <style type="text/css">
  13. /* <![CDATA[ */
  14. td { text-align : center; }
  15. /* ]]> */
  16. </style>
  17. <script type="text/javascript">
  18. // <![CDATA[
  19.    var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
  20.    var handleMyRequest = function() {
  21. /*******************************
  22.        AJAX POWERED
  23. ********************************
  24.   - I've keep all of the basic method with innerHTML.
  25.    - So that you can easily go through from each line's
  26.   - Just concentrate on this function and forget about everything that is outside of this block.
  27.  
  28.   http://www.daniweb.com/
  29. *******************************/
  30.    var seq = {
  31.    4 : "complete",
  32.    complete : 4 };   
  33.    if ( seq[ this.readyState ] ) {
  34.       var xDoc = this.responseXML;
  35.       var xNode = xDoc.getElementsByTagName( "*" );
  36.       var xRoot = xDoc.getElementsByTagName( xDoc.documentElement.nodeName );
  37.       var xChild = ( function( childX, rootX ) {
  38.       if ( arguments.length < 2 ) {
  39.          return xRoot[0].getElementsByTagName( childX ); }
  40.        else {
  41.          return rootX.getElementsByTagName( childX ); }
  42.        } );
  43.       var xDate = new Date();
  44.       var xDiv = document.getElementById("main");
  45.    // You can start editing below this line \\
  46.       var xTable = "";
  47.       for ( var x = 0; x < xRoot.length; x++ ) { 
  48.          xTable += '\n<table frame="box" width="100%" rules="all" cellpadding="5" cellspacing="3" border="1">\n';
  49.          xTable += "<thead>\n";
  50.          for ( y = 0; y < xChild( "url" ).length; y++ ) {
  51.             xTable += "<tr>\n";
  52.             xTable += "<th>Location</td>\n";
  53.             xTable += "<th>Last Modified</th>\n";
  54.             xTable += "<th>Schedule</th>\n";
  55.             xTable += "<th>Priority</th>\n";
  56.             xTable += "</tr>\n";
  57.             xTable += "</thead>\n";
  58.             xTable += "<tbody>\n";
  59.             xTable += "<tr>\n";
  60.             xTable += "<td>" + String( xChild( "loc" )[ y ].childNodes[0].nodeValue ).link( xChild( "loc" )[ y ].childNodes[0].nodeValue ) + "</td>";
  61.             xTable += "<td>" + xChild( "lastmod" )[ y ].childNodes[0].nodeValue + "</td>";
  62.             xTable += "<td>" + xChild( [ "sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday" ][ xDate.getDay() ] )[ y ].childNodes[ 0 ].nodeValue + "</td>"; // Weekday scheduling.
  63.                xTable += "<td>" + xChild( "priority" )[ y ].getAttribute( "set" ) + "</td>\n";   
  64.          } xTable += "</tr>\n";
  65.       } xTable += "</tbody>\n"; 
  66.       xTable += "</table>\n";
  67.       xDiv.innerHTML = xTable;
  68.    }  
  69. };
  70.  
  71. /* WARNING! Please do not edit anything beyond this block */
  72.    var XHR = function( method, url, callback ) {
  73.    this.createRequest = null;
  74.    this.xml = 0;
  75.    this.method = method || "GET";
  76.    this.url = url || null;
  77.    this.callback = callback || null;
  78.    if ( arguments.length < 3 ) {
  79.          return false;
  80.    } this.xmlDoc = ( function() {
  81.       try {
  82.          if ( check ) {
  83.             this.xml = new XMLHttpRequest();
  84.          } else {
  85.             try {
  86.             var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  87.             for ( var i = 0; i < client.length; ++i ) {
  88.                if ( new ActiveXObject( client[ i ] )) {
  89.                   this.xml = new ActiveXObject( client[ i ] );
  90.                   break;
  91.                }
  92.             }
  93.             } catch( e ) {
  94.                this.xml = 0;
  95.             }
  96.          }
  97.       } catch( er ) {
  98.          if ( "createRequest" in window ) 
  99.             this.xml = createRequest();
  100.          else
  101.             this.xml = 0;
  102.       } return (( this.xml ) ? this.xml : 0 );
  103.    } )();
  104.    if ( this.xmlDoc ) {
  105.       this.createRequest = ( function( xhr, callback, url, method ) {
  106.          (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
  107.          xhr.onreadystatechange = callback;
  108.          xhr.open( method, encodeURI( url ), true );
  109.          (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
  110.          xhr.send((( method === "POST" ) ? " " : null )); 
  111.       } )( this.xmlDoc, this.callback, this.url, this.method );
  112.    } return this.createRequest;
  113. }; onload = function() {
  114. new XHR( "GET", "url.xml", handleMyRequest ); // You can create new instance of request by calling out, the same procedure above. 
  115. }
  116. // ECMAScript v1.5 ]]>
  117. </script>
  118. </head>
  119. <body>
  120. <div id="main"></div>
  121. </body>
  122. </html>

hope it does what you need...

essential
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 621
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to display XML in a browser?

 
0
  #7
Jul 24th, 2009
Thanks essential, I have had a quick look over the code.
When I get back home from my current project Ill get onto to it.

Thanks, Regards X
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug calendar card checkbox child class column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms game google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC