JSON、前后端分离

JSON

什么是JSON

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）。是一种轻量级的数据交换格式。
• JSON格式具有以下特点：
  • 易读易写：JSON 格式使用文本表示，易于人类阅读和编辑（相比起来 XML 就没那么容易看懂）
  • 简洁明了：JSON 格式只包含必须的数据，不冗余且易于理解；
  • 平台无关性：JSON 格式完全独立于编程语言和操作系统。

JSON虽然是JavaScript语言的一个子集，但是JSON被广泛应用于 前后端数据交换、数据存储、API接口的传输等方面。

JSON 的格式

• JSON的格式由两种结构组成：键值对和数据集合。
• 键值对
  • 键值对用于表示一组数据，每个键值对包含一个键和一个值
  • 中间用冒号（:）分隔，键和值用逗号（,）分隔。
  • 键是一个字符串（必须加引号），值可以是数字、字符串、布尔值、数组或对象（嵌套）等。

• 数据集合
  • 数据集合用于表示一组有序数据，由一对方括号（[]）表示。
  • 每个数据之间用逗号（,）分隔。
  • 数据可以是任意类型的值，包括数字、字符串、布尔值、数组或对象等。

JSON 与 XML 的对比

• 数据格式

  • JSON 数据格式：只包含必要的数据和信息，结构简洁，易于阅读和理解，采用键值对和数据集合（数组）表示数据。
  • XML 数据格式：除了数据本身以外，还包含描述数据的标签，结构相对复杂，需要更多的标记和约束条件，采用标记语言表示数据。

• 数据传输

  • JSON 数据传输：相较于 XML 数据，较为轻量，占用较小的带宽空间，速度更快，适合于网络传输。
  • XML 数据传输：相较于 JSON 数据，由于其结构更为复杂，需要更多的带宽空间，速度更慢，但是适合于数据的存储和数据的处理。

• 数据解析

  • JSON 数据解析：由于其轻量级的特性，在大多数编程语言中都有方便的解析器，可以迅速地将 JSON 数据转化为对象。
  • XML 数据解析：由于其结构相对复杂，在解析上较为耗费时间和资源，需要更多的算力和存储空间。

• 数据可读性

  • JSON 数据可读性：JSON 数据的结构相对于 XML 更加清晰和直观，更加具有可读性和可理解性，学习成本较小。
  • XML 数据可读性：由于 XML 数据较为冗长，需要更多的标记和约束，相较于 JSON 数据来说，更加复杂和难以理解。

相较 XML，JSON 格式是一个更加轻量级、更加简洁、更加高效的数据交换格式。但在某些场景下，使用XML更合适，例如需要区分数据与元数据的时候。

前后端交互中使用 JSON 格式

• POST 请求的 body 使用 JSON 格式。
• 响应数据使用 JSON 格式。

前后端分离

前后端分离是什么

前后端分离是一种将前端与后端进行松耦合结合的架构方式，主要思想是将前端与后端业务逻辑分离，使得每个部分可以独立发展和部署。在前后端分离架构中，前端应用通过提供接口和后端进行数据交互和处理，从而实现数据的呈现和前后端的交互。

前后端分离之前的开发模式

• 前后端整个应用都是一个整体，代码耦合度较高，前端和后端代码交互较为混杂。前端没有项目化、工程化，前端代码的复用性极差。

前后端分离之后

• 打开一个新页面时，浏览器先请求前端服务，获取静态资源（包括前端代码）。
• 浏览器再根据前端代码中对应的路径去请求后端服务，根据后端返回的数据更新页面数据。

AJAX请求

• AJAX（Asynchronous JavaScript and XML）是一种异步通信的Web开发技术。它不需要重新加载整个页面，而是可以通过XMLHttpRequest对象向服务器请求数据，并使用JavaScript进行数据处理和局部页面更新。通过AJAX技术，可以在不影响页面视觉效果的情况下更新数据，从而提高Web应用程序的性能和用户体验。
• AJAX可以用于实现以下功能：
  • 实现动态网页内容：在不刷新整个页面的情况下，加载新的数据或更新现有的数据。
  • 用户操作的实时反馈：例如，通过AJAX，可以实时更新表单验证错误，而不需要用户重新提交表单。
  • 加载部分页面：通过AJAX可以异步动态加载整个页面或页面的一部分，从而缩短页面加载时间，提高用户体验。
  • 和服务器进行实时通信：AJAX可以实现双向通信，从而及时接收来自服务器的通知和数据。
  • 实现自动完成和实时搜索：例如，当用户输入关键字时，可以通过AJAX从服务器获取和显示搜索建议。 等等。