JSON数据类型介绍，网络请求介绍，前后端api交互

1.JSON数据类型介绍

        首先我们介绍一下什么是JSON：

• JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
• JSON 是一种轻量级的数据交换格式。

JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。

文本可被任何编程语言作为数据来读取和使用。

JSON 格式最初由 Douglas Crockford 提出。

JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：

JSON.parse()就是指的可以以JSON格式写的字符串转换成JS对象。

在存储数据时，数据必须是某种具体的格式，并且无论您选择在何处存储它，文本永远是合法格式之一。

JSON 让 JavaScript 对象存储为文本成为可能。

存储的函数就是JSON.stringify(),然后

localStorage.setItem("testJSON", myJSON);在这一句话中"testJSON"就是你自己的设置的类似于文件的键名，你可以自己取，后面的myJSON相当于将值放进入前面的键名中。

接下来我们简单介绍JSON的数据类型

• 字符串
• 数字
• 对象（JSON 对象）
• 数组
• 布尔
• Null

在JSON中字符串必须要用""双引号来括起来，数字必须是整数或者是浮点数

下面是一些表示这些JSON数据类型的示例代码：

对象

json复制代码

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

数组

json复制代码

	[
	"Apple",
	"Banana",
	"Cherry"
	]

字符串

json复制代码

"Hello, World!"

数值

json复制代码

42

或者浮点数：

json复制代码

3.14159

布尔值

json复制代码

true

或者：

json复制代码

false

null

json复制代码

null

在实际应用中，这些数据类型经常混合使用，例如在一个对象中包含数组、字符串和其他对象等。

json复制代码

	{
	"name": "John",
	"age": 30,
	"isStudent": false,
	"hobbies": ["reading", "coding", "running"],
	"scores": {
	"math": 90,
	"english": 85
	},
	"nullValue": null
	}

在JavaScript中，你可以使用 JSON.stringify() 方法将JavaScript对象转化为JSON格式的字符串，使用 JSON.parse() 方法将JSON格式的字符串转化为JavaScript对象。这在前后端API交互中非常常见，前端通常将JavaScript对象转化为JSON字符串发送给后端，后端再将接收到的JSON字符串解析为对象进行处理。

2.网络请求介绍

1. HTTP请求：
   • HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种应用层协议，常用于Web应用中的数据传输。
   • 常见的HTTP请求方法包括GET、POST、PUT、DELETE等。
     • GET：请求指定的页面信息。它本质就是发送一个请求来取得服务器上的某一资源。
     • POST：向服务器提交数据，常用于提交表单或上传文件。
     • PUT：向指定资源位置上传其最新内容。
     • DELETE：请求服务器删除指定的页面或某一个资源。
   • HTTP请求通常包含请求行、请求头、请求体等部分，用于向服务器发送请求并获取响应。

在浏览器中可以用fetch来输入

fetch('https://api.example.com/data')  
  .then(response => response.json())  
  .then(data => console.log(data)) // 处理数据  
  .catch(error => console.error('Error:', error)); 

1. HTTPS请求：
   • HTTPS是在HTTP基础上添加了SSL/TLS加密层的安全传输协议。
   • 通过HTTPS发送的请求可以提供更高的数据传输安全性，保护用户数据不被窃取或篡改。
   • HTTPS的工作流程包括客户端发起连接请求、服务器证书发送、客户端验证证书以及密钥协商等步骤。

const data = { key: 'value' }; // 要发送的数据  
  
fetch('https://api.example.com/submit', {  
  method: 'POST', // 或 'PUT'  
  headers: {  
    'Content-Type': 'application/json',  
  },  
  body: JSON.stringify(data), // 发送的数据  
})  
.then(response => response.json())  
.then(result => console.log(result))  
.catch(error => console.error('Error:', error));

1. TCP连接请求：
   • TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。
   • TCP使用三次握手来建立连接，确保连接建立成功后，双方之间可以正常地传输数据。
   • TCP连接请求通常用于需要可靠传输的场景，如文件传输、网页浏览等。

在Node.js中我们用net模块创建TCP协议。

const net = require('net');  
  
const client = new net.Socket();  
client.connect(1337, '127.0.0.1', () => {  
  console.log('Connected');  
  client.write('Hello, server! Love, Client.');  
});  
  
client.on('data', (data) => {  
  console.log('Received: %s', data);  
  client.destroy(); // kill client after server's response  
});  
  
client.on('close', () => {  
  console.log('Connection closed');  
});

1. UDP数据包发送：
   • UDP（User Datagram Protocol，用户数据报协议）是一种无连接的传输层协议。
   • UDP提供面向事务的简单不可靠信息传送服务，适用于一次传输少量数据且对实时性要求较高的场景。
   • UDP数据包发送不需要建立连接，直接发送数据报，因此传输速度较快，但可靠性较低。

                在Node.js中，我们用dgram模块来发送UDP数据包

const dgram = require('dgram');  
const message = Buffer.from('Some bytes');  
const client = dgram.createSocket('udp4');  
  
client.send(message, 0, message.length, 12345, 'localhost', (err, bytes) => {  
  if (err) throw err;  
  console.log(`UDP message sent to localhost:${12345}`);  
  client.close();  
});

3.前后端api交互

首先我们来聊一下什么是前后端api

API 指的是应用程序编程接口（Application Programming Interface）。

Web API 是 Web 的应用程序编程接口。

浏览器 API 可以扩展 Web 浏览器的功能。

服务器 API 可以扩展 Web 服务器的功能。

前后端API交互通常涉及前端应用程序（通常是Web浏览器中的JavaScript代码）与后端服务器之间的通信。这种通信是通过HTTP请求和响应来完成的，其中前端发送请求以获取数据或执行某些操作，后端服务器处理这些请求并返回响应。

前端应用程序使用某种HTTP方法（如GET、POST、PUT、DELETE等）向后端API发送请求。这通常是通过Ajax（Asynchronous JavaScript and XML）或Fetch API来实现的。

我们用fetch API来写一下：

fetch('https://api.example.com/data', {  
  method: 'GET', // 或者 'POST', 'PUT', 'DELETE' 等  
  headers: {  
    'Content-Type': 'application/json',  
    'Authorization': 'Bearer your-token' // 如果需要身份验证  
  },  
  body: JSON.stringify({ key: 'value' })   
})  
.then(response => response.json())   
.then(data => {  
  // 处理返回的数据  
  console.log(data);  
})  
.catch(error => {  
  // 处理错误  
  console.error('Error:', error);  
});

                然后我们再来看一下后端的代码。

const express = require('express');  
const app = express();  
const port = 3000;  
  
app.get('/data', (req, res) => {  
  // 处理GET请求，获取数据  
  const data = fetchDataFromDatabase();  
  res.json(data);   
});  
  
app.post('/submit', (req, res) => {  
   
  const newData = req.body; 
  createResourceInDatabase(newData);  
  res.status(201).send('Resource created'); // 返回状态码201表示资源已创建  
});  
  
app.listen(port, () => {  
  console.log(`Server is running on port ${port}`);  
});

后端服务器处理完请求后，会发送一个HTTP响应回前端。响应包含一个状态码（如200表示成功，404表示未找到等）、响应头以及响应体中的数据。

前端接收到后端发送的响应后，会根据响应的状态码、响应头以及响应体中的数据来执行相应的操作。如果响应成功，前端可能会更新用户界面或执行其他逻辑。如果响应失败，前端可能会显示错误消息或重试请求。