XML 应用程序
来源:互联网 发布:数据库管理规范 编辑:程序博客网 时间:2024/06/08 11:37
XML 应用程序
本节演示由 HTML 和 JavaScript 构建的一个小型 XML 应用程序。
XML 文档实例
请看下面这个 XML 文档 ( "cd_catalog.xml" ),它描述了一个 CD 目录:
<?xml version="1.0" encoding="ISO-8859-1"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD>..... more ....
在您的浏览器中查看完整的 "cd_catalog.xml" 文件。
加载 XML 文档
为了加载 XML 文档 (cd_catalog.xml),我们使用了与 XML 解析器那一节中相同的代码:
var xmlDoc;if (window.ActiveXObject) { // code for IE xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }else if (document.implementation.createDocument) { // code for Firefox, Mozilla, Opera, etc. xmlDoc=document.implementation.createDocument("","",null); }else { alert('Your browser cannot handle this script'); }xmlDoc.async=false;xmlDoc.load("cd_catalog.xml");
在本代码执行后,xmlDoc 成为一个 XML DOM 对象,可由 JavaScript 访问。
把 XML 数据显示为 HTML 表格
以下代码使用来自 XML DOM 对象的数据来填充一个 HTML 表格:
document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("CD");for (var i=0;i<x.length;i++){ document.write("<tr>");document.write("<td>");document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");
针对 XML 文档中的每个 CD 元素,会创建一个表格行。每个表格行包含两个表格数据单元,其中的数据来自当前 CD 元素的 ARTIST 和 TITLE。
TIY:查看如何在一个 HTML 表格中显示 XML 数据。
在任意 HTML 元素中显示 XML 数据
XML 数据可以拷贝到任何有能力显示文本的 HTML 元素。
下面的代码为 HTML 文件的 <head> 部分。这段代码从第一个 <CD> 元素中获得 XML 数据,然后在 id="show" 的 HTML 元素中显示数据:
var x=xmlDoc.getElementsByTagName("CD");i=0;function display(){artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year;document.getElementById("show").innerHTML=txt;}
HTML 的 body 元素包含一个 onload 事件属性,它的作用是在页面已经加载时调用 display() 函数。body 元素中还包含了供接受 XML 数据的 <div id='show'> 元素。
<div id='show'></div></body>
TIY:查看 XML 数据如何在 <div> 元素中显示。
通过上例,你只能看到来自 XML 文档中第一个 CD 元素中的数据。为了导航到数据的下一行,必须添加更多的代码。
添加导航脚本
为了向上例添加导航(功能),需要创建 next() 和 previous() 两个函数:
function next(){if (i<x.length) { i++; display(); }}function previous(){if (i>0) { i--; display(); }}
next() 函数确保已到达最后一个 CD 元素后不显示任何东西,previous () 函数确保已到达第一个 CD 元素后不显示任何东西。
通过点击 next/previous 按钮来调用 next() 和 previous() 函数:
<input type="button" onclick="previous()" value="previous" /><input type="button" onclick="next()" value="next" />
TIY:查看如何在 XML 记录中导航。
现在,把所有的东西组合起来!
只需要一点点创新,您就可以创建一个完整的应用程序。
如果您使用本页中学到的知识,再加上一点点想象力,就可以轻松地开发出一个完整的应用程序。
如果您正在使用 IE 5.0 或者更高的版本:看看您可以怎样为这个应用程序添加一点点想象力。
- XML 应用程序
- XML 应用程序
- XML 应用程序
- XML应用程序开发--上
- 应用程序写Xml文档
- XML和现代CGI应用程序
- 应用程序部署文件Web.xml
- XML和现代CGI应用程序
- XML和现代CGI应用程序
- 创建应用程序的XML文件
- ant-build.xml打包应用程序
- 测试XML Web 服务和应用程序
- XML 如何推动下一代信息共享应用程序
- tomcat自动加载应用程序的web.xml
- javascript读取xml实现应用程序菜单效果
- 应用程序——INI和XML配置文件
- 2.3 AndroidMainfest.xml与应用程序功能组件
- 应用程序——INI和XML配置文件
- Css兼容IE8版本的解决方法
- ASP.NET 异常处理
- http://www.opencv.org.cn
- 在VC++ 6.0下利用消息实现内部进程通讯
- Programing_MagicCube
- XML 应用程序
- 二十几岁决定一生
- 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- Trend of GDP
- oracle中的视图详解
- 网上SQL问题连载4
- SQL Server CE 开发准备—助你腾飞
- 深入探究VC —— 编译器cl.exe(2)
- Jquery UI Theme 切换