带你认识HTTP(四)

36 阅读6分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

前言

前面介绍了HTTP的基本概念,以及各个版本和HTTPS的安全请求,那么本章的重点来了,就是请求的报文和返回内容做一个详解。

带你认识HTTP(一)
带你认识HTTP(二)
带你认识HTTP(三)

请求部分

请求行: 永远位于请求的第一行

请求头: 从第二行开始,到第一个空行结束

请求体: 从第一个空行后开始,到正文的结束(GET 没有)

  • 请求方式

    • POST

    • GET

      【请求行】
      GET /myApp/success.html?username=zs&password=123456 HTTP/1.1
      
      【请求头】
      Accept: text/html, application/xhtml+xml, */*; X-HttpWatch-RID: 41723-10011
      Referer: http://localhost:8080/myApp/login.html
      Accept-Language: zh-Hans-CN,zh-Hans;q=0.5
      User-Agent: Mozilla/5.0 (MSIE 9.0; qdesk 2.4.1266.203; Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
      Accept-Encoding: gzip, deflate
      Host: localhost:8080
      Connection: Keep-Alive
      Cookie: Idea-b77ddca6=4bc282fe-febf-4fd1-b6c9-72e9e0f381e8
      
    • GET 和 POST 比较

      作用:GET 用于获取资源,而 POST 用于传输实体主体

      参数:GET 和 POST 的请求都能使用额外的参数,但是 GET 的参数是以查询字符串出现在 URL 中,而 POST 的参数存储在实体主体中(GET 也有请求体,POST 也可以通过 URL 传输参数)。不能因为 POST 参数存储在实体主体中就认为它的安全性更高,因为照样可以通过一些抓包工具(Fiddler)查看

      安全:安全的 HTTP 方法不会改变服务器状态,也就是说它只是可读的。GET 方法是安全的,而 POST 不是,因为 POST 的目的是传送实体主体内容

      • 安全的方法除了 GET 之外还有:HEAD、OPTIONS
      • 不安全的方法除了 POST 之外还有 PUT、DELETE

      幂等性:同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的,所有的安全方法也都是幂等的。在正确实现条件下,GET,HEAD,PUT 和 DELETE 等方法都是幂等的,POST 方法不是

      可缓存:如果要对响应进行缓存,需要满足以下条件

      • 请求报文的 HTTP 方法本身是可缓存的,包括 GET 和 HEAD,但是 PUT 和 DELETE 不可缓存,POST 在多数情况下不可缓存
      • 响应报文的状态码是可缓存的,包括:200、203、204、206、300、301、404、405、410、414 and 501
      • 响应报文的 Cache-Control 首部字段没有指定不进行缓存
    • PUT 和 POST 的区别

      PUT 请求:如果两个请求相同,后一个请求会把第一个请求覆盖掉(幂等),所以 PUT 用来修改资源

      POST 请求:后一个请求不会把第一个请求覆盖掉(非幂等),所以 POST 用来创建资源

      PATCH 方法 是新引入的,是对 PUT 方法的补充,用来对已知资源进行局部更新

  • 请求行详解

    GET  /myApp/success.html?username=zs&password=123456 HTTP/1.1	
    POST /myApp/success.html HTTP/1.1
    
    内容说明
    GET/POST请求的方式。
    /myApp/success.html请求的资源。
    HTTP/1.1使用的协议,及协议的版本。
  • 请求头详解

    从第 2 行到空行处,都叫请求头,以键值对的形式存在,但存在一个 key 对应多个值的请求头

    内容说明
    Accept告知服务器,客户浏览器支持的 MIME 类型
    User-Agent浏览器相关信息
    Accept-Charset告诉服务器,客户浏览器支持哪种字符集
    Accept-Encoding告知服务器,客户浏览器支持的压缩编码格式,常用 gzip 压缩
    Accept-Language告知服务器,客户浏览器支持的语言,zh_CN 或 en_US 等
    Host初始 URL 中的主机和端口
    Referer告知服务器,当前请求的来源。只有当前请求有来源,才有这个消息头。 作用:1 投放广告 2 防盗链
    Content-Type告知服务器,请求正文的 MIME 类型,文件传输的类型, application/x-www-form-urlencoded
    Content-Length告知服务器,请求正文的长度。
    Connection表示是否需要持久连接,一般是 Keep -Alive(HTTP 1.1 默认进行持久连接 )
    If-Modified-Since告知服务器,客户浏览器缓存文件的最后修改时间
    Cookie会话管理相关(非常的重要)
  • 请求体详解

    • 只有 POST 请求方式,才有请求的正文,GET 方式的正文是在地址栏中的

    • 表单的输入域有 name 属性的才会被提交,不分 GET 和 POST 的请求方式

    • 表单的 enctype 属性取值决定了请求正文的体现形式

      enctype取值请求正文体现形式示例
      application/x-www-form-urlencodedkey=value&key=valueusername=test&password=1234
      multipart/form-data此时变成了多部分表单数据。多部分是靠分隔符分隔的。-----------------------------7df23a16c0210 Content-Disposition: form-data; name="username" test -----------------------------7df23a16c0210 Content-Disposition: form-data; name="password" 1234 -------------------------------7df23a16c0210

响应部分

响应部分图:

  • 响应行

    HTTP/1.1:使用协议的版本

    200:响应状态码

    OK:状态码描述

    • 响应状态码: 

      状态码说明
      200一切都 OK,与服务器连接成功,发送请求成功
      302/307请求重定向(客户端行为,两次请求,地址栏发生改变)
      304请求资源未改变,使用缓存
      400客户端错误,请求错误,最常见的就是请求参数有问题
      403客户端错误,但 forbidden 权限不够,拒绝处理
      404客户端错误,请求资源未找到
      500服务器错误,服务器运行内部错误

    转移:

    • 301 redirect:301 代表永久性转移 (Permanently Moved)
    • 302 redirect:302 代表暂时性转移 (Temporarily Moved )
  • 响应头:以 key:vaue 存在,可能多个 value 情况

    消息头说明
    Location请求重定向的地址,常与 302,307 配合使用。
    Server服务器相关信息
    Content-Type告知客户浏览器,响应正文的MIME类型
    Content-Length告知客户浏览器,响应正文的长度
    Content-Encoding告知客户浏览器,响应正文使用的压缩编码格式,常用的 gzip 压缩
    Content-Language告知客户浏览器,响应正文的语言,zh_CN 或 en_US 等
    Content-Disposition告知客户浏览器,以下载的方式打开响应正文
    Refresh客户端的刷新频率,单位是秒
    Last-Modified服务器资源的最后修改时间
    Set-Cookie服务器端发送的 Cookie,会话管理相关
    Expires:-1服务器资源到客户浏览器后的缓存时间
    Catch-Control: no-catch不要缓存,//针对http协议1.1版本
    Pragma:no-catch不要缓存,//针对http协议1.0版本
  • 响应体:页面展示内容, 类似网页的源码

    <html>
        <head>
            <link rel="stylesheet" href="css.css" type="text/css">
            <script type="text/javascript" src="demo.js"></script>
        </head>
        <body>
            <img src="1.jpg" />
        </body>
    </html>