在浏览器输入url后怎么处理

小齐睡不够

于 2022-01-18 15:52:13 发布

阅读量599

点赞数

文章标签：前端 ajax跨域问题 url

本文链接：https://blog.csdn.net/m0_64033183/article/details/122558801

版权

浏览器的地址栏输入URL并按下回车：

1.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

2.DNS解析URL对应的IP。

3.根据IP建立TCP连接（三次握手）。

4.HTTP发起请求。

完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

常用的请求头部：

5.服务器处理请求，浏览器接收HTTP响应。

服务器处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

常用的响应头：

6.渲染页面，构建DOM树。

1）浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
2）在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；
3）样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM；
4）完成文档解析后，将DOM和CSSDOM进行关联和映射形成渲染树
5）根据渲染树来布局（重排），计算每个节点的几何信息
6）在屏幕上绘制（重绘）各个节点。

7.关闭TCP连接（四次挥手）。

URL一般包括几大部分：

protocol，协议头，譬如有http，加密的https

host，主机域名或IP地址

port，端口号

path，目录路径

query，即查询参数

fragment，即#后的hash值，一般用来定位到某个位置

同源策略：

浏览器同源策略是一种约定，同源策略是用于隔离潜在恶意文件的重要安全机制。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，当ajax请求地址与当前网页地址不一致的时候，浏览器会禁止ajax向服务器发送的请求。当协议、主机、端口号有一个不同时就是不同源。

跨域：

不同源就是跨域。

解决跨域的方法：

1）JSONP 跨域

script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
function handleResponse(data) {
    console.log(data);
};

// 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
body.appendChild(script);

// 3. 通过 script.src 请求 `http://www.laixiangran.cn/json?callback=handleResponse`，
// 4. 后端能够识别这样的 URL 格式并处理该请求，然后返回 handleResponse({"name": "laixiangran"}) 给浏览器
// 5. 浏览器在接收到 handleResponse({"name": "laixiangran"}) 之后立即执行 ，也就是执行 handleResponse 方法，获得后端返回的数据，这样就完成一次跨域请求了。

缺点：只支持 GET 请求

2）CORS（跨域资源共享）

CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

浏览器将CORS请求分成两类：简单请求和非简单请求。

只要同时满足以下两大条件，就属于简单请求。

1.请求方法是以下三种方法之一：

HEAD

GET

POST

2.HTTP的头信息不超出以下几种字段：

Accept-Language

Content-Language

Last-Event-ID

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

简单请求处理：

1）在请求中需要附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。例如：Origin: http://www.laixiangran.cn

2）如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发 * ）。例如：Access-Control-Allow-Origin：http://www.laixiangran.cn

3）没有这个头部或者有这个头部但源信息不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。注意，请求和响应都不包含 cookie 信息。

4）如果需要包含 cookie 信息，ajax 请求需要设置 xhr 的属性 withCredentials 为 true，服务器需要设置响应头部 Access-Control-Allow-Credentials: true。

非简单请求处理：

1）浏览器在发送真正的请求之前，会先发送一个 Preflight 请求给服务器，这种请求使用 OPTIONS 方法，发送下列头部：

Origin：与简单的请求相同。

Access-Control-Request-Method: 请求自身使用的方法。

Access-Control-Request-Headers: （可选）自定义的头部信息，多个头部以逗号分隔。

2）发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器进行沟通：

Access-Control-Allow-Origin：与简单的请求相同。

Access-Control-Allow-Methods: 允许的方法，多个方法以逗号分隔。

Access-Control-Allow-Headers: 允许的头部，多个方法以逗号分隔。

Access-Control-Max-Age: 应该将这个 Preflight 请求缓存多长时间（以秒表示）。

3）一旦服务器通过 Preflight 请求允许该请求之后，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样了

DNS解析URL对应的IP：

1.本地电脑会检查浏览器缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就结束.
2.如果浏览器缓存中没有数据，浏览器会查找操作系统缓存中是否有这个域名对应的DNS解析结果.
操作系统也有一个域名解析的过程，在Linux中可以通过/etc/hosts文件来设置，
而在windows中可以通过配置C:\Windows\System32\drivers\etc\hosts文件来设置
3.前两个过程无法解析时，要用到网络配置中的"DNS服务器地址",操作系统会把这个域名发送给这个本地DNS服务器
4.如果本地DNS服务器仍然没有命中，就直接到根DNS服务器请求解析
根DNS服务器返回给本地DNS域名服务器一个顶级DNS服务器地址
5.本地DNS服务器再向上一步获得的顶级DNS服务器发送解析请求。
接受请求的顶级DNS服务器查找并返回此域名对应的Name Server域名服务器的地址，这个Name Server服务器就是我要访问的网站域名提供商的服务器
6.Name Server服务器会查询存储的域名和IP的映射关系表，再把查询出来的域名和IP地址等等信息返回给本地DNS服务器。
7.本地DNS服务器会缓存这个域名和IP的对应关系,把解析的结果返回给本地电脑,本地电脑缓存在本地系统缓存中.

TCP三次握手

