1. XML
xml
文件示例
<!--<?xml version="1.0" encoding="utf-8"?>-->
<!--声明部分可选-->
<note>
<from>jim</from>
<to>tom</to>
<message>remember me this weekend</message>
</note>
xml
把数据从HTML中分离
- 简化数据共享
创建的不同应用程序可共享数据
- 简化数据传输
可通过各种不兼容的应用程序来读取数据
- 简化平台变更
xml不损失数据情况下,扩展或升级到新的操作系统,应用程序或浏览器
- 数据访问
通过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");
- 所有现代浏览器(IE7+、Firefox、Chrome、Safari 和 Opera)都有内建的 XMLHttpRequest 对象
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
- 获取元素的值
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);
- 获取元素属性的值
document.write("<h3>2. 获取元素属性的值</h3>");
txt2 = xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt2);
- 改变元素的值
document.write("<h3>3. 改变元素的值</h3>");
txt1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt1.nodeValue = "Modified";
document.write(txt1.nodeValue);
- 创建新的属性
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();
- 创建元素
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=">>"/>