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

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

 

猜你喜欢

转载自www.cnblogs.com/tianxiaxuange/p/10201022.html