前端3DOM编程4——XML和JSON

七、XML和JSON

1、XML

XML（Extensible Markup Language，可扩展标记语言）用来传输和存储数据。没有预定义的标签，必须有一个根元素，所有元素都必须有关闭标签。

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>姚聪</name>
    <age>24</age>
</person>

<?php
    //如果php需要返回XML数据，必须在php文件顶部设置
    header("Content-type:text/xml;charset=utf-8");
    echo file_get_contents("info.xml");
?>

<meta charset="UTF-8">
<script src="myAjax.js"></script>
<script>
    window.onload=function(event){
        var btn=document.querySelector("button");
        btn.onclick=function(callback){
            ajax({
                type:"get",
                url:"test.php",
                success:function(xhr){
                    console.log(xhr.responseXML);
                    var res=xhr.responseXML; //返回xml的document
                    console.log(res.querySelector("name").innerHTML);
                },
                error:function(xhr){
                    console.log('Request was unsuccessful: '+xhr.status);
                }
            });
            //该方法总是提示error is not a function
        };
    };
</script>
<button>发送请求</button>
<!--该方法传参成功，why
"get","test.php",{},0,
function(xhr){
console.log(xhr.responseXML);
},function(xhr){
console.log('Request was unsuccessful: '+xhr.status);
}
-->

2、JSON

用于存储和交换文本信息。方法：parse、stringify

JSON（JavaScript Object Notation，js对象表示法）是js的一个严格的子集，利用了js中的一些模式来表示结构化数据。作为一种高效的数据格式，经常被用来作为服务端和浏览器端通信的承载数据格式，而不是编程语言，不支持变量、函数或对象实例。

var obj={a:'Hello',b:'World'}; //这是一个对象，注意键名也可以用引号包裹
var json='{"a":"Hello","b":"World"}'; //这是一个JSON字符串，本质是一个字符串

（1）语法

JSON语法可以表示以下三种类型的值：

简单值：Null、Boolean、Number和String，不支持Undefined。JSON字符串必须使用双引号。

对象：一组无序的键值对儿。JSON对象的属性在任何时候都必须加双引号。

数组：一组有序值的列表，通过数值索引访问其中的值。JSON对象和数组没有声明变量，没有末尾的分号。

"Hello world!"

{
    "name":"YaoCong",
    "age":24,
    "school":{
        "name":"Tsinghua University",
        "location":"North Andover,MA"
    }
}

[25,"hi",true]

[
    {
        "title":"Professional JavaScript",
        "authors":[
            "Nicholas C. Zakas"
        ],
        "edition":3,
        "year":2011
    },
    {
        "title":"Professional Ajax",
        "authors":[
            "Nicholas C. Zakas",
            "Jeremy McPeak",
            "Joe Fawcett"
        ],
        "edition":2,
        "year":2008
    }
]

（2）序列化

JSON可以解析为js对象的优势极其明显，成为Web服务开发中交换数据的事实标准。

stringify()，将js对象序列化为JSON字符串，函数、原型成员、值为undefined的任何属性都会被跳过。JSON.stringify(value[,replacer[,space]])。

var book={
            title:"Professional JavaScript",
            authors:[
                "Nicholas C. Zakas"
            ],
            edition:3,
            year:2011
         };
var jsonText=JSON.stringify(book);
//{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,"year":2011}
//默认返回的字符串不包括任何空格字符或缩进

jsonText=JSON.stringify(book,["title","edition"]);
//{"title":"Professional JavaScript","edition":3}
//过滤器参数，如果是数组，stringify只包含数组中列出的属性

jsonText=JSON.stringify(book, function(key, value){
    switch(key){
        case "authors":
            return value.join(",")
        case "year":
            return 5000;
        case "edition":
            return undefined;
        default:
            return value;
    }
});
//{"title":"Professional JavaScript","authors":"Nicholas C. Zakas","year":5000}
//过滤器参数，如果是函数，知道如何处理属性，返回undefined的属性被忽略

jsonText = JSON.stringify(book, null, 4);
/*{
    "title":"Professional JavaScript",
    "authors":[
        "Nicholas C. Zakas"
    ],
    "edition":3,
    "year":2011
}*/
//第三个参数，数值表示每个级别缩进的空格数
//如果是非数值的字符串，则该字符串为缩进字符

toJSON()方法，返回其自身的JSON数据格式。如果js对象中存在该方法，首先调用该方法，否则返回对象本身。

//此时序列化js对象只返回title属性的字符串
toJSON:function(){
    this.title;
}

（3）解析

parse()，将JSON字符串转换成js对象，如果传入的不是有效的JSON字符串，抛出错误。JSON.parse(text[,reviver])。需要json2.js框架作兼容，格式相同，只需额外引入该文件即可。

var book={
    edition:3,
    year:2011,
    releaseDate:new Date(2011,11,1)
};
var jsonText=JSON.stringify(book);
var bookCopy=JSON.parse(jsonText,function(key,value){
    if(key=="releaseDate"){
        return new Date(value);//将日期字符串转换为Date对象
    }else{
        return value;
    }
});
alert(bookCopy.releaseDate.getFullYear());

例子与xml类似，区别是用.txt保存json，不用header设置头部，通过xhr.responseText返回json数据。json比xml所需存储空间更小，没有多余的标签信息。