• 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

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    gridview列前加复选框需要注意的一点
    为什么日历控件放在panel无法显示出来
    表格翻页
    The SDK platform-tools version ((21)) is too old to check APIs compiled with API 23
    win7怎么安装和启动 jboss
    (转)如何制作nodejs,npm “绿色”安装包
    Can't use Subversion command line client: svn
    (转)Android自定义属性时format选项( <attr format="reference" name="background" /> )
    本地拒绝服务漏洞修复建议
    (转)Android 读取联系人(详细)
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10201022.html
Copyright © 2020-2023  润新知