Ajax理论总结

1. URL

1. URL

   https://editor.csdn.net/md/?not_checkout=1
   结构：协议+主机名+目录结构+文件名

   URL 完整的结构

   < scheme >://< user >:< pwd >@< host >:< port >/< path >< params >?< query >#< frag >

   ① scheme

   方案, 协议. 以哪种方式获取服务器资源
   不区分大小写, 常见的协议 http、https、ftp、file

   

   ② user : pwd

   登陆这个服务器的用户名和密码

   ③ host

   主机名称 127.0.0.1 或 www.baidu.com
   表示要访问的服务器, 在网络上的具体住址（比如门牌号）

   ④ port

   端口号, 每一个端口号都对应着一个服务
   在主机上开启服务会对应一个唯一的端口号
   端口号理论上最大值 2^16-1 = 65535
   前 0~1024 为系统端口, 不要随意更改

   ⑤ path

   路径, 结构路径, 资源在服务器上存在的位置

   ⑥ params

   参数, 跟踪状态的参数 session / cookie

   ⑦ query

   查询字符串
   get 方法 提交请求时, 问号后面的查询字符串

   ⑧ frag

   锚点 连接

HTTP 协议

HyperText Tramsfer Protocol 超文本传输协议
规范了数据是如何打开包和传递的（专门用于传递 HTML 文件）
HTTP 协议的历史
我们目前使用的版本是 HTTP/1.1

web 请求的原理

消息/报文 Message

请求消息

请求起始行 | 请求头 | 请求主体 |

响应消息

响应起始行 | 响应头 | 响应主体 |

请求消息（request Message）

请求消息, 是客户端发给服务器的数据
由三部分组成, 请求起始行, 请求头, 请求主体

① 请求起始行

1. 请求方法

   HTTP协议规定的请求方法和 Restful 规则中的方法对比

   HTTP协议规定的方法		Restful 规则中的方法
   get 明文传参, 上限 2kb 向服务器要数据时使用, 无请求主体		get 查数据时使用, 无请求主体, 后台使用 req.query
   post 隐式传参, 无上限, 给服务器时使用, 有请求主体		post 创建（增）, 有请求主体, 后台使用 req.body
   put 放置文件到服务器 一般会被禁用		put 修改（改）, 有请求主体, 后台使用 req.body
   delete 把服务器上的某个文件删除 一般会被禁用		delete 删除（删）, 无请求主体, 后台使用 req.query

   注解: restful API（是一种规则, 利用HTTP已有的 4 个方法定义了 4 个行为, 使用这 4 个行为发送请求）

2. 协议版本号 HTTP/1.1

3. 请求 URL www.tmooc.cn

② 请求头

Host: www.tmooc.cn 告诉服务器, 我要访问 www.tmooc.cn 这个主机

Connection: keep-alive 客户端告诉服务器, 请开启持久连接

User-Agent: Mozilla/5.0 ... 告诉服务器这个浏览器的类型和版本号

Accept-Language: zh-CN,zh;q=0.9 告诉服务器这个浏览器可以接收的自然语言的类型

Referer: https://www.tmooc.cn/ 当前网页的来源, 告诉服务器当前网页来源于那个页面

③ 请求主体

formdata
get/delete 没有请求主体
post/put 有请求主体

响应消息（response Message）

服务器发送给客户端的数据
由三部分组成: 响应起始行, 响应头, 响应主体

① 响应起始行

1. 协议版本号 HTTP/1.1

2. 响应状态码

   服务器告诉客户端, 服务器的响应状态码是什么

   响应状态码	信息描述
   1XX	正在请求, 提示信息
   2XX	200 响应成功
   3XX	301 永久重定向 302 临时重定向 304 请求未改变, 命中缓存
   4XX	404 not Found 请求资源不存在 403 权限不够 405 请求方法不被允许
   5XX	500 服务器代码出问题

3. 原因短句 对响应码的简单说明

② 响应头

Date: Mon, 16 Aug 2021 07:10:17 GMT
告诉浏览器服务器响应的时间点

Connection: keep-alive
服务器告诉浏览器, 我已经打开了持久连接

Content-Type: text/html
告诉浏览器响应主体的类型是什么
text/html HTML文本
text/css CSS文本
application/javascript JS文本
appliction/json JSON文本
image/jpg
image/png
image/gif

③ 响应主体

服务器传递给浏览器的数据

总结:

缓存

客户端将服务器响应回来的数据进行自动的保存, 当再次访问时直接使用保存的数据

缓存的优点

1、减少冗余的数据传输, 节省了客户端的流量

2、节省了服务器的带宽

3、降低了服务器对资源的消耗和运行的要求

4、降低了由于远距离传输而造成的加载延迟

缓存原理, 新鲜度和过期时间

① 操作缓存（需要前后端配合）
缓存相关消息头

Cache-Control: max-age=0 单位是秒 s
从服务器将文档传递给客户端之时起
此文档处于新鲜的秒数, 是一个相对时间

② 修改请求消息头

<meta http-equiv="Cache-Control" content="max-age=3600">
使用 <meta> 标记更改请求消息头
语法: <meta http-equiv="消息头属性名" content="值">

HTTP 性能优化

HTTP 的连接过程

发送请求 --> 建立连接 --> 服务器处理请求 --> 访问资源 --> 构建响应 --> 记日志

① http 连接的性能优化

1、减少连接创建的次数

2、减少请求的次数（代码设计更合理）

3、提高服务器端运行速度

4、尽可能的减少响应数据的长度

安全的 HTTP 协议, HTTPS

HTTPS, 是安全版本的 http 协议
S: SSL 为数据通信提供安全

1、客户端发送请求时, 先在 SSL层加密, 然后再发送加密后的数据和SSL认证, 服务接收后, 在 服务端的 SSL 层使用认证解密, 服务端得到请求的明文, 对请求做处理

2、服务器发送响应时, 也会在自己的 SSL层加密, 然后再响应给客户端, 客户端得到加密数据, 在 SSL层解密, 得到响应明文, 解析执行响应内容