总结HTTP协议和JSON相关的知识点

客户端浏览器请求服务器端资源顺序：

①客户端连接到服务器 —— 经过“三次握手”——可以进一步的“百度”

②客户端发送请求消息(Request Message)

③服务器返回响应消息(Response Message)

④客户端和服务器之间断开连接 —— 经过“四次挥手”——可以进一步“百度”

HTTP协议

协议：就是由相关的委员会规定好的，请求和响应消息的固定格式。
HTTP协议：Hyper Text Transfer Protocol，超文本传输协议。此协议规定的Web请求消息和响应消息的固定格式要求。由IETF委员会(www.ietf.org)制定。
HTTP/0.1： 1991年发布
HTTP/1.0： 1996年发布，RFC1945 —— 使用量很少
HTTP/1.1： 1999年发布，RFC2616 —— 当前的主流
HTTP/2.0： 2015年发布，RFC7540 —— 目前少量服务器在使用
——————————————————————————————————
HTTPS（Secure）是在某个版本的HTTP协议基础上，又增加了一层加密/解密层，可以将传输在互联网上的请求和响应消息进行加密和解密。

HTTP请求消息格式

Request Message是客户端浏览器发给Web服务器的，其格式要求：
请求行： 请求方法 请求URI 协议版本
请求头部 请求头部名: 请求头部值
… …
请求头部 请求头部名: 请求头部值
空行
请求主体 有的请求有主体(POST/PUT)，有的则没有(GET/HEAD)

常见的请求方法及其含义：
①GET —— 表达客户端想要“获取”服务器的文件或数据，该操作是“幂等的”—无论执行多少次服务器端状态都相同
②POST —— 表达客户端想要“传递数据”给服务器，希望服务器存储下来生成一条记录，该操作不是“幂等的”
③PUT —— 表达客户端想要“放置数据”给服务器，希望服务器根据此数据更新一条记录，该操作不是“幂等的”
④DELETE —— 表达客户端想用“删除”服务器上的某个记录，该操作不是“幂等的”
⑤HEAD —— 表示客户端想要“某个资源的响应消息头部，但不要该资源本身”，该操作是“幂等的”
⑥TRACE —— 表示客户端想要“追踪请求资源的访问路径”，该操作是“幂等的”
⑦OPTIONS —— 表示客户端想要“知道服务器端支持哪些类型的请求”，该操作是“幂等的”
⑧CONNECT —— 保留以后使用

常用的请求头部及其含义：
①Host: www.baidu.com 客户端想请求服务器上的哪个域名下的资源——HTTP/1.1新特性
②Connection: keep-alive 客户端申请“保持连接”以供后续的请求继续使用——HTTP/1.1新特性
③Cache-Control：no-cache 客户端告诉服务器如何缓存此次请求中的数据
④Pragma：no-cache 客户端告诉服务器如何缓存此次请求中的数据
⑤User-Agent：xxx 客户端告诉服务器当前“用户代理(即浏览器)”的类型
⑥Accept：客户端告诉服务器自己可以接收的响应消息内容类型
⑦Accept-Language：zh 客户端告诉服务器当前用户的首选自然语言，用于实现i18n（internationalization，国际化）
⑧Accept-Encoding：客户端告诉服务器自己可以接收哪种格式的压缩数据
⑨Cookie：服务器保存在客户端用于追踪历史访问数据的“小点心”
⑩Referer：当前请求发自哪个页面
提示：Node.js服务器如何读取客户端提交的请求头部
console.log( req.headers )

请求消息示例：

HTTP响应消息格式

Response Message：是服务器发给客户端浏览器的应答数据，它的格式如下：
状态行： 协议版本 状态码 原因短句
响应头部 响应头部名: 响应头部值
… …
响应头部 响应头部名: 响应头部值
空行
响应主体 有的响应有主体(GET/POST/PUT/DELETE)，有的则没有(HEAD)

常见的相应消息状态码及其对应的原因短句：
1XX —— 提示性响应消息
100 Continue 请求未处理完，继续处理
101 Switching Protocols 切换协议
2XX —— 成功的响应消息
200 OK 响应正常结束
201 Created 客户端提交给服务器的已经被保存
3XX —— 请求需要转向另一个地址
301 Moved Permanently 请求的资源永久移走了，需要配合Location头一起使用
303 See Other
304 Not Modified 请求的资源没有修改(请再次使用之前缓存的响应数据即可)
4XX —— 客户端引起的错误
400 Bad Request 无效的请求消息
401 Unauthorized 访问的资源需要授权
402 Payment Required 请求的资源需要付费
403 Forbidden
404 Not Found
405 Method Not Allow 请求方法不被服务器允许
5XX —— 服务器端运行错误
500 Internal Server Error 服务器内部错误
502 Bad Gateway 无效的网关
503 Service Unavailable 服务器暂时不可用
505 HTTP Version Not Support

