前端知识体系8.前后端通讯

本文目录： 1.HTTPS和HTTP的区别 2.http1.0、1.1、2.0、3.0的区别？ 3.你了解哪些请求方法，分别有哪些作用和不同 4.什么是CA证书？整个网站进行验证的流程是什么？ 5.SOCKET？UDP？DNS？FTP？以及不常用的其他协议？ 6.HTTP协议常见的状态码 7.说一下AJAX和AXIOS的区别 8.URL从输入到输出的过程 9.前后端联调之Form Data与Request Payload 10.post请求的form-data和x-www-form-urlencoded和raw和binary了解多少，在使用axios发请求的时候怎么对这些进行处理 11.说下HTTP常见的请求头和响应头 12.怎么与服务端保持连接 13.http请求跨域问题及解决方法，JSONP和ajax有什么区别 14.说下HTTP的报文结构 1.HTTPS和HTTP的区别 HTTPS和HTTP的区别主要如下： 1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。 2.http1.0、1.1、2.0、3.0的区别？ http 1.0 短连接，每个资源文件都需要一次tcp三次握手和四次挥手，耗费网络资源 线头阻塞，请求队列的第一个请求因为服务器正忙（或请求格式问题等其他原因），导致后面的请求被阻塞。 http 1.1 长连接，keep-alive，一次流程即可 使用多个TCP链接，客户端可以并行发送最多 N个请求，服务器可以并行处理最多 N个请求 增了许多动词方法：PUT、PATCH、HEAD、 OPTIONS、DELETE 扩充了请求头和响应头的一些功能，比如请求头信息新增了Host字段，用来指定服务器的域名 http 2.0 长连接+IO多路复用模型 Header压缩，在HTTP1.0中，我们使用文本的形式传输header，在header中携带cookie的话，每次都需要重复传输几百到几千的字节，这着实是一笔不小的开销。在HTTP2.0中，我们使用了HPACK（HTTP2头部压缩算法）压缩格式对传输的header进行编码，减少了header的大小。并在两端维护了索引表，用于记录出现过的header，后面在传输过程中就可以传输已经记录过的header的键名，对端收到数据后就可以通过键名找到对应的值。 http 3.0 谷歌开发的QUIC协议，利用UDP实现可靠数据传输。 3.你了解哪些请求方法，分别有哪些作用和不同 HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式，具体介绍如下： OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。 HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。 GET：向特定的资源发出请求。 POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。 PUT：向指定资源位置上传其最新内容。 DELETE：请求服务器删除 Request-URI 所标识的资源。 TRACE：回显服务器收到的请求，主要用于测试或诊断。 CONNECT：HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 虽然 HTTP 的请求方式有 8 种，但是我们在实际应用中常用的也就是 get 和 post，其他请求方式也都可以通过这两种方式间接的来实现。 4.什么是CA证书？整个网站进行验证的流程是什么？ CA证书就是电子商务认证授权机构，也称为电子商务认证中心，是负责发放和复管理数字证书的权威机构，并作为电子商务交易中受信任的第三方，承担公钥体系中公钥的合法性检验的责任制。 HTTPS的整体过程分为证书验证和数据传输阶段，具体的交互过程如下： ① 证书验证阶段 1.浏览器发起 HTTPS 请求 2.服务端返回 HTTPS 证书 3.客户端验证证书是否合法，如果不合法则提示告警 ② 数据传输阶段 1.当证书验证合法后，在本地生成随机数 2.通过公钥加密随机数，并把加密后的随机数传输到服务端 3.服务端通过私钥对随机数进行解密 4.服务端通过客户端传入的随机数构造对称加密算法，对返回结果内容进行加密后传输 5.SOCKET？UDP？DNS？FTP？以及不常用的其他协议？ SOCKET 套接字（socket）是通信的基石，是支持TCP/IP协议的网络通信的基本操作单元。它是网络通信过程中端点的抽象表示，包含进行网络通信必须的五种信息：连接使用的协议，本地主机的IP地址，本地进程的协议端口，远地主机的IP地址，远地进程的协议端口。 SOCKET连接与TCP连接 Socket是对TCP/IP协议的封装，Socket本身并不是协议，而是一个调用接口（API），通过Socket，我们才能使用TCP/IP协议。 创建Socket连接时，可以指定使用的传输层协议，Socket可以支持不同的传输层协议（TCP或UDP），当使用TCP协议进行连接时，该Socket连接就是一个TCP连接。 HTTP和TCP TCP是底层通讯协议，定义的是数据传输和连接方式的规范 HTTP是应用层协议，定义的是传输数据的内容的规范 HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP也就一定支持TCP TCP/IP协议 TCP/IP协议是一个协议簇。里面包括很多协议的，UDP只是其中的一个， 之所以命名为TCP/IP协议，因为TCP、IP协议是两个很重要的协议，就用他俩命名了。 TCP和UDP 都属于是网络数据的传输协议，UDP建立连接需要三次握手，断开连接需要四次挥手，安全可靠性更强，但是传输效率相对UDP低，UDP发送数据之前不需要建立连接。TCP连接只能是点到点、一对一的，而UDP支持一对一，一对多，多对一和多对多的交互通信，对实时性要求高的情景如视频通话等适用于UDP协议。 DNS 域名系统（服务）协议（DNS）是一种分布式网络目录服务，主要用于域名与 IP 地址的相互转换，以及控制因特网的电子邮件的发送。 FTP FTP（文件道传输） FTP就是文件传输协议,通过FTP，用户可以从Internet网上的一台内机器向另一台机器复制文件，可以用这种方式获取大量的文档，数据和其他的信息。 6.HTTP协议常见的状态码 1xx: 表示目前是协议处理的中间状态，还需要后续操作。 2xx: 表示成功状态。 3xx: 重定向状态，资源位置发生变动，需要重新请求。 4xx: 请求报文有误。 5xx: 服务器端发生错误。 具体常见的一些状态吗 200-请求成功 301-永久重定向 302和307-临时重定向 400-当前请求不能被服务器理解或请求参数有误 401-请求需要认证或认证失败 403-服务器禁止访问 404-资源未找到 405-方法未允许 500-内部服务器错误 502-网关错误 503-服务器处于超负载或停机维护 7.说一下AJAX和AXIOS的区别 AJAX AJAX最初作用就是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。 本身是为了针对MVC编程而诞生的。 AJAX是异步的JavaScript 和 XML（标准通用标记语言的子集）。 AXIOS AXIOS是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。 8.URL从输入到输出的过程 构建请求 构建请求行，请求行包括请求方法、请求http版本等 查找强缓存 检查强缓存，命中则直接使用，否则检查协商缓存 DNS解析 浏览器首先会查看本地硬盘的hosts文件，看看有没有域名对应的规则，如果有的话直接使用hosts文件里对应的ip地址，如果没有则会发出DNS请求域名与IP地址映射 4.建立tcp连接 chrome限制同一域名下最多6个tcp连接 通过三次握手建立连接 三次握手过程: 1.客户端向服务器发送连接请求，传递一个数据包syn，此时客户端处于SYN_SEND状态 2.服务器接收syn报文后，会以自己的syn报文作为应答，传递数据包syn+ack,此时服务器处于SYN-REVD状态 3.客户端接收syn报文后，发送一个数据包ack，此时客户端处于ESTABLISHED状态，双方已建立连接 进行数据传输 通过四次挥手断开连接 四次挥手过程: 客户端发送一个FIN报文，报文中指定一个序列号，此时客户端处于FIN_WAIT1状态，等待服务器确认 服务器接收到FIN后，会发送ACK确认报文，表明已经收到客户端报文，此时服务端处于CLOSE_WAIT2状态 服务器发送FIN，告诉客户端想断开连接，此时服务端处于LAST_CHECK阶段 客户端收到FIN后，一样发送一个ACK作为应答，此时客户端处于TIME_WAIT阶段。需要过一段时间确认服务端收到自己的ACK报文 后才会进入CLOSED状态 5.发送http请求 6.网络响应 7.浏览器解析和渲染 分为构建dom树、样式计算、生成布局树。 8.生成布局 触发回流和重绘 9.前后端联调之Form Data与Request Payload Request Payload更准确的说是http request的payload body。一般用在数据通过POST请求或者PUT请求。它是HTTP请求中空行的后面那部分。（PS:这里涉及一个http常被问到的问题，http请求由哪几部分组成，一般是请求行，请求头，空行，请求体。payload body应该是对应请求体。） 如果你正常请求一个ajax。浏览器会简单的将你提交的内容作为payload展示出来，这就是它所能做的，因为它不知道数据来自哪里。 如果你提交了一个html表单并且配置上了method="post"，并且设置了Content-Type: application/x-www-form-urlencoded或者Content-Type: multipart/form-data。那么你的请求可能长这个样： POST /some-path HTTP/1.1 Content-Type: application/x-www-form-urlencoded foo=bar&name=John 这里的form-data就是request payload。在这里，浏览器知道更多：它知道bar是提交表单的输入字段foo的值。这就是它向你展示的。 所以区别就是，他们只是因为Content-Type设置的不同，并不是数据提交方式的不同，这两种提交都会将数据放在message-body中。但是chrome浏览器的开发者工具会根据这个ContentType区分显示方式。 Content-Type的差异 1.传统的ajax请求时候，Content-Type默认为"文本"类型。 2.传统的form提交的时候，Content-Type默认为"Form"类型。 3.axios传递字符串的时候，Content-Type默认为"Form"类型。 4.axios传递对象的时候，Content-Type默认为"JSON"类型 无论何种形式传递，后端解析表单信息的时候，会考虑Content-Type。如果是JSON字符串的话，后端解析payload的内容时候，肯定要去解析JSON啦。如果是key1=value1&key2=value2的形式，则需要去分割字符串。 当然这些事情一般后端使用的框架会去处理，但是框架给后端提供取值接口有可能是不同的，所以前端的小伙伴在处理请求问题时，一定要跟后端小伙伴商量好，是用JSON还是FormData。 10.post请求的form-data和x-www-form-urlencoded和raw和binary了解多少，在使用axios发请求的时候怎么对这些进行处理 **1.form-data: ** multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。 2.x-www-form-urlencoded： 就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=java&age = 23 3.raw 可以上传任意格式的文本，可以上传text、json、xml、html等 4.binary 相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。 修改axios请求的头部 首先需要明确一点，当使用axios发送对象数据的时候，axios默认的请求头content-type类型。如果前后端的content-type设置不一样，会导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。 axios修改content-type可以选择引用axios自带的qs import axios from 'axios' import qs from 'querystring' //如果想传过去的参数是字符串就是这用形式 axios.post(url, qs.stringify(params), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, }).then(res => res.data) //如果想传过去的参数是对象就是这用形式 axios.post(url, qs.parse(qs.stringify(params)), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, 11.说下HTTP常见的请求头和响应头 HTTP Request Header 请求头 Date：请求发送的日期和时间。 Cache-Control：告诉所有的缓存机制是否可以缓存及哪种类型。 Connection：表示是否需要持久连接。（HTTP 1.1默认进行持久连接） Content-Type：请求的与实体对应的MIME信息。 HTTP Responses Header 响应头 Date：请求发送的日期和时间。 Cache-Control：告诉所有的缓存机制是否可以缓存及哪种类型。 Connection：表示是否需要持久连接。（HTTP 1.1默认进行持久连接） Expires：响应过期的日期和时间。 12.怎么与服务端保持连接 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。 而HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 建立websocket 实现效果：点击按钮建立连接，页面关闭时关闭连接。 谨记：在生命周期结束的时候关闭websocket连接，除非业务需要可以不关，不然很耗内存。 destroyed() { // 页面销毁关闭连接 this.webSocket.close() }, axios 轮询 实现效果：点击按钮，建立轮询，3秒之后判断状态，成功就关闭，失败就继续发送请求。 注意：清除定时器的代码不能写在beforeDestory（）{}中，因为路由跳转，不会触发beforeDestory 13.http请求跨域问题及解决方法，JSONP和ajax有什么区别 详细内容见文集《前后端通讯》=>《详解跨域》 ajax是一种发送http请求与后台进行异步通讯的技术。其原理是实例化xmlhttp对象，使用此对象与后台通信。 一个完整的AJAX请求一般包括以下步骤： （1）实例化XMLHttpRequest对象 （2）连接服务器 （3）发送请求 （4）接收响应数据 jsonp是一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。其原理是利用script标签可以跨域链接资源的特性。 JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。 JSONP的请求过程如下： 请求阶段：浏览器创建一个 script 标签，并给其src 赋值。 发送请求：当给script的src赋值时，浏览器就会发起一个请求。 数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。 最后：jsonp只支持get请求，ajax支持get和post请求。 另外，相对于CORS，JSONP的优势在于不存在兼容性，支持几乎所有的老浏览器。 14.说下HTTP的报文结构 对于 TCP 而言，在传输的时候分为两个部分:TCP头和数据部分。 而 HTTP 类似，也是header + body的结构，具体而言: 起始行 + 头部 + 空行 + 实体 由于 http 请求报文和响应报文是有一定区别，因此我们分开介绍。 起始行 对于请求报文来说，起始行类似下面这样: GET /home HTTP/1.1 也就是方法 + 路径 + http版本。 对于响应报文来说，起始行一般张这个样: HTTP/1.1 200 OK 响应报文的起始行也叫做状态行。由http版本、状态码和原因三部分组成。 值得注意的是，在起始行中，每两个部分之间用空格隔开，最后一个部分后面应该接一个换行，严格遵循ABNF语法规范。 头部 不管是请求头还是响应头，其中的字段是相当多的，而且牵扯到http非常多的特性，这里就不一一列举的，重点看看这些头部字段的格式： 1.字段名不区分大小写 2.字段名不允许出现空格，不可以出现下划线_ 3.字段名后面必须紧接着: 空行 很重要，用来区分开头部和实体。 问: 如果说在头部中间故意加一个空行会怎么样？ 那么空行后的内容全部被视为实体。 实体 就是具体的数据了，也就是body部分。请求报文对应请求体, 响应报文对应响应体。

本文章由javascript技术分享原创和收集