Ajax(4)：HTTP理论HTTP 请求报文起始行：请求起始行，响应起始行（看爬虫篇）首部（头）：通用头【Gen

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

HTTP

请求报文

在http请求中传递的数据块就叫做数据报文

起始行：请求起始行，响应起始行（看爬虫篇）

首部（头）：

通用头【General】
请求头【Request Headers】

在这里插入图片描述

响应头【Response Headers】

主体：

请求主体

客户端发送的数据【Request Payload / Form Date】
响应主体

服务器返回的数据

客户端和服务器信息交互

A：问号传参，/aaa/bbb/info?name=xxx&age=xxx，把信息传递服务器

B：设置请求头，把要传递的内容设置到请求头信息中，也可以自定义

C：设置请求主体，xhr.send([AJAX SEND 中传递的内容，就是客户端设置的请求主体内容])

服务器返回给客户端

A：设置响应头，客户端通过响应头获取信息（并且其速度大于响应主体）

B：设置响应主体，主要的信息都在响应主体中

请求方式

所有的请求都能给服务器传递内容，也可以从服务器端获取数据

GET：从服务器端获取数据（主要负责拿）
POST：向服务器推送数据（主要负责给）
DELETE：删除服务端的某些内容（主要来删除文件）
PUT：向服务器存放一些内容（一般时存放文件）
HEAD：只想获取服务器返回的响应头信息，不需要主体中的内容
OPTIONS：一般使用它想服务器发送探测性请求，如果服务器返回信息，那么说明当前服务器和客户端建立了联系，我们可以继续操作（TRACE也是干这个事情的，但是axios这个ajax类库在基于cross domain进行跨域请求的时候，就是先发送OPTIONS请求进行探测尝试，如果能连接服务器，才会发送别的请求）

GET 和 POST 的区别：

【1. 传递给服务器信息的方式不一样】

GET：基于URL地址问好传参的方式把信息传递给服务器（主要是拿，url比较短，可以基于url传参拿数据）

// 基于GET请求，问好传参和服务器交互
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://easy-mock.com/mock/5e7c318905382f7b18e45347/info?id=1&name=xyb'); // 传递参数
console.log(xhr)
xhr.onreadystatechange=() => {
  if(xhr.readyState == 4) {
    if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.log('xhr is unsuccessful ' + xhr.status)
    }
  }
}
xhr.send(null)

在这里插入图片描述

POST：基于请求主体把信息传递给服务器（主要是传，浏览器对url长度会有限制，所以要用请求主体传）

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://easy-mock.com/mock/5e7c318905382f7b18e45347/info');
console.log(xhr)
xhr.onreadystatechange=() => {
  if(xhr.readyState == 4) {
    if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.log('xhr is unsuccessful ' + xhr.status)
    }
  }
}
xhr.send(JSON.stringify({id: 1, name: 'xyb'})) 

// POST参数传递参数：方法1
// POST请求传递参数，必须对请求头进行设置，告诉服务器请求体参数的格式类型，【url数据格式】
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=xyb&age=man') // url数据格式

// POST参数传递参数：方法2
// POST请求传递参数，必须对请求头进行设置，告诉服务器请求体参数的格式类型，【json数据格式】
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
xhr.send(JSON.stringify({id: 1, name: 'xyb'}) // json字符串数据格式

在这里插入图片描述

【2. POST相对比GET安全】

GET请求是基于问好传参的，容易被hack进行URL劫持，发生信息泄露和信息修改

POST是基于请求主体传递的，相对来说不好被劫持

所以，登陆，注册，涉及安全性的操作，我们应该用POST请求
【3. GET请求会产生不可控制的缓存，POST不会】

不可控是浏览器产生的，无法基于JS来控制，真实项目中我们会清除缓存

GET请求产生不可控的缓存原因：连续多次向相同的地址（并且如果传递参数信息是是相同的，低版本的IE会有问题）发送的请求，浏览器会把之前相同请求的数据从缓存中拿取，导致无法获得服务器最新的数据，而POST不会

GET请求产生缓存的解决方法：
```
xhr.open("GET", '/info/list?id=1&name=xxx&_=${Math.random()}') // => 保证每次的GET请求和上一次的不相同，浏览器不会产生缓存，能一直得到服务器的最新数据，使用_不会和别的属性名冲突
```

http状态码

200 请求被实现

=> 1. 服务器响应并信息，但是信息不一定是我们需要的
301 永久转移（永久重定向）

=> 2. 域名更改会用到，访问以前的域名永远跳转到新的域名
302 临时转移

=> 1. （负载均衡），服务器并发数到达上限，把后续请求分配到临时别的服务器上做处理

=> 2. 偶偶真实项目中会把所有图片放到单独服务器"图片处理服务器"，这样减少主服务器的压力，当用户向主服务访问图片时，主服务器会把所有请求转移到图片服务器上

=> 3. 临时从定向，与307唯一的区别就是
- 状态码 307 与 302 之间的唯一区别在于，当发送重定向请求的时候，307 状态码可以确保请求方法和消息主体不会发生变化。当响应状态码为 302 的时候，一些旧有的用户代理会错误地将请求方法转换为 GET：使用非 GET 请求方法而返回 302 状态码，Web 应用的运行状况是不可预测的；而返回 307 状态码时则是可预测的。对于 GET 请求来说，两种情况没有区别。
307 临时重定向

=> 1. 用http协议访问https协议运转的网站，会重定向到https协议上（可以确保请求方法和消息主体不会发生变化，比302更好）
304 设置缓存

=> 1. 对于不经常使用的资源文件，例如 CSS/JS/HTML/IMG等，服务器会结合客户端设置304缓存，第一次加载过这些资源文件就缓存到客户端了，下次再获取的时候，是从缓存中获取；如果资源更新了，服务端会通过最后修改时间来强制让客户端从服务器重新获取；基于Ctrl+F5强制刷新页面，304缓存就没有用了
400 请求参数错误
401 无权限访问
403 服务器拒绝响应（爬虫）
404 找不到文件或者资源不存在
413 和服务器交互的资源超过服务器最大限制
500 未知的服务器错误，服务器的问题
503 服务器超负荷，处理不过来

服务器API

REST API ：restful

（1），发送请求进行 CURUD（增删改查），哪个操作由请求方式决定

（2），同一个请求路径可以进行多个操作

（3），请求方式为 GET|POST|PUT|DELETE
REST API ： restless

（1），请求方式不决定请求的 CURUD（增删改查）操作

（2），一个请求路径只对应一个操作

（3），一般只有GET|POST