Ajax加载json与序列化

Posted 2020-10-31

　　json其实是javascript对象表示法，数据可以使用json来表示。它看起来非常像对象字面量语法，但它并不是对象。

　　当json在服务和web浏览器之间传输的时候是以字符串形式来传送的，在将json对象转换成json字符串发送给服务器叫做序列化，在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化。

　　在JavaScript中有两种转换成json的方法：

　　第一　eval()方法

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘;　
var box = eval(json);

　　第二 JSON内建对象，但IE并不兼容，不过有大佬写了json2.js可以兼容IE，https://github.com/douglascrockford/JSON-js

　　序列化方法： stringify()

var json = [ { name : "卫庄", age : 20},{ name : "盖聂", age : 20},{ name : "谭慧东", age : 23}];    //模拟json对象
var box = JSON.stringify(json);     //stringify 将JavaScript原生值转换为json格式值

　　反序列化方法：parse()

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘;  //模拟获取json格式
var box = JSON.parse(json);      //parse 将json转换为JavaScript原生值。

　　下面是ajax加载json

// json文件text.json
{
    "events"  : [
        {
            "location" : "San Francisco, CA",
            "date" : "May 1",
            "map" : "img/001.jpg"
        },
        {
            "location" : "Austin, TX",
            "date" : "May 15",
            "map" : "img/002.jpg"
        },
        {
            "location" : "New York, NY",
            "date" : "May 30",
            "map" : "img/003.jpg"
        }
    ]
}

//js代码
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);　　//获取ajax对象
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200){　　//响应成功后
            var responseObject = JSON.parse(xhr.responseText);　　//获取的json字符串转换成json对象
            var content = ‘<div class="header">‘;　　//将对象结合标签对 转换html格式
            for (var i = 0; i < responseObject.events.length; i++){
                content += ‘<div class="date">‘;
                content += ‘<div class="image">‘;
                content += ‘<img src="‘ + responseObject.events[i].map + ‘" class="image‘ + (i+1) + ‘">‘;
                content += ‘</div>‘;
                content += ‘<p>‘ + responseObject.events[i].location + ‘</p>‘;
                content += ‘<span>‘ + responseObject.events[i].date + ‘</span>‘;
                content += ‘</div>‘;
            }
            content += ‘<div>‘;
            document.getElementById(‘container‘).innerHTML = content;　　//使用innerHTML的赋值方式，将其添加到页面中。
        }
    }

    xhr.open(‘get‘,‘json/text.json‘,true);　　　　//准备请求
    xhr.send(null);　　//发送请求