什么是JSON

￡神魔★判官ぃ 2021-10-08 06:08 519阅读 0赞

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据

## 什么是 JSON? ##

JSON英文全称 JavaScript Object Notation(JavaScript 对象表示法)，是一种轻量级的用于存储和交换文本信息的语法，被设计用于可读的数据交换，类似 XML，但比 XML 更小、更快，JSON具有自我描述性，更易理解

### JSON 简介 ###

JSON是从 JavaScript 脚本语言中演变而来，使用Javascript语法来描述数据对象，文件名扩展是 .json，但是JSON格式仅仅是一个文本，仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON

### JSON 使用范围 ###

JSON 格式可以用于通过网络连接序列化和传输结构化数据，用于编写基于 JavaScript 应用程序，包括浏览器扩展和网站。JSON 主要用于在服务器和 Web 应用程序之间传输数据，Web 服务和 APIs 可以使用 JSON 格式提供公用数据，还可以用于现代编程语言中

### JSON 语法 ###

JSON 的语法基本上可以视为 JavaScript 语法的一个子集，包括以下内容：

数据使用名/值对表示

使用大括号保存对象，每个名称后面跟着一个 ':'（冒号），名/值对使用 ,（逗号）分割

使用方括号保存数组，数组值使用 ,（逗号）分割

{
        "book": [
            {
                "id":"01",
                "language": "Java",
                "edition": "third",
                "author": "Herbert Schildt"
            },
            {
                "id":"07",
                "language": "C++",
                "edition": "second"
                "author": "E.Balagurusamy"
        }]
    }

#### JSON 支持以下两种数据结构： ####

名/值对集合： 这一数据结构由不同的编程语言支持

有序的值列表： 包括数组，列表，向量或序列等等

#### JSON 语法规则 ####

JSON 语法是 JavaScript 对象语法的子集

数据在名称/值对中

数据由逗号分隔

花括号保存对象

方括号保存数组

#### JSON 名称/值对 ####

JSON 数据的书写格式是：名称/值对

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

{"firstName":"John", "lastName":"Doe"}

等价于这条 JavaScript 语句：

firstName = "John", lastName = "Doe"}

#### JSON 值 ####

JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中）

对象（在花括号中）

null

#### JSON 对象 ####

JSON 对象在花括号中书写，对象可以包含多个名称/值对

#### JSON 数组 ####

JSON 数组在方括号中书写，数组可包含多个对象

"employees":[
         {"firstName":"John", "lastName":"Doe"}, 
         {"firstName":"Anna", "lastName":"Smith"}, 
         {"firstName":"Peter", "lastName":"Jones"}
     ]

#### JSON 使用 JavaScript 语法 ####

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。JavaScript 程序使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。  
通过 JavaScript，您可以创建一个对象数组，并像上面代码那样赋值。然后像这样访问 JavaScript 对象数组中的第一项

employees[0].lastName;

返回的内容是：

Doe

也可以像这样修改数据：

employees[0].firstName = "Jonatan";

#### JSON 文件 ####

JSON 文件的文件类型是 ".json"

JSON 文本的 MIME 类型是 "application/json"

### JSON 使用 ###

#### 把 JSON 文本转换为 JavaScript 对象 ####

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

简单起见，我们直接设置 JSON 字符串:

首先，创建 JavaScript 字符串，字符传为 JSON 格式的数据：

var text = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象：

<p>
        First Name: <span id="fname"></span><br /> 
        Last Name: <span id="lname"></span><br /> 
    </p> 
    <script>
        document.getElementById("fname").innerHTML = obj.employees[1].firstName 
        document.getElementById("lname").innerHTML = obj.employees[1].lastName 
    </script>

#### JSON 解析器 ####

eval() 函数可编译并执行任何 JavaScript 代码，这隐藏了一个潜在的安全问题。使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。在浏览器中，提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持

### JSONP 教程 ###

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。  
同源策略，是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略

#### JSONP 应用 ####

服务端JSONP格式数据

如客户想访问 : /try/ajax/jsonp.php?jsonp=callbackFunction，  
假设客户期望返回JSON数据：\["customername1","customername2"\]。  
真正返回到客户端的数据显示为: callbackFunction(\["customername1","customername2"\])。  
服务端文件jsonp.php代码为：

<?php 
        header('Content-type: application/json'); //获取回调函数名 
        $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据  $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo     $jsoncallback . "(" . $json_data . ")"; 
    ?>

#### 客户端实现 callbackFunction 函数 ####

<div id="divCustomers"></div>
    <script type="text/javascript">
    function onCustomerLoaded(result, methodName){
        var html = '<ul>';
        for(var i = 0; i < result.length; i++)     {         
            html += '<li>' + result[i] + '</li>';
        }
        html += '</ul>';
        document.getElementById('divCustomers').innerHTML = html;
    }
    </script>
    <script type="text/javascript" src="/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

以上代码可以使用 jQuery 代码实现：

<div id="divCustomers"></div>
    <script>
    $.getJSON("/try/ajax/jsonp.php?jsoncallback=?", function(data) {   
        var html = '<ul>';
        for(var i = 0; i < data.length; i++){ 
            html += '<li>' + data[i] + '</li>';
        }
        html += '</ul>';
    
      $('#divCustomers').html(html); 
    });
    </script>