943,708 Members | Top Members by Rank

Ad:
Jul 13th, 2009
0

How to display XML in a browser?

Expand Post »
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>
Similar Threads
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Jul 13th, 2009
1

Re: How to display XML in a browser?

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...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 19th, 2009
0

Re: How to display XML in a browser?

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.
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Jul 19th, 2009
0

Re: How to display XML in a browser?

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.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 22nd, 2009
0

Re: How to display XML in a browser?

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>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 22nd, 2009
1

Re: How to display XML in a browser?

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
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 24th, 2009
0

Re: How to display XML in a browser?

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
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Preventing trapped key from being added to textarea
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Form submission with Iframe





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC