客户端和服务端通信

AJAX 和 XMLHttpRequest

XMLHttpRequest（xhr）是一个javascript的类。
将HTTP请求从Web 浏览器异步传输到Web 服务器的方法。
xhr的api

new XMLHttpRequest();
xhr.open
xhr.send
xhr.onreadystatechange
xhr.status
xhr.readyState
xhr.responseText

    // 获取xhr对象
    const xhr = new XMLHttpRequest();
    // 建立连接，
    xhr.open("GET", "http://www.baidu.com"); // post
    // 发送请求
    xhr.send();
    // 获取数据
    xhr.onreadystatechange = ()=>{
      if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr.responseText);
      }
    }

AJAX可以看作是对xhr对一层封装，直接调用$.get,$.post,$.ajax就能完成上面的请求

TCP UDP IP HTTP

IP是网络层协议
TCP、UDP是传输层协议，主要解决如何在网络中传输

TCP
面向连接、传输可靠（保证数据正确性）、有序（保证数据顺序）、传输大量数据（流模式）、速度慢、对系统资源的要求多，程序结构较复杂，每一条TCP连接只能是点到点的，TCP首部开销20字节。

UDP
面向非连接 、传输不可靠（可能丢包）、无序、传输少量数据（数据报模式）、速度快，对系统资源的要求少，程序结构较简单 ，UDP支持一对一，一对多，多对一和多对多的交互通信，UDP的首部开销小，只有8个字节。

HTTP是应用层的协议，是基于TCP连接的，主要解决如何包装数据

HTTP说短链接，是客户端向服务器发送一次请求后，服务器返回数据后便会断开链接。而且只能说客户端向服务器请求，他们之间不能通信。并且一个request对应一个response。在http1.1中加入了一个connect：keep-alive。可以合并多个http请求，不会再断开，但是还是有http固定的属性就是一个request对应一个response。并且所有的response都是被动的，不能主动发给客户端。
http支持的方法：get post delete put（更新）

socket， webSocket

socket是套接字，是UDP、TCP的api，它不是协议。
socket是长连接，可以维持很久。服务器和浏览器之间可以互相通信

webSocket，是一种在单个 TCP 连接上进行全双工通信的协议，websocket握手协议有两个属性：connect：upgrade。upgrade：websocket。一般情况下我们使用 HTTP 有一个很大的缺陷，就是 HTTP 只能由客户端来主动发起，如果有需要服务端主动通知的业务，就需要轮训。轮询的效率低，非常浪费资源。为了解决 Web 端即时通讯的需求就出现了 WebSocket。

轮询指的是，客户端定时的给服务器发送请求，询问数据是否发生变化。轮询的效率低，非常浪费资源，因为要不停的连接或者http始终保持连接状态

响应头：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

1. websocket对象

var ws = new webSocket(请求地址)
请求地址：ws：//ip地址：端口号/资源名称

2. websocket事件

open: websocket对象.onopen 连接建立时触发
message：websocket对象.onmessage 客户端接收服务端数据时触发
error： websocket对象.onerror 通讯发生错误时触发
close： websocket对象.onclose 连接关闭时触发

3. websocket方法
   websocket发送数据时候用send()

怎么抓取https加密后的内容

可以使用charles。charles可以通过伪造ca证书来冒充一个服务器。

客户端发送请求时候像这个charles发送请求 ，然后charles根据客户端的请求然后向真实的服务器发送请求，真实的服务器就会返回数据给charles 这样charles就拿到了真实的数据了。

http和https的区别

http是超文本传输协议，数据传输的时候是明文传输，端口是80
https是在http+ssl协议构建的安全传输协议 端口是443

http的缓存机制

强缓存和协商缓存
如果是强缓存，浏览器就不会像服务器发送请求，直接从缓存中读取数据，并返回status code 200

强缓存：
expires 过期时间，如果在未过期的时间内就会直接读取缓存中的数据，不在请求
cache-control： max-age 用来设置资源可以被缓存多长时间，单位是秒 
（http1.1时候  expires 会被cache-control给覆盖）

如果是协商缓存，服务器就会根据这次的请求的请求头中的数据来判断是否命中协商缓存，如果命中了就会返回304 并带上新的响应头通知浏览器从缓存中读取资源。

协商缓存
Last-Modifed/If-Modified-Since和Etag/If-None-Match
Etag/If-None-Match：etag是资源的唯一标志，由服务器生成反馈给前端的。 当资源过期时候【浏览器会判断cache-control表示的max-age是否过期或者expires】，浏览器会向服务器发起请求带上请求头if-none-match ，对应的值是etag的值，服务器收到这个请求就会进行对比并且返回200或者304

Last-Modifed/If-Modified-Since：
Last-Modified：
资源最后的修改时间

If-Modified-Since：
当资源过期的时候，向服务器发送请求并带上if-modified-since ，服务器会根据请求的时间和资源最后修改的时间，然后判断是否要返回数据或者是直接使用缓存中的数据 状态码是304或者200