前端网络相关小结

手写 XMLHttpRequest 不借助任何库

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          console.log(xhr.responseText);
        }
      }
    };
    xhr.open('GET', 'url', true);
    //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send(null);

当get时，open中的url拼好参数，send中不传参数
当post时，open中的url不带参数，send中传入参数，并且在open后send前设置请求头。

ajax 请求中的两种状态码 

上述代码中有两种状态码，

第一种是 xhr.readyState ，它是浏览器判断请求过程中各个阶段的状态码；

0 - 代理被创建，但尚未调用 open（）

1 - open（）方法已经被调用

2 - send（）方法已经被调用，并且头部和状态已经可以获得

3 - 下载中，responseText 属性已经包含部分数据

4 - 下载操作已完成

第二种是 xhr.status ，它是HTTP 协议中规定的不同结果的返回状态说明。

1xx

信息性状态码，表示接受的请求正在处理

2xx

成功状态码，表示请求正常处理完毕

• 200 OK：表示从客户端发送给服务器的请求被正常处理并返回
• 204 No Content：表示客户端发送给服务端的请求得到了成功处理，但在返回的响应报文中不包含实体的主体部分（没有资源可以返回）
• 206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range 指定范围的实体内容

3xx

重定向状态码，表示需要进行附加操作以完成请求

• 301 Moved Permanently：永久重定向，表示请求的资源被分配了新的URL，之后应使用更改后的URL
• 302 Found：临时重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL

               301和302的区别：前者是永久重定向，后者是临时重定向（之后可能还会更改URL）

• 303 See Other：表示资源被分配了新的URL，应使用GET方法定向获取请求的资源

              302和303的区别：后者明确表示客户端应该采用GET方式获取资源

• 304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、if-Modified-Since、if-None-Match、if-Range、if-Unmodified-Since中任一首部）的请求时，资源已找到，但未符合条件请求。
• 307 Temporary Redirect：临时重定向，与302有着相同的含义，307会遵照浏览器标准不会从POST变成GET（不同浏览器可能出现不同的情况）

4xx

客户端错误状态码，表示服务器无法处理请求

• 400 Bad Request：请求报文中存在语法错误
• 401 Unauthorized：未经许可，需要通过HTTP认证
• 403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
• 404 Not Found：表示服务器上无法找到请求的资源，除此之外也可以是在服务器拒绝请求但是不想给出拒绝原因时使用

5xx

服务器错误状态码，表示服务器处理请求出错

• 500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误
• 503 Server Unavalable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求

http 常用请求方式及其返回状态码

 1、GET

• GET方法是我们平时最常用的一种请求方式，我们在获取资源时会使用，比如获取文章的数据。如果请求成功会返回状态码 200 OK 以及我们请求的资源信息。

2、POST

• POST方式用于创建新的资源，比如发布新的文章，请求成功返回状态码 201 Created 以及返回被创建的资源信息。

3、PUT

• PUT方式用于更新替换资源，比如修改全部文章信息，请求成功返回状态码 200 OK 和返回被修改的资源信息。

4、PATCH

• PATCH方式用于更新资源，和PUT的区别是PATCH只需要更新部分资源数据。请求成功返回状态码 200 OK 和被修改的资源信息。

5、DELETE

• DELETE用于删除资源，成功后返回 204 No Content。

6、HEAD

• HEAD方式用于获取请求资源返回的头信息。

7、OPTIONS

• OPTIONS方法用于获取资源支持的所有HTTP方法。

TCP和UDP的区别

TCP 是面向连接的，可靠传输的，消耗资源多，速度慢，应用场景一般为文件传输、发送 / 接收邮件等。

UDP 是不面向连接的，不可靠传输的，消耗资源少，速度快，应用场景一般为即时通信，如QQ语音。 

TCP三次握手四次挥手

客户端发送带有SYN标志的数据包。一次握手，客户端什么都不能确认，服务端能确认对方的发送能力、自身的接收能力正常。

服务端发送带有SYN/ACK标志的数据包。二次握手，客户端能确认对方的发送、接收能力，自身的发送、接收能力正常，服务端能确认对方的发送能力、自身的接收能力正常。

客户端发送带有ACK标志的数据包。三次握手，客户端能确认对方的发送、接收能力，自身的发送、接收能力正常，服务端能确认对方的发送、接收能力，自身的发送、接收能力正常。

为什么要三次握手？

• 确认双方的发送/接收能力
• 如果两次握手就能建立连接，容易出现建立多余连接的情况，浪费资源。比如由于网络延迟或不通畅，客户端有可能会多次发起（重发）网络请求，直到服务端ACK/SYN响应。如果后来网络通畅了，多余的请求到达服务端，仅有二次握手的话会导致多余的连接产生。而如果有第三次握手，只要最终客户端没有响应服务端就不会再次建立连接，从而避免了上述情况。

为什么要四次挥手？

类比打电话结束时候的场景。

HTTP/1.1和HTTP/1.0的区别

1、HTTP/1.0默认使用短连接，HTTP/1.1默认使用长连接。

