JSON与现代Web开发:数据交互的最佳选择

本文涉及的产品
函数计算FC,每月15万CU 3个月
应用实时监控服务-用户体验监控,每月100OCU免费额度
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
简介: JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。

一、关于JSON

1.1 简介

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。

image

1.2 发展

JSON的发展历程可以概括如下:

  1. JSON的诞生

    • JSON的概念最早由Douglas Crockford在2001年提出。当时,Crockford和Chip Morningstar在旧金山湾区的一间车库里测试了一个想法,发出了第一个JSON格式的消息。这个消息实际上是JavaScript代码,但不需要任何特殊解析工作,因为JavaScript解释器可以直接处理它。
    • 最初的JSON信息与JavaScript解释器发生了冲突,因为JavaScript保留了大量的关键字。为了避免冲突,Crockford决定要求所有的JSON键名都加上引号,这样被引号引起来的键名会被JavaScript解释器识别成字符串。
    • Crockford和Morningstar最初想将这种数据格式命名为“JSML”,但由于缩写已被使用,他们最终选择了“JavaScript Object Notation”,即JSON。
  2. JSON的发展

    • 2005年,JSON迎来了一次大爆发。网页设计师和开发者Jesse James Garrett在其博客文章中创造了“AJAX”一词,描述了如何利用JavaScript和XMLHttpRequest构建新型应用程序。虽然AJAX中的“X”代表XML,但Garrett指出JSON可以完全替代XML。
    • 随着AJAX技术的流行,JSON逐渐成为Web应用程序数据交换的主流格式。Google的Gmail和Google Maps等应用广泛采用了AJAX和JSON。
  3. JSON的标准化与普及

    • 2006年,Dave Winer抱怨JSON正在重新发明XML。Crockford回应称,重造轮子的好处是可以得到一个更好的轮子。
    • 2013年,ECMA国际发布了ECMA-404标准,正式定义了JSON的数据交换格式,详细描述了JSON的语法和结构。
    • 2014年,IETF发布了RFC 7159,进一步规范了JSON的语法和使用,详细说明了JSON的解析和生成规则,并明确了JSON与JavaScript的关系。
  4. 当今JSON的地位

    • 目前,JSON已经成为全球应用程序通过互联网通信时的主要数据交换格式。几乎所有的大型企业都采用了JSON,它在十大最受欢迎的Web API接口中占据了绝大多数。
    • JSON也在程序编码级别和文件存储上被广泛采用。在Stack Overflow上,关于JSON的问题越来越多,反映出JSON越来越流行。

JSON的发展历程显示了它从一种简单的数据格式到成为现代Web开发中不可或缺的一部分的转变。随着技术的发展,JSON可能会继续演进,以满足新的需求和挑战。

