9. http协议_响应状态码_页面渲染流程_路由_中间件

Posted 2021-01-31 tianxiaxuange

1. http协议

超文本传输协议

协议详细规定了 浏览器 和 万维网服务器 之间互相通信的规则

客户端与服务端通信时传输的内容我们称之为报文（请求报文、响应报文）

• 常见的发送 get 请求方式

在浏览器地址栏输入 url 地址访问

所有的标签默认发送的是 get 请求：如 script link img a...

form 表单默认也是 get 请求 

• 常见的发送 post 请求方式

只能通过 form 表单，设置 method="post" 发送

• ajax 可以发送任意请求

2. 响应状态码

告诉浏览器（接受响应），响应内容是怎么样的状态

• 1xx: 基本不用
• 2xx: 响应成功的状态

200

• 3xx: 请求资源重定向

302 请求的资源/网址重新定向到新的一个网址

304 请求的资源/网址重新定向到缓存中

• 4xx: 请求资源未找到

404 服务器没有问题，资源在服务器中找不到

• 5xx: 服务器内部错误 

500 服务器出错了

3. 从浏览器输入一个url地址（www.baidu.com），到最终页面渲染完成，中间发生了什么？

① DNS解析

将域名地址解析为 ip 地址

② TCP连接：TCP三次握手

第一次握手： 浏览器发送给服务器，告诉服务器，我将要发送请求了，你准备接受一下

第二次握手： 服务器发送给浏览器，告诉浏览器，我准备好了，你放马过来

第三次握手： 浏览器发送给服务器，告诉服务器，我真的要发了，你准备好

③ 发送请求报文

请求报文

④ 接受响应

响应报文

⑤ 渲染页面

遇到 html，调用 html 解析器，将 html 的 dom 结构解析为 dom 树

遇到 css，调用 css 解析器，将 css 样式解析 cssom 树

将 dom 树和 cssom 树组合在一起，形成 render 树

先布局 layout，再渲染 render

 

遇到 js，调用 js 引擎，解析 js 代码，如果 js 中有操作 dom，它会修改 dom 树，如果有修改样式，它会修改 cssom 树

将 dom 树和 cssom 树组合在一起，形成 render 树

先布局 layout，再渲染 render （页面重排和重绘）

 

⑥  TCP四次挥手 断开连接 ---- 断开浏览器发送的请求的链接，断开浏览器接受响应的链接

第一次挥手： 浏览器发送给服务器，告诉服务器，我东西（请求报文）发完了，你准备关闭吧

第二次挥手： 服务器发送给浏览器，告诉浏览器，我接受完了，我准备关闭，你也准备关闭吧

第三次挥手： 服务器发送给浏览器，告诉浏览器，我东西（响应报文）发完了，你准备关闭吧

第四次挥手： 浏览器发送给服务器，告诉服务器，我接受完了，我准备关闭，你也准备关闭吧

4. 路由

组成：

请求方式        get（查） /  post（增） /  put（改） /  delete (删)  ....

路由路径        必须‘/‘开头        /shop/:id  ：id部分有params参数

回调函数（句柄函数）

• req 请求信息

req.query 获取查询字符串参数  GET 请求

req.params 获取params参数

req.headers 获取请求头的所有信息

req.body 获取请求体参数 POST请求 （默认 express 框架是解析不了请求体数据的，要想解析需要引入中间件实现）

• res 响应信息

注意：返回响应的方法有且只能设置一个，一旦有多个就会报错

res.download(文件相对路径)     返回响应，让浏览器自动下载指定文件

res.sendFile(文件绝对路径)      返回响应，让浏览器自动打开指定文件

res.end()      返回响应, 返回一个快速响应

res.json()     返回响应, 将传入的数据转化为json字符串返回

res.send()     返回响应, 根据传入的数据的类型，来自动判断添加相应的响应头来处理

res.redirect()     返回响应，请求资源重定向新的地址，默认响应状态码为302

res.get()     获取响应头的内容

res.set()     设置响应头的内容

res.status()     设置响应状态码

作用：  接受请求、返回响应         定义请求地址

使用： app.请求方式(路由路径, (request, response) => {});

request.query 参数（查询字符串参数）： ?username=111&pwd=222

request.params 参数 ： http://localhost:3000/hotel/123456 --> 123456就是params参数

5. 中间件

本质是一个函数 (req, res, next) => {}

作用：做一些重复做的事情。（当有多个路由重复做同一件事，这时就会交给中间件完成）

通过app.use(中间件函数)

解析原理：

所有路由和中间件都在一个数组中，会按照 js 引擎解析代码的先后顺序添加路由和中间件

当请求发送到服务器的时候，服务器获取到当前的请求信息（请求方式、请求路由路径），

遍历数组，找到第一个匹配（请求路由路径和请求方式必须完全一致）到的路由或者中间件（默认接受处理所有请求），执行其回调函数

如果处理的是中间件，中间件内部如果调用了next()方法，还会接下来匹配下一个路由或者中间件

没找到，返回一个状态码为404的响应， Cannot GET /xxx    Cannot POST /xxx