Web网络协议相关经典面试题

输入完网址按下回车， 刚看到网页的过程中发生了什么

1. 域名解析
2. 发起TCP的3次握手
3. 建立TCP连接后发起http请求
4. 服务器端响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户

常见的状态码

1. 200（成功） - 服务器成功返回网页
2. 201 （已创建） - 请求成功并且服务器创建了新的资源。
3. 304 （未修改） - 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容
4. 400 （错误请求） - 服务器不理解请求的语法。
5. 401（未授权）- 请求要求身份验证
6. 403（禁止）-服务器拒绝请求
7. 404（未找到） - 请求的网页不存在
8. 500 （服务器内部错误） - 服务器遇到错误，无法完成请求。
9. 503 （服务不可用）- 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

Get/ post

介绍： HTTP的工作方式是客户端与服务器之前的请求-响应；HTTP请求方法有： HEAD , PUT , DELETE , OPTIONS , CONNECT；最常用到的HTTP方法是： GUT和 POST；他们的区别如下：

1. GET
   a) GET请求参数在URL是可见的
   b) GET 请求可以被缓存
   c) GET 请求保留在浏览器历史记录中
   d) GET 请求可以被收藏为书签
   e) GET 请求的参数通过URL传递
   f) GET 请求有长度限制，不能超过4k
2. POST
   a) POST 请求参数在URL是不可见的
   b) POST 请求不会被缓存
   c) POST 请求不会保留在浏览器历史记录中
   d) POST 不能被收藏为书签
   e) POST 请求参数放在request body报文体中
   f) POST 请求对数据长度没有要求

http / https 协议

http是超文本传输协议，被用于在web浏览器和网站服务器之间传递信息，以明文方式发送内容，不提供任何方式的数据加密； 不太安全，故而不适合传输敏感信息。
https协议是基于http协议，并且加入了SSL （Secure Socket Layer,安全套接字层）/ TLS（Transport Layer Security，传输层安全协议）协议， SSL / TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
https协议的主要作用分为两种： 一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性
http 和https 的主要区别：

1. https协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
2. http是超文本传输协议，信息是明文传输；https则是具有安全性的ssl / tls 加密传输协议，安全性较好
3. http 和https 使用的是完全不同的连接方式，用的端口也不一样；前者是80，后者是443；它的工作流程一般是如下方式：
   a) TCP三次同步握手
   b) 客户端验证服务器数字证书
   c) DH 算法协商对称加密算法的密钥、hash 算法的密钥
   d) SSL 安全加密隧道协商完成
   e) 网页以加密的方式传输，用协商的对称加密算法和密钥加密，保证数据机密性；用协商的hash算法进行数据完整性保护，保证数据不被篡改。

Websocket

1. WebSocket是HTML5一种新的协议，WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术，是一种在单个TCP连接上进行全双工通讯协议。
2. WebSocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
3. Websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。
4. Websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去。这样做会有几个好处：
   a) 大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。
   b) 和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。
5. Websocket的使用场景： 社交聊天，弹幕，视频会议，在线教育等；他们都有一个共同点就是： 高实时性~~~

Tcp三次握手

1. 第一次握手：客户端尝试连接服务器，向服务器发送syn包（同步序列编号Synchronize Sequence Numbers）， syn=j，客户端进入SYN_SEND状态等待服务器确认
2. 第二次握手： 服务器接收客户端syn包并确认（ack=j+1），同时向客户端发送一个SYN包（syn=k）， 即SYN+ACK包，此时服务器进入SYN_RECV状态
3. 第三次握手：客户端收到服务器的SYN+ACK包，想服务器发送确认包ACK（ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手

Tcp四次挥手

