自学xml的几个例子

　　xml是一种被用来传输和存储数据的语言，下面给出一些学习xml过程一些简单的例子。具体xml语法请转：http://www.w3school.com.cn/xml/xml_intro.asp

例子1：先给出一个xml文件作为例子

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Date:2016/1/24
    Writer:Wayne Ng
    Theme:xml-basic1
-->
<cartoon>
    <title>妖精的尾巴</title>
    <author>真岛浩</author>
    <style>少年漫画</style>
    <mainCharacters>
        <character id="1">
            <name>艾特利亚斯‧纳兹‧多拉格尼尔 </name>
            <age>400+</age>
            <sex>男</sex>
            <magic>火之灭龙魔法、雷炎龙模式</magic>
            <info>男主角，火之灭龙魔导士，经常闯祸。</info>
        </character>
        <character id="2">
            <name>露西·哈特菲利亚  </name>
            <age>18</age>
            <sex>女</sex>
            <magic>星灵魔法</magic>
            <info>女主角，故事的叙述者，原为富商千金，由于不满父亲离家出走。</info>
        </character>
        <character id="3">
            <name>艾露莎·舒卡勒托  </name>
            <age>26</age>
            <sex>女</sex>
            <magic>换装魔法（骑士）</magic>
            <info>S级魔导士，被称为“妖精女王”，严守纪律、偶尔天然呆。</info>
        </character>
        <character id="4">
            <name>格雷·佛尔帕斯塔  </name>
            <age>18</age>
            <sex>男</sex>
            <magic>冰之造型魔法，冰之灭恶魔法</magic>
            <info>冰之造型魔导士，有无意识的暴露癖，后成为灭恶魔导士</info>
        </character>
    </mainCharacters>
</cartoon>

例子2：针对上述的xml文件，使用两种方法（本质上一样，差别仅在于是否使用异步技术）来将xml文档中内容提取并显示于html文件中，将html文中中引用脚本名称改变即可改变读取xml文件方式，下面给出的fun1.js和fun2.js对应两种不同方式：

ex1.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>XML Basis-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="XML-basis1" />
    <meta name="revised" content="Wayne Ng, 2016/1/25" />
</head>
<body>
    <button type = "button" onclick="loadXML('ex1.xml')">载入XML</button>
    <div id = "text"></div>
    <script type="text/javascript" src="func1.js"></script>
</body>
</html>

func1.js文件：

//利用XMLHttp Request来对XML文档中内容进行解析（此处使用异步处理即AJAX技术）
var xmlHttp;
function loadXML(url){
    xmlHttp = null;
    if(window.XMLHttpRequest){
        //code for all new browsers
        xmlHttp = new XMLHttpRequest();
    }
    else{
        //code for IE5 and IE6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(xmlHttp != null){
        xmlHttp.onreadystatechange=stateChange;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
}

function stateChange(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            txt = "<table border='1'>";
            x = xmlHttp.responseXML.getElementsByTagName("character");
            for(var i = 0; i < x.length; ++i){
                //get name element
                var xx=x[i].getElementsByTagName("name");
                try {
                    txt += "<tr><td colspan = '4'>" + xx[0].firstChild.nodeValue + "</td></tr>"
                }
                catch(er){
                    txt += "<td></td>"
                }
                txt += "<tr>";
                //get age element
                xx = x[i].getElementsByTagName("age");
                try {
                    txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
                }
                catch(er){
                    txt += "<td></td>"
                }
                //get sex element
                xx = x[i].getElementsByTagName("sex");
                try {
                    txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
                }
                catch(er){
                    txt += "<td></td>"
                }
                //get magic element
                xx = x[i].getElementsByTagName("magic");
                try {
                    txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
                }
                catch(er){
                    txt += "<td></td>"
                }
                //get info element
                xx = x[i].getElementsByTagName("info");
                try {
                    txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
                }
                catch(er){
                    txt += "<td></td>"
                }
                txt += "</tr>";
            }
            document.getElementById("text").innerHTML = txt;

        }    
        else{
            alert("Problem retrieving data:" + xmlHttp.statusText);
        }
    }
}

func2.js文件：

//利用XMLHttp Request来对XML文档中内容进行解析（此处不适用异步处理技术）
var xmlHttp;
function loadXML(url){
    xmlHttp = null;
    if(window.XMLHttpRequest){
        //code for all new browsers
        xmlHttp = new XMLHttpRequest();
    }
    else{
        //code for IE5 and IE6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);
    xmlDoc = xmlHttp.responseXML;
    txt = "<table border='1'>";
    x = xmlDoc.getElementsByTagName("character");
    for(var i = 0; i < x.length; ++i){
        //get name element
        var xx=x[i].getElementsByTagName("name");
        try {
            txt += "<tr><td colspan = '4'>" + xx[0].firstChild.nodeValue + "</td></tr>"
        }
        catch(er){
            txt += "<td></td>"
        }
        txt += "<tr>";
        //get age element
        xx = x[i].getElementsByTagName("age");
        try {
            txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
        }
        catch(er){
            txt += "<td></td>"
        }
        //get sex element
        xx = x[i].getElementsByTagName("sex");
        try {
            txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
        }
        catch(er){
            txt += "<td></td>"
        }
        //get magic element
        xx = x[i].getElementsByTagName("magic");
        try {
            txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
        }
        catch(er){
            txt += "<td></td>"
        }
        //get info element
        xx = x[i].getElementsByTagName("info");
        try {
            txt += "<td>" + xx[0].firstChild.nodeValue + "</td>"
        }
        catch(er){
            txt += "<td></td>"
        }
        txt += "</tr>";
    }
    document.getElementById("text").innerHTML = txt;
}

显示效果：

例子2：使用XML DOM技术提取xml文件中元素将其显示于html上（本质上和上一个例子差别不大），使用xml文件和开头给出的xml相同：

ex2.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>XML Basis-2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="XML-basis2" />
    <meta name="revised" content="Wayne Ng, 2016/1/25" />
</head>
<body onload = "display()">
    <div id = "text"></div>
    <script type="text/javascript" src="func3.js"></script>
    <button type = "button" onclick = "prev()">&lt;&lt;前一项</button>
    <button type = "button" onclick = "next()">后一项&gt;&gt;</button>
</body>
</html>

func3.js文件：

if(window.XMLHttpRequest){
    //code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlHttp = new XMLHttpRequest();
}
else{
    //code for IE6, IE5
    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", "ex1.xml", false);
xmlHttp.send(null);
var xmlDoc = xmlHttp.responseXML;

var content = xmlDoc.getElementsByTagName("character");
var i = 0;
function display(){
    var name = content[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var age = content[i].getElementsByTagName("age")[0].childNodes[0].nodeValue;
    var sex = content[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue;
    var magic = content[i].getElementsByTagName("magic")[0].childNodes[0].nodeValue;
    var info = content[i].getElementsByTagName("info")[0].childNodes[0].nodeValue;
    var txt = "Name: " + name + "<br />age: " + age + "<br />sex: " + sex + "<br />sex: " + sex + "<br />magic: " + magic + "<br />info: " + info + "<br />";
    document.getElementById("text").innerHTML = txt;
}

//查找前一项
function prev(){
    if(i > 0){
        --i;
        display();
    }
    else{
        alert("已到达第一项!");
    }
}

//查找后一项
function next(){
    if(i < content.length - 1){
        ++i;
        display();
    }
    else{
        alert("已到达最后一项！");
    }
}

显示效果：

　　　　2016/1/25修订 By野马菌

posted on 2016-01-25 20:29 野马菌阅读(808) 评论(0) 编辑收藏举报