RUNOOB XML

1. XML

xml文件示例

<!--<?xml version="1.0" encoding="utf-8"?>-->
<!--声明部分可选-->
<note>
    <from>jim</from>
    <to>tom</to>
    <message>remember me this weekend</message>
</note>

1. xml把数据从HTML中分离
   
2. 简化数据共享
   创建的不同应用程序可共享数据
3. 简化数据传输
   可通过各种不兼容的应用程序来读取数据
4. 简化平台变更
   xml不损失数据情况下，扩展或升级到新的操作系统，应用程序或浏览器
5. 数据访问
   通过xml使数据在不同的应用程序中都能被访问

2. XML 语法

<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
</bookstore>

xml元素同html中元素相同指的是开始标签和结束标签涵盖的所有内容

<bookstore>
   ...
</bookstore>

一个元素可包含：
其他元素：<book> ... </book>
文本：Harry Potter
属性：category="CHILDREN"

3. XML JavaScript

3.1 XMLHttpRequest

• XMLHttpRequest 的作用
  XMLHttpRequest对象用于在后台与服务器交换数据
  XMLHttpRequest可以实现：
  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据
• 创建一个XMLHttpRequest对象
  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
    xmlhttp=new XMLHttpRequest();
  • 旧版本的Internet Explorer（IE5和IE6）中使用 ActiveX 对象：
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

3.2 XML 解析器

XML 解析器把 XML 文档转换为 XML DOM 对象-可通过JavaScript操作的对象

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

3.3 XML DOM

1. 获取元素的值

	xmlhttp=new XMLHttpRequest();
	xmlhttp.open("GET","book.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    document.write("<h3>1. 获取元素的值</h3>");
    txt1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    document.write(txt1);

2. 获取元素属性的值

	document.write("<h3>2. 获取元素属性的值</h3>");
    txt2 = xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
    document.write(txt2);

3. 改变元素的值

	document.write("<h3>3. 改变元素的值</h3>");
    txt1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    txt1.nodeValue = "Modified";
    document.write(txt1.nodeValue);

4. 创建新的属性

	document.write("<h3>4. 创建新的属性</h3>");
    book = xmlDoc.getElementsByTagName("book");
    for(var ind = 0; ind < book.length; ind++){
        book[ind].setAttribute("index", ind +" ");
    }
    function displayBook(){
        for (var ind = 0; ind < book.length; ind++)
        {
            category = book[ind].getAttribute("category");
            index = book[ind].getAttribute("index");
            title = book[ind].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            author = book[ind].getElementsByTagName("author")[0].childNodes[0].nodeValue;
            year = book[ind].getElementsByTagName("year")[0].childNodes[0].nodeValue;
            price = book[ind].getElementsByTagName("price")[0].childNodes[0].nodeValue;
            document.write("<b>book: </b>" + "category: " + category + "   index: " + index + "<br>");
            document.write("<b>title: </b>" + title + "<br>");
            document.write("<b>author: </b>" + author + "<br>");
            document.write("<b>year: </b>" + year + "<br>");
            document.write("<b>price: </b>" + price + "<br>");
            document.write("<hr/>")
        }
    }
    displayBook();

5. 创建元素

	document.write("<h3>5. 创建元素</h3>");
    for(var ind = 0; ind < book.length; ind++){
        newEl = xmlDoc.createElement("count");
        newText = xmlDoc.createTextNode(ind + " ");
        newEl.appendChild(newText);
        book[ind].appendChild(newEl);
    }

3.4 XML/HTML

在HTML页面中显示XML数据

<script>
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","cd_catalog.xml",false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    var cd = xmlDoc.getElementsByTagName("CD");
    document.write("<table border='1px'>")
    for(var i = 0; i < cd.length; i++){
        document.write("<tr><td>");
        document.write(cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>")
</script>

3.5 XML 应用程序

添加导航脚本

<script>
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft XMLHTTP");
    }
    xmlhttp.open("GET","cd_catalog.xml",false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    book = xmlDoc.getElementsByTagName("CD");
    ind = 0;
    function displayCD(){
        artist = book[ind].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
        title = book[ind].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
        year = book[ind].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
        text = "Artist: " + artist + "<br/>Title: " + title + "<br/>Year: " + year;
        document.getElementById("para").innerHTML = text;
    }
    function previous(){
        if(ind > 0){
            ind--;
            displayCD();
        }
    }
    function next(){
        if(ind < book.length - 1){
            ind++;
            displayCD();
        }
    }
</script>
<div id="para"></div><br/>
<input type="button" onclick="previous()" value="<<"/>
<input type="button" onclick="next()" value=">>"/>