第一次：
客户端向服务端发送连接请求报文段。该报文段的头部中SYN=1，ACK=0，seq=x。请求发送后，客户端便进入SYN-SENT状态
SYN=1，ACK=0表示该报文段为连接请求报文，x为本次TCP通信的字节流的初始序号。SYN=1的报文段不能有数据部分，但要消耗掉一个序号
第二次：
服务端收到连接请求报文段后，如果同意连接，则会发送一个应答：SYN=1，ACK=1，seq=y，ack=x+1。该应答发送完成后便进入SYN-RCVD状态。
SYN=1，ACK=1表示该报文段为连接同意的应答报文。ack=x+1表示服务端希望下一个数据报发送序号从x+1开始的字节，
seq=y表示服务端作为发送者时，发送字节流的初始序号
第三次：
当客户端收到连接同意的应答后，还要向服务端发送一个确认报文段，表示：服务端发来的连接同意应答已经成功收到。
客户端发完这个报文段后便进入ESTABLISHED状态，服务端收到这个应答后也进入ESTABLISHED状态，此时连接的建立完成

为什么连接建立需要三次握手，而不是两次握手：

防止失效的连接请求报文段被服务端接收，从而产生错误。
失效的连接请求：若客户端向服务端发送的连接请求丢失，客户端等待应答超时后就会再次发送连接请求，此时，上一个连接请求就是『失效的』。

若建立连接只需两次握手，客户端并没有太大的变化，仍然需要获得服务端的应答后才进入ESTABLISHED状态，而服务端在收到连接请求后就进入ESTABLISHED状态。

此时如果网络拥塞，客户端发送的连接请求迟迟到不了服务端，客户端便超时重发请求，
如果服务端正确接收并确认应答，双方便开始通信，通信结束后释放连接。
此时，如果那个失效的连接请求抵达了服务端，由于只有两次握手，服务端收到请求就会进入ESTABLISHED状态，等待发送数据或主动发送数据。
但此时的客户端早已进入CLOSED状态，服务端将会一直等待下去，这样浪费服务端连接资源。

四次挥手

TCP连接是双向的，因此在四次挥手中，前两次挥手用于断开一个方向的连接，后两次挥手用于断开另一方向的连接

第一次挥手：
若A认为数据发送完成，则它需要向B发送连接释放请求。该请求只有报文头，头中携带的主要参数为：FIN=1，seq=u。此时，A将进入FIN-WAIT-1状态。
FIN=1表示该报文段是一个连接释放请求。seq=u，u-1是A向B发送的最后一个字节的序号
第二次：
B收到连接释放请求后，会通知相应的应用程序，告诉它A向B这个方向的连接已经释放。
此时B进入CLOSE-WAIT状态，并向A发送连接释放的应答，其报文头包含：ACK=1，seq=v，ack=u+1。
（ACK=1：除TCP连接请求报文段以外，TCP通信过程中所有数据报的ACK都为1，表示应答
ack=u+1表示希望收到从第u+1个字节开始的报文段，并且已经成功接收了前u个字节
seq=v，v-1是B向A发送的最后一个字节的序号。）
A收到该应答，进入FIN-WAIT-2状态，等待B发送连接释放请求。
第二次挥手完成后，A到B方向的连接已经释放，B不会再接收数据，A也不会再发送数据。但B到A方向的连接仍然存在，B可以继续向A发送数据。

三次：
当B向A发完所有数据后，向A发送连接释放请求，请求头：FIN=1，ACK=1，seq=w，ack=u+1。B便进入LAST-ACK状态。
四次：
A收到释放请求后，向B发送确认应答，此时A进入TIME-WAIT状态。
该状态会持续2MSL时间，若该时间段内没有B的重发请求的话，就进入CLOSED状态，撤销TCB。当B收到确认应答后，也便进入CLOSED状态，撤销TCB。

为什么 A 要先进入TIME-WAIT状态，等待2MSL（MSL他是任何报文在网络上存在的最长时间，超过这个时间报文将被丢弃）时间后才进入CLOSED状态：

为了保证B能收到A的确认应答。若A发完确认应答后直接进入CLOSED状态，那么如果该应答丢失，
B等待超时后就会重新发送连接释放请求，但此时A已经关闭了，不会作出任何响应，因此B永远无法正常关闭。

可以三次挥手吗：

观察四次挥手过程可见三次挥手报文段包含了二次挥手报文段中的确认值，因此三次挥手只能将3和2合并。但这样合并是有问题的。被动关闭方发送报文段2只是确认主动关闭方发来的结束报文段，但并不代表自身的数据已经传输完毕。即就是当断开连接的时候，一个方向的断开，只是说明该方向数据已传输完毕，而另一方向或许还有数据，所以要等到另一个方向数据也全部传输完成后，才能实现三次握手。但是这个时间不确定，因此会造成主动关闭方的结束报文段长时间未得到响应而进行超时重传等等。造成了不必要的资源浪费甚至更意想不到的问题。

get和post的区别

1.使用Get安全性较低，因为发送的数据是url的一部分，所以在发送敏感信息时不用get
get请求数据在url中对所有人是可见的，post请求数据不会显示在url中
2.get传参值只能是数字、字符串。post除了可以传递数字、字符串以外，还可以传递二进制数据
3.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
4.当发送数据时，get方法向url添加数据，url的最大长度是2048，而post方法数据长度没有限制
5.对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；所以get效率会更高一点
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）

http的请求方式：

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法
GET向特定的资源发出请求，并返回实体。
POST向指定资源提交数据进行处理请求
HEAD类似get请求，返回响应中没有具体内容，用于获取报头

HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
OPTIONS
1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2、用来检查服务器的性能。
例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
PUT
向指定资源位置上传其最新内容
DELETE
请求服务器删除Request-URL所标识的资源
TRACE
回显服务器收到的请求，主要用于测试或诊断
CONNECT
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。