【JS】Day29

学习内容

• 了解HTTP
• 建立链接的三次握手
• 请求报文
• 响应报文
• 断开链接的四次挥手
• 常见HTTP响应状态码
• 常见HTTP请求方式
• 了解cookie的操作
• cookie的封装 (HTML)
• 跨域

了解HTTP

//http是我们前后台交互的时候的传输协议（即超文本传输协议）
 
//http的工作流程：
  //1. 和服务器建立链接；
  //2. 建立链接后，发送一个请求给服务器（请求）；
  //3. 服务器接受到请求以后进行相应的处理并给出一个回应（响应）；
  //4. 断开于服务器的链接。
 
//和服务器建立链接：
  //怎么和服务器建立链接呢？
  //需要保证客户端的接受和发送正常，服务器端的接受和发送正常；
  //这里就涉及到一个东西叫做 TCP/IP 协议；
  //建立链接的主要步骤叫做 三次握手。

建立链接的三次握手

//三次握手：
  //1. 我给对方发了一个消息，对方如果收到消息，知道两件事，我发送消息正常，对方接收正常。
  //2. 对方回应一个消息，我如果收到消息，知道了四件事，① 我发送正常；② 对方接收正常；③ 对方发送正常；④ 我接收正常。
  //3. 我再发送一个消息，如果对方收到，知道 ① 对方发送正常；② 我接收正常。
 
//1. 客户端发送一个消息给到服务端
  //此时：
    //服务端知道了 客户端可以正常发送消息
    //服务端知道了 服务端可以正常接受消息
//2. 服务端回给客户端一个消息
  //此时：
    //服务端知道了 客户端可以正常发送消息
    //服务端知道了 服务端可以正常接受消息
    //客户端知道了 客户端可以正常发送消息
    //客户端知道了 客户端可以正常接受消息
    //客户端知道了 服务端可以正常接受消息
    //客户端知道了 服务端可以正常发送消息
//3. 客户端再回给服务端一个消息
  //此时：
    //服务端知道了 客户端可以正常发送消息
    //服务端知道了 服务端可以正常接受消息
    //客户端知道了 客户端可以正常发送消息
    //客户端知道了 客户端可以正常接受消息
    //客户端知道了 服务端可以正常接受消息
    //客户端知道了 服务端可以正常发送消息
    //服务端知道了 服务端可以正常发送消息
    //服务端知道了 客户端可以正常接受消息
//至此，依照 TCP/IP 协议的建立链接就建立好了
//双方都知道双方可以正常收发消息
//就可以进入到第二步，通讯了

请求报文

//发送一个请求：
//建立完链接以后就是发送请求的过程；
//我们的每一个请求都要把我们的所有信息都包含请求；
//每一个请求都会有一个 请求报文；
//在 请求报文 中会包含我们所有的请求信息（也就是我们要和服务端说的话都在里面）。
 
//请求报文：
//1. 请求行：请求方式  请求地址  请求的协议（协议版本）；
//2. 请求头：客户端浏览器的信息  客户端希望得到的数据格式  客户端  传递数据的格式  客户端的地址；
//3. 请求空行：//；
//4. 请求体：携带的是post请求的参数。
 
//请求行
  //POST /user HTTP/1.1
    // POST 请求方式
    // /user 请求URL（不包含域名）
    // HTTP/1.1 请求协议版本
//请求头（请求头都是键值对的形式出现的）
  // user-agent: Mozilla/5.0 // 产生请求的浏览器信息
  // accept: application/json // 表示客户端希望接受的数据类型
  // Content-Type: application/x-www-form-urlencoded // 客户端发送的实体数据格式
  // Host: 127.0.0.1 // 请求的主机名（IP）
//请求空行（请求头和请求主体之间要留一个空白行）
  // //就是一个空行
//请求体（本次请求携带的数据）
  // GET 请求是没有请求体数据的
  // POST 请求才有请求体数据

响应报文

//接受一个响应：
  //客户端的请求发送到服务端以后
  //服务端进行对应的处理
  //会给我们返回一个响应
  //每一个响应都会有一个 响应报文
  //在 响应报文 中会包含我们所有的响应信息（也就是服务端在接受到客户端请求以后，给我们的回信）
 
//响应报文：
//1. 状态行  协议（版本）  响应状态码  状态码的解释
//2. 响应头  响应时间  响应服务器类型  响应的数据格式  响应的数据长度
//3. 响应体  响应的内容
 
//状态
  // HTTP/1.1 200 OK
    // HTTP/1.1 服务器使用的 HTTP 协议版本
    // 200 响应状态码
    // OK 对响应状态码的简单解释
//响应头
  // Date: Jan, 14 Aug 2019 12:42:30 GMT // 服务器时间
  // Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45 // 服务器类型    Content-Type: text/html // 服务端给客户端的数据类型
  // Content-Length: 11 // 服务端给客户端的数据长度
