前端视角看网络

 1. HTTP工作原理

1. 首先客户端和服务端先**建立连接(TCP三次握手)**

2. 发送HTTP请求

3. 服务器接受请求并返回HTTP响应

4. 客户端收到响应后**断开连接(TCP四次挥手)**

5. 客户端浏览器解析HTML内容

  6.4 HTTP三次握手

2.三次握手

- 第一次握手：客户端向服务端发出连接请求，将标志位SYN置为1，随机产生一个值seq=J；客户端进入SYN_SENT状态，等待服务器端确认

- 第二次握手：服务端响应客户端，并要求确认，将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K；服务器端进入SYN_RCVD状态

- 第三次握手：客户端校验(ackJ+1 && ACK1)，校验通过将标志位ACK置为1，ack=K+1响应服务端；服务端收到后校验(ackK+1 && ACK1)，校验通过连接建立成功；客户端、服务端进入ESTABLISHED状态，完成三次握手

 

2.1为什么要三次握手

客户端：C，服务端：S

第一次：C向S请求，此时C什么都不知道，S知道C发送正常，自己接收正常

第二次：S向C响应，此时C知道自己和S收/发正常，S知道C发送正常，自己接收正常

第三次：C向S响应，此时C知道自己和S收/发正常，S知道自己和C收/发正常

###    6.5 HTTP四次挥手

3.四次挥手

- 第一次挥手：客户端向服务端发出断开请求，将标志位FIN置为M；客户端进入FIN_WAIT_1状态

- 第二次挥手：服务端响应客户端，发送ack=M+1；客户端进入FIN_WAIT_2状态

- 第三次挥手：服务端向客户端发送请求，将标志位FIN置为N；服务端进入LAST_ACK状态

- 第四次挥手：客户端响应服务端，发送ack=N+1; 客户端进入TIME_WAIT状态，等待2MSL后没后收到回复证明服务端已关闭连接，此时客户端就关闭连接完成四次挥手

 

3.1为什么四次挥手

  客户端：C，服务端：S

  第一次：C向S请求，C不再发送数据了，但是还能接收

  第二次：S向C响应，S确认收到请求，但是还有数据要发送

  第三次：S向C请求，S数据发完了，可以关闭了

  第四次：C向S响应，C确认收到请求，等待超时关闭；S收到响应后立即关闭

4.跨域

4.1 浏览器同源政策

​   “同源”：协议相同、域名相同、端口相同。

​   1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

举例来说，`http://www.example.com/dir/page.html`这个网址，协议是`http://`，域名是`www.example.com`，端口是`80`（默认端口可以省略）。它的同源情况如下。

| http://www.example.com/dir2/other.html   | 同源               |

| ---------------------------------------- | ------------------ |

| http://example.com/dir/other.html        | 不同源（域名不同） |

| http://v2.www.example.com/dir/other.html | 不同源（域名不同） |

| http://www.example.com:81/dir/other.html | 不同源（端口不同） |

目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制：随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：

          (1)Cookie、LocalStorage 和 IndexDB 无法读取。

          (2)DOM 无法获得。

          (3)AJAX 请求不能发送。

**凡事都有利有弊，尽管限制是有必要的，但在有些情况下合理的用途也会因“同源政策”而受到影响。因此我们将要为大家介绍的一些规避上述限制的手段，就是【跨域】的由来。**

4.2 Ajax跨域

​       Ajax跨域指的是将Ajax请求进行跨域处理，而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址，否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段，

​       ①设置服务端响应头

​       ②代理

​       ③JSONP

 4.3 JSONP跨域（get）

​       JSONP是服务器与客户端跨源通信的最常用方法。最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。

​       **本质：实际上利用了script标签引入js文件，并解析执行的原理。**

​       使用方法：

①、在html中插入script标签，并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串，模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

**优点：**

​           (1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。

​           (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，因此只要在页面中声明了回调函数就会自动被调用。

​           (3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，因此在回调函数中也避免了使用JSON.parse的步骤。

 为什么JSONP不是真正的AJAX（面试点）

​       JSONP是通过Script中的SRC属性携带参数传递数据，跟XMLHttpRequest对象没有任何关系。

**实质不同**：

​       **ajax的核心是通过xmlHttpRequest获取非本页内容**

​       **jsonp的核心是动态添加script标签调用服务器提供的js脚本**

​       **jsonp只支持get请求，ajax支持get和post请求**

AJAX优缺点（面试点）

 优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。 

2.使用异步的方式与服务器通信，不需要中断操作。 

3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。 

4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。 

在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。 

2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。 

3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。