使用短连接的情况下，客户端和服务端每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（JS/CSS/图片），每遇到一个资源，浏览器都会重新建立一个HTTP会话。

而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码：

Connection:keep-alive

使用长连接的情况下，当一个网页打开完成后，客户端和服务端之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。keep-alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。

HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。

2、引入了更多的缓存控制策略

比如 Etag。

所以此时，强缓存标识：expires 和 cache-control，协商缓存标识：last-modified 和 Etag。

3、支持请求部分资源

HTTP/1.1 支持在请求头引入 range 头域，它允许只请求资源的某个部分，返回码是206，有利于开发者的自由选择以及充分利用带宽和连接。

4、新增错误状态码

如409/410。

URI和URL的区别

URI（Uniform Resource Identifier）是统一资源标识符，可以唯一标识一个资源。

URL（Uniform Resource Location）是统一资源定位符，可以提供资源的路径。它是一种具体的URI，即URL可以用来标识一个资源，而且还指名了如何locate这个资源。

URI的作用像身份证号一样，URL的作用更像家庭住址一样。

HTTP和HTTPS的区别

 1、端口

HTTP默认端口80，HTTPS默认端口443。

2、安全性和资源消耗

HTTP协议运行在TCP上，明文传输，客户端和服务端都无法验证对方的身份。

HTTPS是运行在SSL/TLS之上的HTTP协议，SSL/TLS运行在TCP之上，所有传输内容都经过加密。

虽然HTTPS安全性更高，但是消耗的资源也更多。

常见设备工作在OSI七层模型的哪一层？

OSI七层模型：

• 应用层（网关）
• 表示层（网关）
• 会话层（网关）
• 传输层（网关）
• 网络层（路由器）
• 数据链路层（网桥、交换机）
• 物理层（网卡、网线、集中器、中继器、调制解调器） 

http请求头常见字段

• Accept 设置接受的内容类型
• Accept-Charset 设置接受的字符编码
• Accept-Encoding 设置接受的编码格式
• Accept-Datetime 设置接受的版本时间
• Accept-Language 设置接受的语言
• Authorization 设置HTTP身份验证的凭证
• Cache-Control 设置响应链上所有的缓存
• Cookie 设置服务端使用Set-Cookie发送的http cookie 
• Content-Type 设置请求体的MIME类型（适用于POST和PUT请求）
• Date 设置消息发送的日期和时间
• If-Match 设置客户端的ETag，当客户端ETag和服务器生成的ETag一致才执行，适用于更新自从上次更新后没有改变的资源
• If-Modified-Since 设置更新时间，从更新时间到服务端接受请求这段时间内如果资源没有改变，允许服务端返回304 Not Modified
• If-None-Match 设置ETag，如果和服务端接受请求生成的ETag相同，允许服务端返回304 Not Modified
• If-Range 设置客户端ETag，如果和服务端接受请求生成的ETag相同，返回缺失的实体部分；否则返回整个新的实体
• If-Unmodified-Since 设置更新时间，只有从更新时间到服务端接受请求这段时间内实体没有改变，服务端才会发送响应
• Origin 标识跨域资源请求（服务端设置Access-Control-Allow-Origin响应字段）

http响应头常见字段 

• Access-Control-Allow-Origin 指定哪些站点可以参与跨站资源共享
• Cache-Control 告诉服务端到客户端所有的缓存机制是否可以缓存这个对象，单位是秒
• Content-Type 设置响应体的MIME类型
• Date 设置消息发送的日期和时间
• ETag 特定版本资源的标识符，通常是消息摘要
• Expires 设置响应体的过期时间
• Last-Modified 设置请求对象最后一次的修改日期
• Server 服务器名称
• Set-Cookie 设置HTTP Cookie
• Status 设置HTTP响应状态

http请求头content-type字段的常见属性 

• application/x-www-form-urlencoded

       浏览器表单提交的默认方式。在最初始的请求方式中，请求参数都是放在url里的，表单提交的时候，都是以key1=value1&key2=value2的方式写在url后面。

• multipart/form-data

       这种方式多用于文件上传，表单数据都保存在http的正文部分。

• application/json 

        告诉服务端消息主体是序列化的json字符串。

• image/jpeg
• text/xml
• text/html

什么是简单请求？

需同时满足以下两个条件：

• 请求方法是以下三种方法之一

       · HEAD

       · GET

       · POST

• HTTP的头信息不超出以下几种字段

       · Accept

       · Accept-Language

       · Content-Language

       · Last-Event-ID

       · Content-Type：只限于三种属性值 application/x-www-form-urlencoded、multipart/form-data、text/plain

什么是复杂请求？

 非简单请求就是复杂请求。

复杂请求在正式请求前都会有预检请求，在浏览器中能看到OPTIONS请求，用于向服务器请求权限信息的。

另外，axios都是复杂请求，ajax可以是简单请求。

nginx反向代理解决跨域问题的原理

因为客户端向服务端发送请求时，会出现跨域问题。而服务端与服务端之间是不存在跨域问题的。

所以其原理就是，以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

这种应该属于直接转发请求。间接转发应该类似于页面重定向，让客户端自动重新进行请求。

具体区别点击此处跳转 ->