//响应体
  // hello world // 服务端给客户端的响应数据

断开链接的四次挥手

//之前我们的建立链接是基于 TCP/IP 协议的 三次握手。
//我们的断开链接是基于 TCP/IP 协议的 四次挥手：
  //1. 客户端发送一个我要断开的消息给服务端；
  //2. 服务端接受到以后发送一个消息告诉客户端我已经进入关闭等待状态；
  //3. 服务端再次发送一个消息告诉客户端，这个是我的最后一次消息给你，当我再接受到消息的时候就会关闭；
  //4. 客户端接受到服务端的消息以后，告诉服务器，我已经关闭，这个是给你的最后一个消息。

常见HTTP响应状态码

//通常会出现五种状态码
  //1. 100 ~ 199
  //2. 200 ~ 299
  //3. 300 ~ 399
  //4. 400 ~ 499
  //5. 500 ~ 599
 
//100 ~ 199
//一般我们看不到，因为表示请求继续
  //100：继续请求，前面的一部分内容服务端已经接受到了，正在等待后续内容
  //101：请求者已经准备切换协议，服务器页表示同意
 
//200 ~ 299
//2 开头的都是表示成功，本次请求成功了，只不过不一样的状态码有不一样的含义（语义化）
  //200：标准请求成功（一般表示服务端提供的是网页）
  //201：创建成功（一般是注册的时候，表示新用户信息已经添加到数据库）
  //203：表示服务器已经成功处理了请求，但是返回的信息可能来自另一源
  //204：服务端已经成功处理了请求，但是没有任何数据返回
 
//300 ~ 399
//3 开头也是成功的一种，但是一般表示重定向
  //301：永久重定向
  //302：临时重定向
  //304：使用的是缓存的数据
  //305：使用代理
 
//400 ~ 499
//4 开头表示客户端出现错误了
  //400：请求的语法服务端不认识
  //401：未授权（你要登录的网站需要授权登录）
  //403：服务器拒绝了你的请求
  //404：服务器找不到你请求的 URL
  //407：你的代理没有授权
  //408：请求超时
  //410：你请求的数据已经被服务端永久删除
 
//500 ~ 599
//5 开头的表示服务端出现了错误
  //500：服务器内部错误
  //503：服务器当前不可用（过载或者维护）
  //505：请求的协议服务器不支持

常见HTTP请求方式

//1. GET：一般用于获取一些信息使用（获取列表）
//2. POST：一般用于发送一些数据给服务端（登录）
//3. PUT：一般用于发送一些数据给服务当让其添加新数据（注册）
//4. DELETE：一般用域删除某些数据
//5. HEAD：类似于 GET 的请求，只不过一般没有响应的具体内容，用于获取报文头
//6. CONNECT：HTTP/1.1 中预留的方式，一般用于管道链接改变为代理的时候使用
//7. PATCH：是和 PUT 方式类似的一个方式，一般用于更新局部数据
//8. OPTIONS：允许客户端查看服务端性能
//我们比较常用的就是 GET 和 POST

了解cookie的操作

//1. cookie是存储在客户端浏览器中的一段文本信息；
//2. 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端；
//3. 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端。
 
//cookie的特点：
  //1. 存储大小有限制，一般是 4 KB 左右；
  //2. 数量有限制，一般是 50 条左右；
  //3. 有时效性，也就是有过期时间，一般是 会话级别（也就是浏览器关闭就过期了）；
  //4. 有域名限制，也就是说谁设置的谁才能读取；
  //5. 存在风险。
 
//cookie的创建：
  //document.cookie = 'key=value;expires=日期对象;path=路径;domain=域名;secure'
 
//1. 浏览器不识别的编码问题：
  //1. 编码：encodeURIComponent()；
  //2. 解码：decodeURIComponent()。

跨域

//跨域讲解：
  //1. 同源策略： 同协议，同域名（主机名）和同端口。
    //http://www.baidu.com https://www.baidu.com 不同源
    //http://www.baidu.com http://www.qq.com 不同源
    //http://www.baidu.com:80 http://www.baidu.com:8080 不同源
    //http://www.baidu.com/a/b/c http://www.baidu.com/x/y/z 同源
  //2. 面试题：什么时候需要跨域请求？
    //当我们需要访问不同协议或不同主机名或不同端口网站中数据时，需要跨域请求。
  //3. 面试题：ajax是否可以跨域请求？
    //不可以，受浏览器的同源策略限制。
  //4. 跨域请求。
 
//简单列举常见的跨域解决方案：
  //1. jsonp：script标签的src的开放原则，后端返回的是一个函数的调用；
  //2. cors：后端允许来自其他域的前端访问；
  //3. proxy：前端先访问自己的域，再从自己的服务器出发去访问别的服务器从而完成跨域。