JSON概念性知识

作者: 觉子先生 | 来源:发表于2015-03-05 12:34 被阅读168次

    JSON:JavaScript 对象表示法(JavaScript Object Notation

    JSON 是存储和交换文本信息的语法,类似 XML。其采用键值对的方式来组织,不仅易于阅读和编写,且易于机器解析和生成。

    JSON 是独立于语言的,也就是说不管什么语言,都可以解析json,只需要按照其规则来就行。

    JSON & XML相比:

    json的长度和xml格式比起来小很多,减少打开页面的带宽
    json读写的速度更快
    json可以使用 JavaScript内建的方法直接进行解析并转换称JavaScript对象,非常方便

    JSON的语法规则:

    JSON 数据的书写格式:名称/值对。

    名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样需添加双引号),中间用冒号隔开。
    比如:"name":"杨康"

    JSON的值可以是下面的这些类型:

    数字(整数或浮点数),比如123,1.23
    字符串(在双引号中)
    逻辑值(true 或 false)
    数组(在方括号中)
    对象(在花括号中)
    null

    下面给出一个例子:

    {
    "staff":[
        {"name":"唐三","age":70},
        {"name":"孙康","age":35},
        {"name":"林重","age":21}
    ]
    }
    

    JSON解析方法:

    eval和JSON.parse

    在代码中使用eval是很危险的!特别是在执行第三方的JSON数据(其中可能包含恶意代码)时,尽可能使用JSON.parse()方法解析字符串本身,该方法还可以捕捉JSON中的语法错误。

    在浏览器工具-Console中尝试:

    测试eval:

    var jsondata= '{"staff":[{"name":"唐三","age":70},{"name":"孙康","age":35},{"name":"林重","age":21}]}';
    var jsonobj = eval('('+jsondata+')');
    alert("姓名:"+ jsonobj.staff[0].name +"; 年龄:"+ jsonobj.staff[0].age);
    

    测试json.parse:

    var jsondata= '{"staff":[{"name":"唐三","age":70},{"name":"孙康","age":35},{"name":"林重","age":21}]}';
    var jsonobj = JSON.parse(jsondata);
    alert("姓名:"+ jsonobj.staff[0].name +"; 年龄:"+ jsonobj.staff[0].age);
    

    测试eval在解析的同时还会执行字符串中的方法:

    下面代码中会先弹出数字“123”,然后再弹出解析出来的姓名和年龄。

    var jsondata= '{"staff":[{"name":"唐三","age":alert(123)},{"name":"孙康","age":35},{"name":"林重","age":21}]}';
    var jsonobj = eval('('+jsondata+')');
    alert("姓名:"+ jsonobj.staff[0].name +"; 年龄:"+ jsonobj.staff[0].age);
    

    测试JSON.parse在解析时候发现其中有其他方法的时候会直接显示语法错误并不继续执行后续方法:

    var jsondata= '{"staff":[{"name":"唐三","age":alert(123)},{"name":"孙康","age":35},{"name":"林重","age":21}]}';
    var jsonobj = JSON.parse(jsondata);
    alert("姓名:"+ jsonobj.staff[0].name +"; 年龄:"+ jsonobj.staff[0].age);
    

    JSON在线校验工具:http://jsonlint.com

    将前面出现的staff字符串粘贴到其中的框框中,点击Validate按钮即可校验。

    相关文章

      网友评论

        本文标题:JSON概念性知识

        本文链接:https://www.haomeiwen.com/subject/rwwmxttx.html