编辑“XML 应用程序”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[XML学习教程#XML学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>


== XML 文档实例 ==

请看下面这个 XML 文档 ( "cd_catalog.xml" )，它描述了一个 CD 目录： <br>
 <?xml version="1.0" encoding="ISO-8859-1"?><br>
 <CATALOG><br>
  <CD><br>
    <TITLE>Empire Burlesque</TITLE><br>
    <ARTIST>Bob Dylan</ARTIST><br>
    <COUNTRY>USA</COUNTRY><br>
    <COMPANY>Columbia</COMPANY><br>
    <PRICE>10.90</PRICE><br>
    <YEAR>1985</YEAR><br>
  </CD><br>
 .<br>
 .<br>
 ... more ...<br>


== 加载 XML 文档 ==

为了加载 XML 文档 (cd_catalog.xml)，我们使用了与 XML 解析器那一节中相同的代码：<br>

 var xmlDoc;<br>
 if (window.ActiveXObject)<br>
  {<br>
  // code for IE<br>
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");<br>
  }<br>
 else if (document.implementation.createDocument)<br>
  {<br>
  // code for Firefox, Mozilla, Opera, etc.<br>
  xmlDoc=document.implementation.createDocument("","",null);<br>
  }<br>
 else<br>
  {<br>
  alert('Your browser cannot handle this script');<br>
  }<br>
 xmlDoc.async=false;<br>
 xmlDoc.load("cd_catalog.xml");在本代码执行后，xmlDoc 成为一个 XML DOM 对象，可由 JavaScript 访问。<br>

== 把 XML 数据显示为 HTML 表格 ==

以下代码使用来自 XML DOM 对象的数据来填充一个 HTML 表格：<br>

 <nowiki>document.write("<table border='1'>");</nowiki><br>
 <nowiki>var x=xmlDoc.getElementsByTagName("CD");</nowiki><br>
 <nowiki>for (var i=0;i<x.length;i++)</nowiki><br>
 <nowiki>{ <br>
 <nowiki>document.write("<tr>");</nowiki><br>
 <nowiki>document.write("<td>");</nowiki><br>
 <nowiki>document.write(</nowiki><br>
 <nowiki> x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);</nowiki><br>
 <nowiki>document.write("</td>");</nowiki><br>
 <nowiki>document.write("<td>");</nowiki><br>
 <nowiki>document.write(</nowiki><br>
 <nowiki>x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);</nowiki><br>
 <nowiki>document.write("</td>");</nowiki><br>
 <nowiki>document.write("</tr>");</nowiki><br>
 }
 document.write("</table>");<br>
针对 XML 文档中的每个 CD 元素，会创建一个表格行。每个表格行包含两个表格数据单元，其中的数据来自当前 CD 元素的 ARTIST 和 TITLE。<br>



== 在任意 HTML 元素中显示 XML 数据 ==

XML 数据可以拷贝到任何有能力显示文本的 HTML 元素。<br>

下面的代码为 HTML 文件的 <head> 部分。这段代码从第一个 <CD> 元素中获得 XML 数据，然后在 id="show" 的 HTML 元素中显示数据：<br>

 <nowiki>var x=xmlDoc.getElementsByTagName("CD");</nowiki><br>
 <nowiki>i=0;</nowiki><br>
 <nowiki>function display()</nowiki><br>
 {<br>
 <nowiki>artist=</nowiki><br>
 <nowiki>(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);</nowiki><br>
 <nowiki>title=</nowiki><br>
 <nowiki>(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);</nowiki><br>
 <nowiki>year=</nowiki><br>
 <nowiki>( x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);</nowiki><br>
 <nowiki>txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year;</nowiki><br>
 <nowiki>ocument.getElementById("show").innerHTML=txt;</nowiki><br>
 }<br>
HTML 的 body 元素包含一个 onload 事件属性，它的作用是在页面已经加载时调用 display() 函数。body 元素中还包含了供接受 XML 数据的 <div id='show'> 元素。<br>

 <nowiki><div id='show'></div></nowiki><br>
 <nowiki></body></nowiki><br>

通过上例，你只能看到来自 XML 文档中第一个 CD 元素中的数据。为了导航到数据的下一行，必须添加更多的代码。<br>

== 添加导航脚本 ==

为了向上例添加导航（功能），需要创建 next() 和 previous() 两个函数：<br>

 function next()<br>
 {<br>
 if (i<x.length)<br>
  {<br>
  i++;<br>
  display();<br>
  }<br>
 }<br>
 function previous()<br>
 {<br>
 if (i>0)<br>
  {<br>
  i--;<br>
  display();<br>
  }<br>
 }<br>
next() 函数确保已到达最后一个 CD 元素后不显示任何东西，previous () 函数确保已到达第一个 CD 元素后不显示任何东西。<br>

通过点击 next/previous 按钮来调用 next() 和 previous() 函数：<br>

<input type="button" onclick="previous()" value="previous" /><br>
<input type="button" onclick="next()" value="next" /><br>
只需要一点点创新，您就可以创建一个完整的应用程序。
<br>
如果您使用本页中学到的知识，再加上一点点想象力，就可以轻松地开发出一个完整的应用程序。<br>

如果您正在使用 IE 5.0 或者更高的版本：看看您可以怎样为这个应用程序添加一点点想象力。
<br>





[[category:XML学习教程]]