JSON数据格式

最新推荐文章于 2024-09-03 11:11:03 发布

weixin_46370867

最新推荐文章于 2024-09-03 11:11:03 发布

阅读量334

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109790065

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

成功的信念在人脑中的作用就如闹钟，会在你需要时将你唤醒。

下面是对JSON数据格式的整理，希望可以帮助到有需要的小伙伴。

一、JSON是什么

JSON是JavaScript Object Notation 【JavaScript对象表示法】的缩写，是一种轻量级的数据交换格式。JSON是基于JavaScript Programmning Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。
JSON是独立于任何语言的文本格式。易于程序员阅读和编写，同时也易于计算机解析和生成。JSON的中文官网地址:http://json.org/json-zh.html

json现在多用于存储和交换文本信息的语法
进行数据的传输
JSON 比 XML 更小、更快，更易解析。

二、JSON语法规则

JSON格式的构建比较简单，主要为两种结构:

“名称/值”对的集合(A collection of narne/value pairs)。不同的语言中，它被理解为对象( object )，纪录(record )，结构( struct )，字典( dictionary )，哈希表( hash table ) ,有键列表( keyed list ) ,或者关联数组（( associative array ) 。
值的有序列表(An ordered list of values )。在大部分语言中，它被理解为数组( array ) 。JSON格式中作为值的类型允许是字符串( string )、数值(nurmber)、true、false、null、对象( object）或者数组( array ) 。

三、XML数据格式

1、XML的定义

扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。
XML是非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

2、 XML的特点

有且只有一个根节点；
　　数据传输的载体;
　　所有的标签都需要自定义;
　　是纯文本文件
　　格式统一，符合标准；
　　容易与其他系统进行远程交互，数据共享比较方便。

3、 XML的缺点

XML文件庞大，文件格式复杂，传输占带宽；
服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
服务器端和客户端解析XML花费较多的资源和时间。

HTML与XML的不同点：

XML自定义标签
HTML不用自定义标签

三、JSON中的键值对组合

JSON格式中的“名称/值”对的集合是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号）开始，“}”(右括号）结束。每个“名称”后跟一个“”(冒号);“‘名称/值’对”之间使用“”(逗号)分隔。

在这里插入图片描述

注意：在JSON文件中编写“ 名称/值 ”对的集合时，作为“ 名称 ” 的Key必须使用双引号（“ ”）包裹

在JSON中所有字符串都要使用双引号（" "）

四、JavaScript中的JSON

JSON是一种语法，用来序列化对象、数组、数值、字符串、布尔值和null。

JSON基于JavaScript语法, 但是 JavaScript 不等于 JSON

JavaScript类型	JSON的不同点
对象和数组	属性名称必须是双引号哦括起来的字符串，最后一个属性后不能有逗号
数值	禁止出现前导零【允许1，2，3；不允许01，02，03】
字符串	只有有限的一些字符可能被转义

五、JSON字符串与JSON对象

JSON字符串就是指在JavaScript语言中内容格式符合JSON格式的字符串类型的数据。
```
var isonText= '"name":"卧龙学苑" "addr":"保定市复兴中路77号直隶大厦1516室"};
```

JSON对象就是指JSON格式在JavaScript语言中的具体表现形式为对象或数组。

var jsonObject = {
"name":"卧龙学苑"，
"addr":"保定市复兴中路77号直隶大厦1516室"
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的JSON</title>
</head>
<body>
    <script>
        // JSON字符串 - 数据格式符合JSON格式的要求，字符串类型要用双引号
        var jsonString = '{"name" : "张无忌"}'; // {}里面是JSON数据格式，字符串要用双引号
        // JSON对象 - JSON数据格式在JavaScript中的具体表现（对象和数组）
        var jsonObject = {
            name : '张无忌'
        }
        var jsonArr = [1,2,3,4];

        // 对象与数组的解析 比 字符串解析的 快，所以对象与数组最常用

        // 客户端与服务器端之间是用字符串联系的，对象与数组最后都要转换成字符串
    </script>
</body>
</html>

六、JavaScript中的JSON对象

JavaScript语言中存在JSON对象，该对象用于实现字符串与对象之间的转换。其提供以下两个方法

JSON.parse()方法:解析JSON字符串并返回对应的值。

JSON.parse('{}'); // 0
JSON.parse('true'); // true
JSON.parse(""foo"");// "foo"
JSON.parse("[1,5,"false"]'); // [1,5,"false"] JSON.parse("null"); // null

JSON.stringify()方法:返回与指定值对应的JSON字符串。

JSON.stringify({}); // '{}'
JSON.stringify(true); // true 
 JSON.stringify("foo");// "foo"
JSON.stringify([1, "false",false]);// '[1,"false"",false]'
JSON.stringify({x:5}); // ' {"x":5} '

注意：JSON对象旧版本的浏览器中不被支持，引入json2.js文件进行解决

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON字符串与JSON对象</title>
</head>
<body>
    <script>
        // JSON字符串
        var jsonString = '{"name" : "张无忌"}';
 
        // 把字符串转为对象 --  JSON.parse()方法
        var jsonObject = JSON.parse(jsonString);
        console.log(jsonObject);

        // 把对象转为字符串  --  JSON.stringify()方法
        var jsonResult = JSON.stringify(jsonObject);
        console.log(jsonResult);
        
    </script>
</body>
</html>

在这里插入图片描述

七、Ajax中的XML

AJAX 可用来与 XML 文件进行交互式通信。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax中的JSON</title>
    <!-- <script src="json2.js"></script> -->
</head>

<body>
    <!-- <form action="#" enctype="application/x-www-form-urlencoded"></form> -->
    <button id="btn">请求</button>
    <script src="01_createXMLHttpRequest.js"></script>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            var xhr = createXMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 1.接收数据 - responseXML属性 -> 接收XML数据格式
                    var data = xhr.responseXML;
                    // 2.利用DOM解析XML
                    var nameElement = data.getElementByTagName('name')[0];
                    console.log(nameElement.textContent);
                }
            }

            // 请求数据格式 - user = zhangwuji&pwd=12345
            xhr.open('post', 'server.xml');
            xhr.send(null);
        });
    </script>
</body>

</html>