网络基础一-HTTP 协议——请求报文:请求方式-GET方式请求没有请求体、POST方式有请求体，请求体就是发送把服务器的数据 和amp; 响应报文-响应状态码 和amp; Ajax请求也要符合http协议

网络基础（一）-HTTP 协议——请求报文之请求方式-GET方式请求没有请求体、POST方式有请求体，请求体就是发送给服务器的数据 & 响应报文-响应状态码 & Ajax请求也要符合http协议

网络基础

1. HTTP 协议

1.1 HTTP 协议概述

• 浏览器向服务器发送数据的格式：

  • 字符串类型，例如： id=111&age=222;
  • FormData类型，例如：var fd = new FormData();

• 浏览器向服务器发送的请求报文

  • 请求行
  • 请求头
  • 请求体

• HTTP(HyperText Transfer Protocol) 超文本传输协议

• HTTP 是一种能够获取如 HTML 这样的网络资源的 protocol (通讯协议)。

• 是一种 client客户端 - server服务器 同时要遵守的协议，就是浏览器和服务器双方 “签订” 的一个协议

• 请求通常是由像浏览器这样的接受方发起的

• HTTP 协议中规定了请求数据和响应数据的格式(报文)

1.2 请求报文

• 请求报文

  • 浏览器在向服务器发送请求的时候，会携带的数据
  • 该数据是特定格式的字符串
  • 可以使用 chrome 监视请求并查看请求报文

• 请求报文格式

请求体–get请求没有请求体

GET方式请求没有请求体、POST方式有请求体，请求体就是发送给服务器的数据

• 请求行

  • 请求方法(常见的 GET 和 POST)

  • 请求路径

  • 协议版本

    GET / HTTP/1.1
    GET /index.html HTTP/1.1
    

• 请求头

  • 浏览器在向服务器发送请求的时候携带了附加信息
  • 由键值对组成
  • 如果需要设置请求头，使用setRequestHeader方法来设置
  • 参考链接

  键	值
  Host	请求的主机
  Cache-Control	控制缓存（例如：max-age=60 缓存 60 秒）
  Accept	客户端想要接收的文档类型，逗号分隔
  User-Agent	标识什么客户端帮你发送的这次请求，可以看出发请求的浏览器是什么浏览器
  Referer	这次请求的来源
  Accept-Encoding	可以接受的压缩编码

• 请求体

  • GET 请求没有请求体
  • POST 请求有请求体，请求体就是发送给服务器的数据

1.3 响应报文

• 响应报文组成

  • 响应行

    • 协议版本

      HTTP/1.1 200 OK
      // 需要注意的是200，它表示状态码
      // 状态码：
      // - 描述了请求过程中所发生的情况
      // - 每个状态码的第一位数字都用于描述状态的一般类别("成功"、"出错"等)
      // - 常见状态码
      //   - 200 - 成功
      //   - 304 - 也可以算是请求成功，只不过服务器上的资源没有变化
      //   - 404 - 请求的资源不存在
      //   - 500 - 服务器内部错误
      // 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
      

  • 响应头

    • 服务器返回响应的时候携带了附加信息
    • 由键值对组成

    键	值
    Date	响应时间
    Server	服务器信息
    Content-Type	响应体的内容类型
    Content-Length	响应的内容大小

  • 响应体

    • 返回的主体内容，如果请求的是网页返回网页的内容，如果请求的是图片返回图片的内容

请求头有Content-Type：application/x-www-form-urlencoded 告诉服务器，发送给你的数据是什么编码的

响应头有Content-Type：text/html; charset=utf-8 服务器告诉浏览器，返回的数据是html。编码是utf-8

小结：

http协议：规定了浏览器发起请求及服务器作出响应的协议

• 请求报文
  • 请求行
    • 包含请求方式、请求url（接口）
  • 请求头
    • Content-Type：告诉服务器，我给你发送的东西是什么格式
    • User-Agent：可以获取到发请求的浏览器是什么浏览器，版本是什么版本
  • 请求体
    • GET请求没有请求体
    • POST请求有请求体，请求体就是发送给服务器的数据
• 响应报文
  • 响应行
    • 响应状态码（200–OK、404–服务器没有这个资源、500–服务器内部错误）
  • 响应头
    • Content-Type：服务器告诉浏览器，给你返回的数据是什么格式
  • 响应体
    • 服务器返回的数据

1.4 Ajax请求遵循 HTTP协议（保留）

Ajax请求也要符合http协议。

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是 HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行
xhr.open('GET', '/time')
// 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')
// 设置请求体
xhr.send(null)

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    // 获取响应状态码
    console.log(this.status)
    // 获取响应状态描述
    console.log(this.statusText)
    // 获取响应头信息
    console.log(this.getResponseHeader('Content-Type')) // 指定响应头
    console.log(this.getAllResponseHeaders()) // 全部响应头
    // 获取响应体
    console.log(this.responseText) // 文本形式
    console.log(this.responseXML) // XML 形式，了解即可不用了
  }
}

参考链接：

• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

这篇好文章是转载于：学新通技术网