阅读 528

关于http和一次完整的前后端响应

关于http和一次完整的前后端响应

首先说下写下这个的初心,最近项目遇见一个很奇怪的bug,当我的异步请求发出的时候,在chrome上面可以看到request和responed相应的条目,但是当你打开responsed的时候发现里面的Preview和Response里面是空白,但是我的异步方法的回掉函数是有数据的。

这时候浏览器会直接崩溃,在任务管理器中你会发现chrome的大小一直在增长。直到chrome崩溃

1. 当我们在浏览器的urlh中输入网址的时候,浏览器会做的事情

  • 域名解析(eg:www.biying.com)
  • 发起TCP的3次握手
  • 建立TCP连接后发起http请求
  • 服务器响应http请求,得到html(HTML树)
  • 浏览器解析html代码,并请求html代码中的资源
  • 浏览器对页面进行渲染呈现给用户(渲染页面)
  1. 域名解析(我们以chrome为例)当我们请求网址的也就是对应的服务器名

chrome首先搜索自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存)看自身有没有对应条目的而且没有过期,如果有且没有过期则解析到此结束。

如果浏览器自身的缓存里面没有找到对应的条目,那么chrome会搜索操作系统自身的DNS缓存,如果找到且没有过期则停止搜索解析到此结束

如果在Windows系统的DNS缓存也没有找到,那么尝试读取hosts文件(位于C:\Windows\System32\drivers\etc),看看这里面有没有该域名对应的IP地址,如果有则解析成功(实话实说在开发的时候,你真的需要在这文件里面配上你所访问的ip和域名要一一对应)

这个时候寻找域名的工作就交给internet了(后面的步骤。。。)

  1. 发起TCP的3次握手(划重点,要考)

Client首先发送一个连接试探,ACK=0 表示确认号无效,SYN = 1 表示这是一个连接请求或连接接受报文,同时表示这个数据报不能携带数据,seq = x 表示Client自己的初始序号(seq = 0 就代表这是第0号包),这时候Client进入syn_sent状态,表示客户端等待服务器的回复

Server监听到连接请求报文后,如同意建立连接,则向Client发送确认。TCP报文首部中的SYN 和 ACK都置1 ,ack = x + 1表示期望收到对方下一个报文段的第一个数据字节序号是x+1,同时表明x为止的所有数据都已正确收到(ack=1其实是ack=0+1,也就是期望客户端的第1个包),seq = y 表示Server 自己的初始序号(seq=0就代表这是服务器这边发出的第0号包)。这时服务器进入syn_rcvd,表示服务器已经收到Client的连接请求,等待client的确认。

Client收到确认后还需再次发送确认,同时携带要发送给Server的数据。ACK 置1 表示确认号ack= y + 1 有效(代表期望收到服务器的第1个包),Client自己的序号seq= x + 1(表示这就是我的第1个包,相对于第0个包来说的),一旦收到Client的确认之后,这个TCP连接就进入Established状态,就可以发起http请求了。

举个例子: 假设一个老外在故宫里面迷路了,看到了小明,于是就有下面的对话:

  • 老外: Excuse me,Can you Speak English?
  • 小明: yes 。
  • 老外: OK,I want ...

其次就是2个计算机通信是靠协议(目前流行的TCP/IP协议)来实现,如果2个计算机使用的协议不一样,那是不能进行通信的,所以这个3次握手就相当于试探一下对方是否遵循TCP/IP协议,协商完成后就可以进行通信了,当然这样理解不是那么准确。

2. http请求的时候一次完整的请求过程

进过TCP3次握手之后,浏览器发起了http的请求,使用的http的方法 ,请求的URL ,请求协议
  • 请求方式:

我们所说的get/post/...其他的现在基本用不到

  • 请求协议
  • http/0.9: stateless
  • http/1.0: MIME, keep-alive (保持连接), 缓存
  • http/1.1: 更多的请求方法,更精细的缓存控制,持久连接(persistent connection) 比较常用
  • 请求头部
  • Accept 就是告诉服务器端,我接受那些MIME类型
  • Accept-Encoding 这个看起来是接受那些压缩方式的文件
  • Accept-Lanague 告诉服务器能够发送哪些语言
  • Connection 告诉服务器支持keep-alive特性
  • Cookie 每次请求时都会携带上Cookie以方便服务器端识别是否是同一个客户端
  • Host 用来标识请求服务器上的那个虚拟主机,比如Nginx里面可以定义很多个虚拟主机, 那这里就是用来标识要访问那个虚拟主机。
  • User-Agent 用户代理,一般情况是浏览器,也有其他类型,如:wget curl 搜索引擎的蜘蛛等
  • 请求状态
  • 1xx: 信息性状态码
  • 100, 101
  • 2xx: 成功状态码
  • 200:OK
  • 3xx: 重定向状态码
  • 301: 永久重定向, Location响应首部的值仍为当前URL,因此为隐藏重定向;
  • 302: 临时重定向,显式重定向, Location响应首部的值为新的URL
  • 304:Not Modified 未修改,比如本地缓存的资源文件和服务器上比较时,发现并没有修改,服务器返回一个304状态码, 告诉浏览器,你不用请求该资源,直接使用本地的资源即可。
  • 4xx: 客户端错误状态码
  • 404: Not Found 请求的URL资源并不存在
  • 5xx: 服务器端错误状态码
  • 500: Internal Server Error 服务器内部错误
  • 502: Bad Gateway 前面代理服务器联系不到后端的服务器时出现
  • 504:Gateway Timeout 这个是代理能联系到后端的服务器,但是后端的服务器在规定的时间内没有给代理服务器响应

基本上我所理解的http和请求就是这样,当然我在头部写到的问题觉得是服务端的人员需要解决的问题而不是前端开发所需要解决的。

感谢这篇博客的作者提供的文章原文

文章分类
前端