HTML快速恢复 之 XML JSON
2018-03-04 本文已影响13599人
平安喜乐698
目录
1. XML
2. JSON
1. XML
W3Cschool在线验证XML语法规则 (仅文档拖入有效)
概念
XML（eXtensible Markup Language）可扩展标记语言
用来传输和存储数据（将数据从HTML分离）。
跨平台跨语言、纯文本、纯自定义标签（没有预定义的标签，如html的p、a、div）
HTML
显示数据
二者互补，不存在替代关系。
由XML 创建的语言：
XHTML - 新的 HTML 版本
WSDL - 用于描述可用的 web service
WAP 和 WML - 用于手持设备的标记语言
RSS - 用于 RSS feed 的语言
RDF 和 OWL - 用于描述资源和本体
SMIL - 用于描述针针对 web 的多媒体
其他相关语言：
SVG：使用 XML 格式定义图形
SOAP：基于 XML 的协议请求数据
XForms：使用 XML 定义表单数据
Xpointer：允许 XLink 超级链接指向 XML 文档中更多具体的部分
XLink：允许 XLink 超级链接
XSD：XML Schema。基于 XML 的 DTD 替代物。
DTD：用于定义 XML 文档中的合法元素的标准
XQuerry：基于 XML 的用于查询 XML 数据的语言
XSLT：验证
基本语法
例：
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
说明：
1、XML是一种树结构
2、第一行：必须是 XML 声明（不属于XML本身的组成部分，不是 XML 元素）：它定义 XML 的版本 (1.0) 和所使用的编码 (ISO-8859-1 = Latin-1/西欧字符集)。
3、第二行：文档的根元素(必须有)
大小写敏感
空格会被保留
所有 XML 元素都必须
有关闭标签
正确地嵌套
属性值须加引号（内容有双引号则用单引号括起来）
实体引用
< < 小于
> > 大于
& & 和号
' ' 单引号
" " 引号
注释
<!-- This is a comment -->
以 LF 存储换行
Windows：回车符 (CR) + 换行符 (LF)
Unix ：以 LF 换行
MAC：以 CR 换行
XML 元素
从（且包括）开始标签直到（且包括）结束标签的部分。
可包含其他元素或文本，可拥有属性（位于开始标签内），尽量避免使用属性（难扩展，难阅读），id属性除外（用来标识）。
命名规则（没有保留关键字）
1.名称可以含字母、数字以及其他的字符
2.名称不能以数字或者标点符号开始
3.名称不能以字符 “xml”（或者 XML、Xml）开始
4.名称不能包含空格
命名规范
避免 "-" ，"."， ":"字符，通常使用下划线或驼峰
验证
文档中的错误会终止你的 XML 程序
DTD验证（Document Type Definition）XML使用DTD来描述数据
<!DOCTYPE note SYSTEM "Note.dtd">
或
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
XML Schema（DTD的替代者）
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
XML 查看
用CSS修饰（不推荐）
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
使用XSLT (eXtensible Stylesheet Language Transformations) （推荐）更完善
服务器转换
<html xmlns="http://www.w3.org/1999/xhtml">
浏览器转换
<?xml-stylesheet type="text/xsl" href="simple.xsl"?>
simple.xsl
<?xml version="1.0" encoding="ISO-8859-1"?> <!-- Edited with XML Spy v2007 (http://www.altova.com) --> <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"> <body style="font-family:Arial,helvetica,sans-serif;font-size:12pt;
background-color:#EEEEEE"> <xsl:for-each select="breakfast_menu/food"> <div style="background-color:teal;color:white;padding:4px"> <span style="font-weight:bold;color:white"> <xsl:value-of select="name"/></span> - <xsl:value-of select="price"/> </div> <div style="margin-left:20px;margin-bottom:1em;font-size:10pt"> <xsl:value-of select="description"/> <span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per serving) </span> </div> </xsl:for-each> </body> </html>
XML 解析
XMLHttpRequest 具体见上
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
将xml字符串转换为xml对象
txt="";
if (window.DOMParser){
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}else{ // Internet Explorer
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
}
现代的浏览器不允许跨域的访问（xml文件需在自己服务器上）
XML DOM (XML Document Object Model)
定义了访问和操作 XML 文档的标准方法
x=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue
xmlDoc -由解析器创建的 XML 文档
getElementsByTagName("to")[0] - 第一个 <to> 元素
childNodes[0] - <to> 元素的第一个子元素（文本节点）
nodeValue - 节点的值（文本本身）
nodeName：
属性
x.getAttribute("lang");
x.setAttribute("edition","first");
修改值
x.nodeValue="Easy Cooking";
创建元素
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x.appendChild(newel);
删除元素
x.removeChild(x.childNodes[0]);
命名冲突
多个文档使用到同一个名字时引起冲突
解决：
使用前缀来避免
<h:table></h:table>
使用命名空间（Namespaces）
<h:table xmlns:h="http://www.w3school.com.cn/furniture">
所有相同前缀的子元素都会使用同一命名空间
默认命名空间（可省去子元素还得写同一前缀）
<table xmlns="http://www.w3.org/TR/html4/"></table>
XML CDATA
所有 XML 文档中的文本均会被解析器解析,(除了CDATA 区段)
PCDATA（Parsed Character Data） 指的是被解析的字符数据
CDATA（Unparsed Character Data）指的是不应由 XML 解析器进行解析的文本数据
CDATA 中的所有内容都会被解析器忽略（不允许嵌套）
<![CDATA[
function matchwo(a,b){
if (a < b && a < 0) then
{
return 1;
}else{
return 0;
}
}
]]> 此处不能包含空格或折行
编码
XML 文档可以包含非 ASCII 字符，需要指定编码
<?xml version="1.0" encoding="UTF-8"?>
服务器可以通过
文本文件 存储XML文件
代码 生成XML文件，并保存
使用 XSLT 转换 XML 为XHTML
1.1 SVG
SVG（Scalable Vector Graphics）可缩放矢量图形
使用 XML 格式显示网络矢量图像
纯XML文本，可编辑，便于读取修改
可伸缩，不失真
与JPEG，GIF 图像相比，尺寸更小，且可压缩性更强
与 Flash 相比，开源。
SVG 文件必须使用 .svg 后缀
嵌入HTML
使用 <embed> 标签（不规范）
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
使用 <object> 标签（不允许使用脚本）
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
使用 <iframe> 标签
<iframe src="rect.svg" width="300" height="100">
</iframe>
例：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
第1行：XML 声明
standalone 是否独立（是否引用外部文件）
第2行：引入DTD文件
svg代码
形状
矩形 <rect>
x圆角，y圆角，x，y，宽，高， css（填充，边宽，描边,填充透明度，描边透明度,整个透明度）
<rect rx="20" ry="20" x="20" y="20" width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/>
圆形 <circle>
圆心x，圆心y，半径，描边色，描边宽，填充色
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
椭圆 <ellipse>
圆心x，圆心y，水平半径，垂直半径，
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
线 <line>
左上角坐标x，左上角坐标y，右下角坐标x，右下角坐标y，
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
折线 <polyline>
点数据源，
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
多边形 <polygon>
点数据源，
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
路径 <path>
<path d="M250 150 L150 350 L350 350 Z" />
命令（大写：绝对定位，小写：相对定位）。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
滤镜
用来向形状和文本添加特殊的效果,
必须在 <defs> 标签中定义 SVG 滤镜。
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
例：高斯模糊
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
<filter>
标签必须有 id 属性（用于引用），
必须嵌套在 <defs> 标签内。
渐变
渐变必须在 <defs> 标签中进行定义。
2种:
线性渐变
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
放射性渐变
<linearGradient> 线性渐变
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
<radialGradient>放射性渐变？
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
其他
可以外加<a></a>
<a xlink:href="[http://www.w3schools.com](view-source:http://www.w3schools.com/)" target="_blank"> <rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/> </a>
可以添加点击事件
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script> function create_a(evt){
获取SVG文档
var SVGDoc=evt.getTarget().getOwnerDocument();
根据id获取
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");
link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");
link.appendChild(text_node);
txt.appendChild(link);
}
</script>
<text id="txt" x="10" y="10">Click</text>
<circle cx="20" cy="40" r="1.5em" style="fill:blue" onclick="create_a(evt)"/>
</svg>
添加动画
<rect x="20" y="20" width="250" height="250" style="fill:blue">
透明度：从1到0，过渡时间：5s，无限循环
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
坐标xy，宽高
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/>
填充色
<animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
路径
<animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze"/>
形变-旋转
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/>
形变-缩放
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/>
可见
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
</rect>
1.2 XForms
下一代的 HTML 表单
使用 XML 来创建
符合W3C 标准
不能单独存在，需在其他xml文档中
XForms分为
XForms 模型（描述数据和逻辑）
XForms 界面（显示和输入数据）
<xforms>
XForms 数据模型
<model>
<instance>
<person>
<fname/>
<lname/>
</person>
</instance>
如何提交数据
<submission id="form1" action="submit.asp" method="get"/>
</model>
XForms 用户界面
每个输入控件元素都必须有 <label> 元素
<input ref="fname"><label>First Name</label></input>
<input ref="lname"><label>Last Name</label></input>
<submit submission="form1"><label>Submit</label></submit>
</xforms>
2. JSON
概念
JSON（JavaScript Object Notation）JavaScript 对象表示法
用于存储和交换 数据
纯文本、可读性强、独立于语言和平台
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"
相比 XML ：
没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字
基本语法（JavaScript语法分支：可直接在js中使用）
[] 数组
{} 对象
键值对用,隔开
键必须是字符串，
值可以是
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
例：
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
employees[0].lastName;
将json字符串转换为json对象
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
转换
var obj = eval ("(" + txt + ")");
obj.employees[1].firstName;
