做高仿网站免费建网站视频教程
what’s XML
XML 指可扩展标记语言（eXtensible Markup Language）。
XML 被设计用来传输和存储数据，不用于表现和展示数据，HTML 则用来表现数据。
XML 是独立于软件和硬件的信息传输工具。
应该掌握的基础知识
- HTML
- JavaScript
XML 不会做任何事情
XML 被设计用来结构化、存储以及传输信息。
- 文件格式
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
没有预定义标签
- HTML 中使用的标签都是预定义的。HTML 文档只能使用在 HTML 标准中定义过的标签（如 <p>、<h1> 等等）。
- 上面实例中的标签没有在任何 XML 标准中定义过（比如 和 ），
- XML 允许创作者定义自己的标签和自己的文档结构。
简化数据共享
- XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。
real example
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
- line 1定义XML 的版本（1.0）和所使用的编码（UTF-8 : 万国码, 可显示各种语言）
树结构
<bookstore><book category="COOKING"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category="CHILDREN"><title lang="en">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</price></book><book category="WEB"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book>
</bookstore>
使用CSS格式化显示XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
.
.
.
</CATALOG>
- 第二行把 XML 文件链接到 CSS 文件
XSLT
JS API of XML
- create an XMLHttpRequest Object
xmlhttp=new XMLHttpRequest();
- XML文档->XML DOM
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); //同步不需要编写onreadystate处理服务器响应
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
- 异步响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function loadXMLDoc()
{if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","xmlhttp_info.txt",true);xmlhttp.send();
}
</script>
</head>
<body><h2>使用 XMLHttpRequest 对象</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button></body>
</html>
XMLHttpRequest GET
- 所有现代的浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有一个内建的 XMLHttpRequest 对象。
旧版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
- 发送一个请求到服务器
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
format：open(method,url,async)
- method：请求的类型：GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
- 处理服务器的相应数据
- 返回的是字符串
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- 返回的是XML文档对象
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{txt=txt + x[i].childNodes[0].nodeValue + "";
}
document.getElementById("myDiv").innerHTML=txt;
- onreadystatechange
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
- onreadystatechange：存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用
- readyState存放了 XMLHttpRequest 的状态。从 0 到 4 变化：
0：请求未初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成和响应准备就绪 - status：200：“OK”
404：找不到页面
XMLHttpRequest POST
Mylab
- transform image to xml
- http post image，and get response XML tag
- transform xml into text and show on the browser