JSON

1.JSON语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <!-- 
        1.Jason是另一种创建对象实例的方法
        2.json数据的表示方式成对的参数与值
        3.可以转换为字符串进行存储和转换
     -->
     <script>
        var jsonobject=
        {
            //参数和值的对应关系
            "gushi1":"落花人独立",
            "gushi2":"微雨燕双飞"
        }
        alert(jsonobject.gushi1);
    </script>
</body>
</html>

2.JSON优点

1)序列化的数据便于在网络环境中进行存储和传输

2)JSON的用途类似于XML,但是它更容易阅读和理解

3)XML解析过程慢,JSON提供的是JavaScript对象可以随时使用

3.JSON易于阅读

1)JSON可以快速创建和解析

2)是JavaScript的一个子集,不需要特殊的解释程序或额外的软件包

3)见名知意

4)概念简单.都是 "参数":"值"对

3.访问JSON数据

1)去序列化:还原JSON字符串编码的数据-->将字符串转换为JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用eval()</title>
</head>
<body>
     <!--  
       eval()函数会计算或运行作为参数传递的内容
       例:var x = eval(4*3); //x=12
     -->
     <script type="text/javascript">
         //JSON语法 "参数":"值" 的形式
         //参数不能是纯数字
        var user = '{"shiju1":"蛾儿雪柳黄金缕","shiju2":"笑语盈盈暗香去","shiju3":"众里寻他千百度"}';
        //使用eval解析
        var myObject = eval('('+user+')');
        //myObject可以使用参数句号形式访问值
        alert(myObject.shiju1);
     </script>
</body>
</html>

2)浏览器解析JSON语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用浏览器解析JSON</title>
</head>
<body>
    <!-- 
        某些浏览器会创建一个名为JSON的JavaScript对象来管理JSON的编码和解码.这个对象有两个方法
        stringify()   parse()
     -->
     <script type="text/javascript">
         //JSON语句 "参数":"值"
         var Mary ='{"shici1":"众里寻他千百度","shici2":"蓦然回首","shici3":"那人却在灯火阑珊处"}';
         //浏览器解析  返回的是数组
         var myObject = JSON.parse(Mary);
         var result = "";
         //i对应参数
         for(i in myObject){
             result += i + "="+myObject[i] +"
";
         }
         alert(result);
     </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON.stringify</title>
</head>
<body onload="jsonParse()">
    <script type="text/javascript">
        function jsonParse(){
            //将提示框的返回值作为被解析JSON语句
            var inString = prompt("Enter JSON object");
            var out = "";
            //解析完的是一个数组
            myobject = JSON.parse(inString);
            //遍历
            //i对应参数
            for(i in myobject){
                out +="JSON序列对:"+i+"="+myobject[i]+'
';
            }
            alert(out);
        }
    </script>
</body>
</html>

　3)stringify方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stringify</title>
</head>
<body>
    <!-- 
        序列化:数据转换为便于通过网络进行存储和传输的形式
        稍后再回复为原始的格式
     -->
    <script type="text/javascript">
        var Dan=new Object();//创建对象
        Dan.height=1.85;
        Dan.age=18;
        Dan.eyeColor="blue";
        alert(JSON.stringify(Dan));
    </script>
</body>
</html>

4.JSON数据类型

每个 "参数":"值" 参数必须遵循一些简单的语法规则

1)不能是JavaScript保留的关键字

2)不能以数字开头

3)除了下划线与美元不能包含任何特殊字符

每个值可以是以下一些数据类型

数值字符型布尔值数组对象 null(空)

注意:JavaScript有些数据类型不属于JSON标准,包括date error math function

5,JSON模拟关联数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var conference=
        {
            "startDay":"Monday",
            "nextDay":"Tuesday",
            "endDay":"wednesday"
        }
        alert(conference["endDay"]);
        alert(conference.nextDay)
        //conference["参数值"]
        //等价于
        //conference.参数值
    </script>
</body>
</html>

温馨小提示:JSON是独立于任何编程语言和平台的,很多编程语言如:java PHP c都含有JSON库和工具

6,使用JSON创建对象

1)属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <!-- 
        1.Jason是另一种创建对象实例的方法
        2.json数据的表示方式成对的参数与值
        3.可以转换为字符串进行存储和转换
     -->
     <script>
        var jsonobject=
        {
            //参数和值的对应关系
            "gushi1":"落花人独立",
            "gushi2":"微雨燕双飞"
        }
        alert(jsonobject.gushi1);
    </script>
</body>
</html>

2)方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var user=
        {
            "username":"phib1234",
            "location":"Spain",
            "height":"1.80",
            "setName":function(newName)
            {
                this.username=newName;
            }
        }
        var newName=prompt("Enter a new username");
        user.setName(newName);
    </script>
</body>
</html>

3)数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var bookListObject={
        "booklist":["Foundation",
        "Dune",
        "Q萌果子C",
        "2001 A Space Odyssey",
        "Stringer In A Stringe Land"
        ]    
        }
        var book=bookListObject.booklist[2];
        alert(book);
    </script>
</body>
</html>

4)对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Understanding JSON</title>
    <script type="text/javascript">
        var bookListObject={
            "booklist":[{"title":"Foundation","author":"Isaac Asimov"},
            {"title":"Dune","author":"Frank Herbert"},
            {"title":"Eon","author":"Greg Bear"},
            {"title":"2001 A Space Odyssey","author":"Arthur C.Clarke"},
            {"title":"Stranger","author":"Robert A.Heinlein"}]
            }
            
            //保存用户消息的一个变量
            var  out="";

            //获取数组
            var  books=bookListObject.booklist;

             //获取数组,一本一本地获取图书
            for(var i=0;i<books.length;i++)
            {
              var booknumber=i+1;;
              out+="Book"+booknumber+
                 "is:'"+books[i].title+
                 "'by"+books[i].author+
                 "
";
            }
        
    </script>
</head>
<body onload="alert(out)">

</body>
</html>