xml_applications.asp

W3Schools tutorial..web designing

<h2>Display XML Data in any HTML Element</h2>
<p>XML data can be copied into any HTML element that can display text.</p>
<p>The code below is part of the &lt;head&gt; section of the HTML file. It gets the 
XML data from the first &lt;CD&gt; element and displays it in the HTML element with 
the id=&quot;show&quot;:</p>
<table border="1" width="100%" class="ex" cellspacing="0">
  <tr>
    <td>
      <pre>var x=xmlDoc.getElementsByTagName(&quot;CD&quot;);
i=0;

function display()
{
artist=
(x[i].getElementsByTagName(&quot;ARTIST&quot;)[0].childNodes[0].nodeValue);
title=
(x[i].getElementsByTagName(&quot;TITLE&quot;)[0].childNodes[0].nodeValue);
year=
(x[i].getElementsByTagName(&quot;YEAR&quot;)[0].childNodes[0].nodeValue);</pre>
		<pre>txt=&quot;Artist: &quot;+artist+&quot;&lt;br /&gt;Title: &quot;+title+&quot;&lt;br /&gt;Year: &quot;+year;

document.getElementById(&quot;show&quot;).innerHTML=txt;
}</pre>
    </td>
  </tr>
</table>
<p>The body of the HTML document contains an <b>onload</b> eventattribute that 
will call the display() function when the page has loaded. It also contains a <b>
&lt;div id='show'&gt;</b> element to receive the XML data.</p>
<table border="1" width="100%" class="ex" cellspacing="0">
  <tr>
    <td>
      <pre>&lt;body onload=&quot;display()&quot;&gt;</pre>
		<pre>&lt;div id='show'&gt;&lt;/div&gt;</pre>
		<pre>&lt;/body&gt;</pre>
    </td>
  </tr>
</table>
<p>Try it yourself:
<a target="_blank" href="tryit.asp@filename=tryxml_app_first">See how the XML 
data is displayed inside the &lt;div&gt; element</a>.</p>
<p>With the example above, you will only see data from the first CD element in 
the XML document. To navigate to the next line of data, you have to add some 
more code.&nbsp;</p>
<hr />

<h2>Add a Navigation Script</h2>
<p>To add navigation to the example above, create two functions called&nbsp; 
next() and previous():</p>
<table border="1" width="100%" class="ex" cellspacing="0">
  <tr>
    <td>
      <pre>function next()
{
if (i&lt;x.length)
  {
  i++;
  display();
  }
}

function previous()
{
if (i&gt;0)
  {
  i--;
  display();
  }
}</pre>
    </td>
  </tr>
</table>
<p>The next() function makes sure that nothing is displayed if you already are at 
the last CD element, and the previous () function makes sure that nothing is 
displayed if you already are at the first CD element.</p>
<p>The next() and previous() functions are called by clicking next/previous 
buttons:</p>
<table border="1" width="100%" class="ex" cellspacing="0" id="table1">
  <tr>
    <td>
      <pre>&lt;input type=&quot;button&quot; onclick=&quot;previous()&quot; value=&quot;previous&quot; /&gt;
&lt;input type=&quot;button&quot; onclick=&quot;next()&quot; value=&quot;next&quot; /&gt;</pre>
    </td>
  </tr>
</table>
<p>Try it yourself:
<a target="_blank" href="tryit.asp@filename=tryxml_app_navigate">See how you can navigate through the XML records</a>.</p>
<hr />

<h2>All Together Now</h2>
<p><b>With a little creativity you can create a full application.</b></p>
<p>
If you use what you have learned on this page, and a little imagination, you
can easily develop this into a full application.
</p>
<p>Try it yourself: <a target="_blank" href="tryit.asp@filename=tryxml_app">See how you can add a little fancy to this application</a>.
</p>
<p>For more information about using JavaScript and the XML DOM, visit our <a href="../dom/default.asp">XML 
DOM tutorial.</a></p>
<hr />

<a href="xml_http.asp"><img alt="previous" border="0" src="../images/btn_previous.gif" /></a>
<a href="xml_namespaces.asp"><img alt="next" border="0" src="../images/btn_next.gif" width="100" height="20" /></a>

<br />
<hr />

<!-- **** SPOTLIGHTS 1 **** -->

<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->

<h2>Want To Be A Web Master?</h2>
<p>If you want to be a Web Master, you will have to host your web site with an ISP (Internet Service Provider).</p>
<p>MaximumASP offers seven different configurations of dedicated servers to meet your Windows and .NET hosting needs.
Hosted on our multi-tiered Enterprise Class network, these servers provide the performance, security and reliability
you need to host your high end web sites and applications. 
</p>
<p><a target="_blank" href="../../www.maximumasp.com/about/specials.aspx">Visit MaximumASP</a></p>
<hr />


<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />

<center>

<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*imgtxt*/
google_ad_slot = "8606855891";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</center>
<hr />


<!-- **** END SPOTLIGHTS **** -->

</td></tr>

<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='xml_applications.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>

</table>
</td></tr>
</table>
</td>


<td width="145" align="center" valign="top">




<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=xml" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>

</td>
</tr></table>

</body>
</html>