1.3 特点

  1. 易于理解:

    • JSON格式简洁明了,数据结构清晰,易于人类阅读和编写。
  2. 轻量级:

    • 与XML等其他数据格式相比,JSON的语法更加简单,数据量更小,有助于提高网络传输效率。
  3. 数据结构:

    • JSON采用键值对的方式表示数据,支持简单的数据类型(字符串、数字、布尔值、数组、对象和null),使得数据结构的表达更加灵活。
  4. 跨语言支持:

    • JSON可以被多种编程语言(如JavaScript、Python、Java、C#等)轻松解析和生成,具有良好的跨平台能力。
  5. 与JavaScript兼容:

    • JSON源自JavaScript,因此在JavaScript环境中处理JSON数据特别方便,常通过内置的JSON.parse()​和JSON.stringify()​方法进行数据解析和生成。

1.4 应用场景

  1. Web API:

    • JSON常用于RESTful API的数据格式,用于客户端与服务器之间的数据交换。

      例如,一个Web应用可能会向服务器发送一个JSON格式的请求,服务器处理后返回一个JSON格式的响应。这种方式在RESTful API设计中尤为常见。

      // 客户端发送的JSON请求
      {
             
        "userId": "12345",
        "action": "subscribe"
      }
      
      // 服务器返回的JSON响应
      {
             
        "status": "success",
        "message": "User subscribed successfully."
      }
      

      在这个示例中,客户端发送了一个包含用户ID和行动指令的JSON请求,服务器处理后以JSON格式返回状态和消息。

  2. 配置文件:

    • 一些应用程序使用JSON格式作为配置文件,因其易读性和结构化特性。
  3. 数据存储:

    • NoSQL数据库(如MongoDB)采用JSON或类似的BSON格式存储数据。
  4. 异步数据传输:

    • 在AJAX请求中,JSON常作为数据传输格式,使得异步操作更为方便。

二、JSON语法

JSON(JavaScript Object Notation)的语法规则非常简洁,主要包括以下几个部分:

2.1 语法规则

  • JSON数据由键值对组成,

  • 键(Key) : 键必须是字符串,且必须用双引号括起来。例如:"name"​。

  • 值(Value) : 值可以是字符串、数字、布尔值、对象、数组或 null​。
  • 分隔符:

    • 键值对之间用逗号 ,​ 分隔。
    • 在对象中,键和值之间用冒号 :​ 分隔。

2.2 数据类型

JSON支持以下几种基本数据类型:

  1. 字符串(String) :

    • 用双引号 "​ 包围,可以包含 Unicode 字符、转义字符等。
    • 示例: "hello world"
  2. 数字(Number) :

    • 可以是整数或浮点数,不需要引号。
    • 示例: 123​, 45.67
  3. 布尔值(Boolean) :

    • 表示真(true​)或假(false​)。
    • 示例: true​, false
  4. 数组(Array) :

    • 由一个或多个值构成的有序集合。
    • 示例: [1, 2, 3]​ 或 ["apple", "banana"]
  5. 对象(Object) :

    • 键值对的无序集合。
    • 示例: {"key": "value"}
  6. 空值(Null) :

    • 表示空值,用 null​ 表示。
    • 示例: null

2.3 基本结构

JSON的数据结构主要由两种形式构成:对象(Object)和数组(Array)。

对象(Object)

  • 定义: 对象用大括号 {}​ 包围,内部由一个或多个键值对组成。每个键(Key)是一个字符串,后面跟一个冒号 :​ 和对应的值(Value)。

  • 格式:

    {
         
      "key1": value1,
      "key2": value2,
      ...
    }
    
  • 示例:

    {
         
      "name": "Alice",
      "age": 30,
      "isStudent": false
    }
    

数组(Array)

  • 定义: 数组用方括号 []​ 包围,内部为有序的值列表,值之间用逗号 ,​ 分隔。

  • 格式:

    [
      value1,
      value2,
      ...
    ]
    
  • 示例:

    [
      "apple",
      "banana",
      "cherry"
    ]
    

2.4 其它规则

空格和换行

  • JSON标准允许在对象和数组的元素之间、键值对之间以及数组元素之间添加空格、换行符、制表符等空白字符,以增强可读性。

注释

  • 标准的JSON不支持注释。任何形式的注释(如//​或/* */​)都会导致JSON无效。

转义字符

  • 在JSON字符串中,某些特殊字符需要使用转义字符来表示,例如:

    • \"​ 表示双引号
    • \\​ 表示反斜杠
    • \/​ 表示正斜杠
    • \b​ 表示退格符
    • \f​ 表示换页符
    • \n​ 表示换行符
    • \r​ 表示回车符
    • \t​ 表示制表符
  • 此外,还可以使用\u​后跟四个十六进制数字来表示Unicode字符。

大小写敏感

  • JSON的键和值对大小写敏感。

编码

  • JSON通常使用UTF-8编码,但也可以是UTF-16或UTF-32。

遵循这些基本规则,就可以创建有效的JSON数据。JSON的简洁性和灵活性使其成为数据交换和配置文件的流行选择。

三、JSON的扩展和相关技术

JSON除了其基本形式外,还有一些扩展和相关技术,使其在不同场景中更具灵活性和功能性。

3.1 JSON的扩展

JSONP(JSON with Padding)

  • 概念: JSONP是一种允许网页从不同域名请求数据的技术,解决了浏览器的同源策略限制。

  • 工作原理: 通过动态创建<script>​标签,返回一个JSON对象,并将其作为回调函数的参数。

  • 示例:

    function handleResponse(data) {
         
      console.log(data);
    }
    // 请求示例
    <script src="https://example.com/data?callback=handleResponse"></script>
    

BSON(Binary JSON)

  • 概念: BSON是一种二进制编码的JSON,MongoDB使用这种格式存储数据。
  • 特点:

    • 支持更多的数据类型(如Date​和Binary​)。
    • 体积小、解析速度快。
  • 用途: 主要用于数据库存储和网络传输,特别是在需要高效存储和查询的情况下。

JSON5

  • 概念: JSON5是对JSON的一种扩展,旨在使其更加灵活和易于书写。

  • 特点:

    • 支持单引号和双引号。
    • 支持尾随逗号。
    • 可以省略对象中的键的引号。
    • 支持注释(单行和多行注释)。
  • 示例:

    {
         
      name: 'Alice', // 姓名
      age: 30,
      hobbies: [
        'reading',
        'gaming',
      ],
    }
    

3.2 相关技术

JSON Schema

  • 概念: JSON Schema是一种描述JSON数据结构的标准格式。

  • 用途: 用于验证JSON数据的结构,确保数据符合预期的格式和类型。

  • 示例:

    {
         
      "$schema": "http://json-schema.org/draft-07/schema#",
      "type": "object",
      "properties": {
         
        "name": {
          "type": "string" },
        "age": {
          "type": "integer" },
        "email": {
          "type": "string", "format": "email" }
      },
      "required": ["name", "age"]
    }
    

RESTful API

  • 概念: REST(Representational State Transfer)是一种基于HTTP协议的架构风格,广泛用于网络服务的设计。

  • 与JSON的关系: RESTful API通常使用JSON作为数据交换格式,便于客户端与服务器之间的通信。

  • 示例: 通过GET请求获取用户数据

    GET /api/users/1 HTTP/1.1
    Accept: application/json
    

GraphQL

  • 概念: GraphQL是一种用于API的查询语言,允许客户端指定所需的数据结构。

  • 与JSON的关系: GraphQL通常返回JSON格式的数据,允许灵活的数据请求。

  • 示例:

    query {
         
      user(id: 1) {
         
        name
        age
        email
      }
    }
    

WebSocket

  • 概念: WebSocket是一种在客户端和服务器之间建立持久连接的协议。

  • 与JSON的关系: WebSocket可以通过JSON格式进行数据交换,适用于实时应用,如聊天应用或在线游戏。

  • 示例:

    const socket = new WebSocket('wss://example.com/socket');
    socket.onmessage = function(event) {
         
      const data = JSON.parse(event.data);
      console.log(data);
    };
    

目录
相关文章
|
24天前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
6天前
|
网络协议 前端开发 数据处理
11 Web交互知识你了解吗?
路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。
13 1
|
10天前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
11天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
25 1
|
14天前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
7天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
29天前
|
JSON JavaScript Java
在Java中处理JSON数据:Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用,重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能,包括数据绑定、流式API和树模型,并通过示例演示了如何使用Jackson进行JSON解析和生成。最后,作者分享了一些实用的代码片段和使用技巧,帮助读者更好地理解和应用这些工具。
在Java中处理JSON数据:Jackson与Gson库比较
|
16天前
|
存储 JSON 监控
公司用什么软件监控电脑:JSON 在监控信息交互中的应用探索
在现代企业管理中,电脑监控软件广泛应用于保障信息安全和提升工作效率。JSON(JavaScript Object Notation)因其简洁和易读性,在监控信息的收集、传输和处理中扮演着关键角色。本文介绍了 JSON 在监控数据结构、信息传输及服务器端处理中的具体应用,展示了其在高效监控系统中的重要性。
30 0
|
1月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
30天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
90 0