JSON详解

JSON

一、概念

1.1JSON是什么？

JSON全称JavaScript Object Notation，意：JavaScript对象标记、数据交换格式。

简而言之，JSON是一种标准的、轻量级的数据交换格式。在JS中以JS对象形式存在

1.2JSON有什么用？

JSON的主要作用是用于数据交换

• 目前，90%以上的系统之间交换数据时，都采用JSON
• 如：C编写的系统，要和java编写的系统进行数据交换，就可以利用JSON数据格式

1.3JSON的特点

实际开发中，常用数据交换格式有两种

• XML：
  • 缺点：体积大、解析麻烦
  • 优点：语法严谨
  • 适用场景：银行相关业务
• JSON
  • 缺点：
  • 优点：体积小、易解析

二、语法

2.1创建JSON对象

var json对象名 = {
    "属性名"：属性值,
    "属性名"：属性值
}

• 示例：

  • ①属性值可以是普通的数据类型：String、Number、Boolean、数组

    var studentObj = {
      "sno":"110",
      "sname":"张三",
      "sex":"男"
    }；

  • ②属性值也可以是json、json数组类型

    var studentObj = {
        "sno":"110",
        "sname":"战三",
        "aihao":["smoke","drink","tt"],
        "address":{//json格式
          "city":"北京",
          "street":"大兴区",
          "zipcode":111102
        }
    }

  • 设计JSON格式信息，可描述整个班级中每一个学生的信息，以及总人数

    var class = {
       "total": 3,
       "student":[
         {"name":"zhangsan","sex"：true,"brith":"2002-04-08"},
         {"name":"lisi","sex"：false,"brith":"2002-05-08"},
         {"name":"wangwu","sex"：true,"brith":"2002-04-09"}
       ]
    }

2.2访问JSON对象的属性

①json对象名.属性名
②json对象名["属性名"]

• 示例：

//访问studentObj对象的sno的属性值
studentObj.sno;
studentObj["sno"];
//访问studentObj对象的address的city的属性值(当属性值是json对象时)
studentObj.address.city;

2.3对比原生JS

原生JS中需，定义类，创建对象，访问对象的属性

//定义类
Student = function(sno,snname,sex){
   this.sno = sno;
   this.sname = sname;
   this.sex = sex;
}
//创建对象
var stu = new Student("111","李四","男")；
//访问对象的属性
stu.sno

而JSON中，只需创建对象，访问对象属性

var student = {
   "sno": xxx,
   "sname":xxx,
   "sex":xxx
}

因而JSON也可以被称为无类型对象。

2.4JSON数组

①基础格式

var 数组名 = [{},{},{}]

• 示例

//创建json数组对象
var students = [
    {"sno":110,"sname":"王五","sex":"男"},
    {"sno":120,"sname":"张三","sex":"男"}
]
//取出数组的值
 for(var i = 0; i < students.length; i++){
     //取出数组中每个json对象
     var stuObj = students[i];
     //访问该json对象的值
     stuObj[i].sno;
 }   

三、eval函数

3.1作用

eval函数的作用是：将字符串当做一串JS代码解析并执行

实际开发中最大的作用是：将json格式的字符串转化为json对象

• 因为java连接数据库查询数据后，将数据在java程序中拼接成JSON格式的“字符串”，发给浏览器，并未转化为json格式字符串，因而不能使用.属性名获取到JSON的属性值

• 示例：

//将"var i = 100" 当做js代码执行
window.eval("var i = 100;");
alert("i="+i);//结果是展示一个弹框， i = 100

3.2将JSON格式字符串转化为JSON对象

①基础语法：

eval("var 设置的json对象名 = " + 后端传来的json格式字符串名)

②示例：

//1.后端传来JSON格式字符串
var jsonStr = "{\"name\":\"zhangsan\",\"password\":\"123\"}";
//2.利用eval转化为json对象
window.eval("var json = "+jsonStr);
//3.访问json对象的属性值
json.name

四、获取并展示JSON数据

在此模拟静态的JSON格式数据，并将其拼接后展示在tbody中

①要拼接的JSON数据为：

var data = {
  "total":4,
  "emps" : [
    {"empno":7954,"ename":"ZHANGSAN","sal":400},
    {"empno":7955,"ename":"LISI","sal":500},
    {"empno":7956,"ename":"WANGWU","sal":600}
  ]
}

②完整代码

<input type="submit" id="btn" value="动态展示json数据">
<table>
    <thead>
         <tr>
             <td>序号</td>
             <td>姓名</td>
             <td>薪水</td>
         </tr>
    </thead>
    <tbody id="info">

    </tbody>
</table>
<div>总条数为<span id="total"></span></div>
<script>
    //点击按钮
    document.getElementById("btn").onclick = function (){
        //1.设置静态json数据，假设是后端传来的
        //2.将json格式字符串转化为json对象
        //此时不用转化为json对象
        var data = {
            "total":4,
            "emps" : [
                {"empno":7954,"ename":"ZHANGSAN","sal":400},
                {"empno":7955,"ename":"LISI","sal":500},
                {"empno":7956,"ename":"WANGWU","sal":600}
            ]
        }
        //3.对json数据进行处理
        //①.进行拼接
        var html ="";
        for(var i = 0; i < data.emps.length; i++){
        html += "<tr>";
        html += "<td>"+data.emps[i].empno+"</td>";
        html += "<td>"+data.emps[i].ename+"</td>";
        html += "<td>"+data.emps[i].sal+"</td>";
        html += "</tr>";
        }
        //②将拼接的内容渲染到页面中
        document.getElementById("info").innerHTML = html;
       document.getElementById("total").innerHTML = data.total;
    }
</script>

③效果图

五、浏览器向服务器发起请求的几种方式

①直接在浏览器栏上写URL，get请求

②点击页面超链接，get请求

③提交from表单，可get可post请求

④window.open(url)

⑤window.location.href = url;

⑥document.location.href = url;

六、js中，[]和{}有什么区别？

[]是数组 eg: var arr = [xx,xx,xx]

{}是json对象

而在java中，{}是数组 eg: int[] arr = {xx,xxx}

【拓】XML

①基本语法

XML也是一种数据交换格式，其格式如下：

<?xml version="1.0" encoding="GBK"?>
<student>
  <student sno="110">
         <sname>张三</sname>
         <sex>男</sex>
  </student>
    <student sno="120">
         <sname>李四</sname>
         <sex>男</sex>
  </student>
    <student sno="130">
         <sname>王五</sname>
         <sex>男</sex>
  </student>
</student>

②基本特性

1️⃣语法严格

XML的语法规则严格，不允许出错。

与HTML不同，XML中标签对缺少都会报错

2️⃣与HTML类似

XML与HTML都有一个父亲：SGML（标准通用的标记语言）

• HTML主要做页面展示
• XML主要做数据存储和数据描述

【拓】不同语言的系统怎么进行数据交换

c语言编写的系统和java语言编写的系统是不能够直接通信的，但基本所有编程语言都支持字符串类型。

因而可以c编写的系统查询数据库表信息后，可以利用字符串拼接为XML/JSON格式，再将该字符串传递给java编写的系统，以此达到不同语言系统通信的效果。