1. 第一次挥手：客户端向服务器端发送断开TCP连接请求的【FIN,ACK】报文，在报文中随机生成一个序列号SEQ=x，表示要断开TCP连接，
2. 第二次挥手：当服务器端收到客户端发来的断开TCP连接的请求后，回复发送ACK报文，表示已经收到断开请求。回复时，随机生成一个序列号SEQ=y，由于回复的是客户端发来的请求，所以在客户端请求序列号SEQ=x的基础上加1，得到ACK=x+1
3. 第三次挥手：服务器端在回复完客户端的 TCP 断开请求后，不会马上进行 TCP 连接的断开。服务器端会先确认断开前，所有传输到客户端的数据是否已经传输完毕。确认数据传输完毕后才进行断开，向客户端发送 [FIN，ACK] 报文，设置字段值为 1。再次随机生成一个序列号 SEQ=z。由于还是对客户端发来的 TCP 断开请求序列号 SEQ=x 进行回复，因此 ACK 依然为 x+1
4. 第四次挥手：客户端收到服务器发来的 TCP 断开连接数据包后将进行回复，表示收到断开 TCP 连接数据包。向服务器发送 ACK 报文，生成一个序列号 SEQ=x+1。由于回复的是服务器，所以 ACK 字段的值在服务器发来断开 TCP 连接请求序列号 SEQ=z 的基础上加 1，得到 ACK=z+1

跨域

跨域的介绍： Js跨域问题来自同源策略，也就是：同协议（http）+同域名（www.xx.com）+同端口（80）保持一致，js只能访问和操作自己域下的资源。
跨域的解决方式：

1. JsonP跨域（只支持get,不支持post请求），原理：动态生成script标签，通过script标签引入接口地址(因为script标签没有跨域限制)，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
2. cors跨域(一般由后端开启，后台设置允许跨域) ：全称 “跨域资源共享（Cross-origin resource sharing）”，原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制 。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10
3. vue代理服务器proxy跨域：通过请求本地的服务器，然后本地的服务器再去请求远程的服务器(后端部署接口的服务器)，最后本地服务器再将请求回来的数据返回给浏览器(本地服务器和浏览器之前不存在跨域)

Ajax的工作原理

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
Ajax使用步骤如下：

1. 创建XMLHttpRequest对象
   a) open()方法： 有三个参数，第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。语法： xmlHttp.open(‘GET’, ‘index.php’, true)；三个参数的含义分别是：
   请求类型GET/POST , 文件在服务器的位置， 是否异步处理请求true/false
   b) send()方法： 将请求送往服务器。

// 第一步，创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {            // 非IE创建方式
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {     
// 如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") 
}

2. 调用回调函数
3. 设置和服务器交互的相应参数
4. 设置向服务器端发送的数据，启动和服务器端的交互
5. 判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

Ajax的优点如下：

1. 无刷新更新数据：在不刷新整个页面的前提下与服务器通信维护数据
2. 异步与服务器通信：异步通信，不需要打断用户的操作，具有更加迅速的响应能力
3. 前端和后端负载平衡：将以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，从而减轻服务器和带宽的负担，节约空间和宽带租用成本。
4. 基于标准被广泛支持：ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件，但需要客户允许，JavaScript在浏览器上执行。
5. 界面与应用分离： 数据与呈现分离，有利于分工合作，减少非技术人员对页面的修改造成的web应用程序错误，提高效率，也更加适用于现在的发布系统

Ajax的缺点如下：

1. Ajax没有了back和history功能，即对浏览器机制的破坏
   在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2. AJAX的安全问题
   AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
3. 对搜索引擎支持较弱
   对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能
4. 破坏程序的异常处理机制
   像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的
5. 违背URL和资源定位的初衷
   如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的
6. AJAX不能很好支持移动设备
   一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax
7. 客户端过肥，太多客户端代码造成开发上的成本
   编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准

Ajax的适用场景：

1. 表单驱动的交互
2. 深层次的树的导航
3. 快速的用户与用户间的交流响应
4. 类似投票、yes/no等无关痛痒的场景
5. 对数据进行过滤和操纵相关数据的场景
6. 普通的文本输入提示和自动完成的场景

Ajax的不适用场景：

1. 部分简单的表单
2. 搜索
3. 基本的导航
4. 替换大量的文本
5. 对呈现的操纵