难得一个周末,除了好好睡了一个饱觉外,就是把JSON 和 AJAX 知识点梳理了一下.

分三点记录:

1. JSON知识点
2. AJAX知识点
3. 做一个实例,用AJAX请求本地json数据

JSON

1.什么是JSON?

JSON是一个轻量级的数据格式，类似Javascript对象语法，但不仅仅用于JS   

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

1. 简单值
   如：5（数值）或 'Hi~Weekend'(字符串) 等
2. 对象,如：

    {
        "id": 1001,
        "name": "JSON",
        "book":{
            "bookname": "css world",
            "count": 2
        }
    }    
    /*注意：JSON对象中对象的属性名任何时候都必须加双引号*/

3. 数组：

    {
        "user": [
            { "id": 101, "name": "cc" },
            { "id": 102, "name": "vivi" }
        ]
    }

3.JSON对象和Javascript对象的不同：

1. JSON对象没有变量声明
2. JSON末尾没有分号
3. JSON所有对象属性必须家双引号

4.JSON对象的两个方法：

1. stringify() ——> 作用：将JS对象 序列化 为 JSON字符串
2. parse() ——> 作用：将JSON对象 解析 为 JS 对象

stringify()使用方法：

var comentList = {
    "user" : [
        {
            "id": 1,
            "name": "kiti"
        },
        {
            "id": 2,
            "name": "Tuanzi"
        }
    ]
}

var list = JSON.stringify(comentList);
console.log(list);

输出结果：

{"user":[{"id":1,"name":"kiti"},{"id":2,"name":"Tuanzi"}]}

parse()使用方法：

var listB = JSON.parse(list);
console.log(listB);

输出结果：

1.png

5.序列化选项 JSON.stringify()

JSON.stringify()除了序列化JS对象外，还可以接收两个参数：

1. 过滤器，可以是一个数组，也可以是一个函数：

   1. 数组

   var coment = {
       "id": 1,
       "message": [
           "hi~weekend",
           "Work tomorrow"
       ],
       "time": "2019-5-19"
   }
   
   var jsonText = JSON.stringify(coment,["message","time"]);
   console.log(jsonText);
   

   输出结果：

   {"message":["hi~weekend","Work tomorrow"],"time":"2019-5-19"}
   //没有了ID属性
   

   2. 函数

    var coment = {
       "id": 1,
       "message": [
           "hi~weekend",
           "Work tomorrow"
       ],
       "time": "2019-5-19"
   }
   var jsonText  = JSON.stringify(coment, function(key,value){
       switch(key){
           case "message":
               return value.join(',');
           case "time":
               return 2019;
           default:
               return value;
       }
   })
   console.log(jsonText)
   

   输出结果：

   {"id":1,"message":"hi~weekend,Work tomorrow","time":2019}
   //id属性正常序列化，message、time属性成功改变，如果想删除属性项的话 直接返回undefined删除
   

2. JSON.stringify()的第三参数用于控制结果中的缩进和空白符。我的理解就是将结果格式化的意思，也就是在结果中插入换行符提高阅读性。

var jsonText = JSON.stringify(coment, null, 4);
console.log(jsonText);

输出结果：

{
    "id": 1,
    "message": [
        "hi~weekend",
        "Work tomorrow"
    ],
    "time": "2019-5-19"
}
//对比上面两个例子的输出结果可以看出区别