常用的响应求头部及其含义：
①Server: nginx 服务器的种类
②Date: Wed, 05 Jan 2022 09:36:52 GMT 响应消息发出时间（注意HTTP协议中时间格式）
③Content-Type: text/html;charset=UTF-8 响应消息内容类型
④Connection: keep-alive 告诉对方启动“持久化连接”
⑤Content-Encoding: gzip 告诉客户端当前响应消息的压缩类型
⑥Expires: Wed, 05 Jan 2022 09:44:35 GMT 告诉客户端当前响应消息的主体数据过期时间(若没过期，则可以继续当做缓存数据使用；过期了就要抛弃了)
⑦Cache-Control: no-cache 服务器告诉客户端当前响应消息不要缓存
⑧Location: http://oracle.com 配合3XX系列的状态码，指定跳转地址
⑨Last-Modified：Wed, 05 Jan 2022 09:44:35 GMT 告诉客户端当前响应消息主体在服务器端最后一次修改时间
⑩Set-Cookie：服务器在向客户端保存“小甜点”以记录访问历史数据
小知识：Node.js/Express中修改响应消息头部
res.header(‘Content-Type’, ‘text/html;charset=UTF-8’)
响应消息示例：

XML与JSON

AJAX请求过程中，服务器返回响应消息，可能有如下的几种类型：
①简单的文本字符串
HTTP/1.1 200 OK

Content-Type： text/plain;charset=UTF-8

non-exists
if(xhr.responseText==='exists'){ ... }
else {....}
1
2
3

②响应消息是一段HTML片段——比较少用，服务器把要显示的数据格式定死

HTTP/1.1 200 OK
Content-Type： text/html;charset=UTF-8

<td>1</td><td>Apple MacBookAir</td><td>￥3500</td>
tr.innerHTML = xhr.responseText
1
2

③响应消息是一段XML数据( eXtensible Markup Language)——一种用于描述数据的语言
HTTP/1.1 200 OK
Content-Type： application/xml;charset=UTF-8

<list>
    <product   lid="101">
            <title>AppleMacBookAir</title>
            <price>￥3500</price>
    </product>
    <product   lid="105">
            <title>联想小新</title>
            <price>￥3800</price>
    </product>
    <product   lid="108">
            <title>戴尔游侠</title>
            <price>￥4300</price>
    </product>
</list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

客户端网页接收到上述XML响应消息，必须使用XML解释器程序，把上述数据转为JS对象：[{lid:105, title:‘’, price:3500}, {}, {}]
④响应消息是一段JSON数据——一种用于描述数据的语言
HTTP/1.1 200 OK
Content-Type： application/json;charset=UTF-8

[
    {
            "lid": 105,
            "title": "AppleMacBookAir",
            "price": "￥3500"
    },
    {
            "lid": 108,
            "title": "联想小新",
            "price": "￥3800"
    },    
    {
            "lid": 205,
            "title": "戴尔游侠",
            "price": "￥4300"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

JSON格式数据客户端非常容易处理！

HTML与XML有何异同？
①HTML用于描述网页内容；XML用于描述一批数据
②HTML标签是固定的（97个）；XML标签是随意指定的
③HTML标签写法比较灵活；XML语法更加严格

XML和JSON有何异同？
①相同点：XML和JSON都用于描述批量数据
②不同点：XML采用的是“标签语法”，非常繁杂；JSON采用的是“类JS对象语法”，精简得多 —— JSON一经推出就完全取代了XML.

http://www.json.org.cn/
JSON（JavaScript Object Notation），JS对象表示法，是一种语言，语法借鉴了JS对象语法的一部分，用于描述数据，把数据转换为字符串格式，在不同的系统间交换。目前，所有的编程语言都可以把自己的数据转换为JSON字符串，也可以把JSON格式的字符串转换为自己的内部数据。
JSON语法规则：
①一段JSON格式的数据本质是一个字符串
②一段JSON字符串中只有一个根——要么是“{ }”要么是“[ ]”
③一个JSON 对象中，可以包含多个键值对，形如： “键名”: 键值
④JSON键值可以是如下类型：“字符串”、数字、true/false、另一个对象、另一个数组、null
⑤JSON中的键名和字符串键值必须用引号且是双引号
⑥JSON中两个数据间的分隔符用“逗号”表示，但是最后一个数据后面不能加逗号
⑦JSON片段中没有“注释”一说

个人总结以下JSON片段哪些是正确的？
{ } 正确
[ ] 正确
{ },{ } 错误
[ ],[ ] 错误
[1, 20, true,] 错误
{ age: 20 } 错误
{ “age”: 20, “birthday”: “2020-10-25” } 正确
{ “birthday”: new Date() } 错误
{ “name”: “WEB2111”, “members”:[“当当”,“豆豆”] } 正确
[ {“age”:18}, {“age”:20}, {“age”:23} ] 正确
[ {“age”:18}, /{“age”:20}/, {“age”:23} ] 错误

JSON序列化：把服务器端编程语言中的数据转换为JSON格式的字符串
JSON反序列化：在浏览器中把接收到的JSON格式的字符串转换为JS中的对象
目前各大浏览器以及Node.js解释器都自带了JSON序列化和反序列化工具：
let obj = { … }
let jsonString = JSON.stringify( obj ) //JSON序列化方法
let objData = JSON.parse( jsonString ) //JSON反序列化方法
提示：咱们的项目中，Express提供的res.send()方法自带“JSON序列化”功能。但是客户端XHR对象却没有自动的“JSON反序列化”功能。加粗样式