Member Avatar for OmniX

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 :

<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
xsl:output method="html">
<url>
  <loc>http://www.google.com/</loc>
  <lastmod>2009-07-03T19:00:55+00:00</lastmod>
  <changefreq>monthly</changefreq>
  <priority>1.00</priority>
</url>

Output :

<a href="http://www.google.com/">Google</a>
  • 2 Contributors
  • 6 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by OmniX
Member Avatar for essential

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 version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/REC-html40">
<xsl:output method="html"/>
<xsl:template match="/">
   <html>
      <head>
         <title>Displaying XML Document to a browser</title>
      </head> 
      <body>
      <h1>XML-XSL Generated Content</h1>
<xsl:apply-templates/>
      </body>
      </html>
</xsl:template>
<xsl:template match="url">
<p><xsl:apply-templates/></p>
</xsl:template>
<xsl:template match="url/loc">
      <a style="text-decoration:none;color:red;">
      <xsl:attribute name="href">
         <xsl:apply-templates/>
      </xsl:attribute>
      <xsl:apply-templates/>
   </a><br/>
</xsl:template>
</xsl:stylesheet>

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

hope it helps...

commented: Thanks for pointing me in the right direction! +3
Member Avatar for OmniX

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.

Member Avatar for essential

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.

Member Avatar for essential

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 version="1.0" encoding="UTF-8" standalone='yes'?>
<!DOCTYPE urlset [
   <!ELEMENT urlset ( url* )>
   <!ELEMENT url ( loc, lastmod, changefreq, priority )>
      <!ATTLIST url
         id ID #IMPLIED
         title CDATA #IMPLIED
         xml:lang CDATA "en">
   <!ELEMENT loc (#PCDATA)>
   <!ELEMENT changefreq ( schedule )>
      <!ATTLIST 
changefreq
         update CDATA #REQUIRED>
   <!ELEMENT schedule ( sunday, monday, tuesday, wednesday, thursday, friday, saturday )>
      <!ELEMENT sunday (#PCDATA)>
      <!ELEMENT monday (#PCDATA)>
      <!ELEMENT tuesday (#PCDATA)>
      <!ELEMENT wednesday (#PCDATA)>
      <!ELEMENT thursday (#PCDATA)>
      <!ELEMENT friday (#PCDATA)>
      <!ELEMENT saturday (#PCDATA)>
   <!ELEMENT lastmod (#PCDATA)>
   <!ELEMENT priority EMPTY>
      <!ATTLIST priority
         set CDATA #REQUIRED>
]>
<urlset>
   <url xmlns:urlset="http://www.yoursite.org/2009/urlset" xml:lang="en">
      <loc>http://www.google.com/</loc>
      <lastmod>2009-07-21T16:34:19+08:00</lastmod>
      <changefreq update="weekly">

<!-- I'll use it as a weekly basis to make it short.
   - you can add new elements for the monthly tags -->

         <schedule>
            <sunday>Sunday-Group</sunday>
            <monday>Monday-Group</monday>
            <tuesday>Tuesday-Group</tuesday>
            <wednesday>Wednesday-Group</wednesday>
            <thursday>Thursday-Group</thursday>
            <friday>Friday-Group</friday>
            <saturday>Saturday-Group</saturday>
         </schedule>
      </changefreq>
      <priority set="1.00" />
   </url>
</urlset>
Member Avatar for essential

And here's the start page, along with the script that will generate our XML content:

main.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Iframe Page</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
td { text-align : center; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
   var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
   var handleMyRequest = function() {
/*******************************
       AJAX POWERED
********************************
  - I've keep all of the basic method with innerHTML.
   - So that you can easily go through from each line's
  - Just concentrate on this function and forget about everything that is outside of this block.

  http://www.daniweb.com/
*******************************/
   var seq = {
   4 : "complete",
   complete : 4 };   
   if ( seq[ this.readyState ] ) {
      var xDoc = this.responseXML;
      var xNode = xDoc.getElementsByTagName( "*" );
      var xRoot = xDoc.getElementsByTagName( xDoc.documentElement.nodeName );
      var xChild = ( function( childX, rootX ) {
      if ( arguments.length < 2 ) {
         return xRoot[0].getElementsByTagName( childX ); }
       else {
         return rootX.getElementsByTagName( childX ); }
       } );
      var xDate = new Date();
      var xDiv = document.getElementById("main");
   // You can start editing below this line \\
      var xTable = "";
      for ( var x = 0; x < xRoot.length; x++ ) { 
         xTable += '\n<table frame="box" width="100%" rules="all" cellpadding="5" cellspacing="3" border="1">\n';
         xTable += "<thead>\n";
         for ( y = 0; y < xChild( "url" ).length; y++ ) {
            xTable += "<tr>\n";
            xTable += "<th>Location</td>\n";
            xTable += "<th>Last Modified</th>\n";
            xTable += "<th>Schedule</th>\n";
            xTable += "<th>Priority</th>\n";
            xTable += "</tr>\n";
            xTable += "</thead>\n";
            xTable += "<tbody>\n";
            xTable += "<tr>\n";
            xTable += "<td>" + String( xChild( "loc" )[ y ].childNodes[0].nodeValue ).link( xChild( "loc" )[ y ].childNodes[0].nodeValue ) + "</td>";
            xTable += "<td>" + xChild( "lastmod" )[ y ].childNodes[0].nodeValue + "</td>";
            xTable += "<td>" + xChild( [ "sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday" ][ xDate.getDay() ] )[ y ].childNodes[ 0 ].nodeValue + "</td>"; // Weekday scheduling.
               xTable += "<td>" + xChild( "priority" )[ y ].getAttribute( "set" ) + "</td>\n";   
         } xTable += "</tr>\n";
      } xTable += "</tbody>\n"; 
      xTable += "</table>\n";
      xDiv.innerHTML = xTable;
   }  
};

/* WARNING! Please do not edit anything beyond this block */
   var XHR = function( method, url, callback ) {
   this.createRequest = null;
   this.xml = 0;
   this.method = method || "GET";
   this.url = url || null;
   this.callback = callback || null;
   if ( arguments.length < 3 ) {
         return false;
   } this.xmlDoc = ( function() {
      try {
         if ( check ) {
            this.xml = new XMLHttpRequest();
         } else {
            try {
            var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < client.length; ++i ) {
               if ( new ActiveXObject( client[ i ] )) {
                  this.xml = new ActiveXObject( client[ i ] );
                  break;
               }
            }
            } catch( e ) {
               this.xml = 0;
            }
         }
      } catch( er ) {
         if ( "createRequest" in window ) 
            this.xml = createRequest();
         else
            this.xml = 0;
      } return (( this.xml ) ? this.xml : 0 );
   } )();
   if ( this.xmlDoc ) {
      this.createRequest = ( function( xhr, callback, url, method ) {
         (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
         xhr.onreadystatechange = callback;
         xhr.open( method, encodeURI( url ), true );
         (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
         xhr.send((( method === "POST" ) ? " " : null )); 
      } )( this.xmlDoc, this.callback, this.url, this.method );
   } return this.createRequest;
}; onload = function() {
new XHR( "GET", "url.xml", handleMyRequest ); // You can create new instance of request by calling out, the same procedure above. 
}
// ECMAScript v1.5 ]]>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

hope it does what you need...

essential

commented: Nice example, Thanks! +3
Member Avatar for OmniX

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.