http

2019-10-11  本文已影响0人  田成力

http

打开浏览器,输入网址,按下enter键,到看到整个页面,中间都经历了哪些事情?
1.浏览器首先向DNS域名解析服务器发请求
2.DNS反解析:根据浏览器请求地址中的域名,到DNS服务器中找到对应的服务器外网IP地址
3.通过找到外网IP向对应的服务器发送请求(首先访问的是服务器的web站点管理工具:准确来说我们是先基于工具在服务器上创建很多服务,当客户端访问的时候服务器会匹配出具体是请求那个服务)
4.通过URL地址携带的端口号,找到服务器上对应的服务,以及服务所管理的项目源文件
5.服务器端根据请求的地址中的路径名称,问号传参或者哈希值,把客户端所需要的内容进行准备和处理
6.把准备的内容响应给客户端(如果请求的是HTML或者css等这样的资源文件,服务器返回的是资源文件中的源代码(不是文件本身,音视频除外))
7.客户端浏览器接收到服务器返回的源代码,基于自己内部的渲染引擎(内核)开始进行页面的绘制和渲染
->首先计算DOM结构,生产DOMtree
->自上而下运行代码,加载css等资源文件
->根据获取的css生成样式,开始渲染(绘制)页面Render tree
->开始渲染和绘制A
HTTP请求阶段:1-4;
HTTP:响应阶段5-6;服务器把客户端需要的内容准备好并且返回客户端
浏览器渲染阶段:7;
2.我们把一次完整的 响应+请求=HTTP事务,事务就是完整的一次操作,请求响应缺一不可
3.一个页面完全加载完成,需要向服务器发起很多次HTTP事务操作
一般来说:首先把HTML源代码拿过来,加载HTML的时候遇到link,script,img[src],iframe,audio/video(没有设置preload=‘none’)都会重新和服务器端建立HTTP事务交互
特殊情况;如果我们做了资源缓存处理304,而且即将加载的资源在之前已经加载过了,这样的操作和传统的HTTP事务有所不一样,他们是从服务器和浏览器的缓存中读取数据,比传统的读取快很多。
4.在客户端向服务器发送请求,以及服务器把内容响应给客户端的时候,中间相互传递了很多内容(客户端把一些内容传递给服务器,服务器把一些内容响应给客户端),我们把传递的内容统称为“HTTP报文”

url的组成

url:统一资源定位符
urn:统一资源名称
uri:统一资源标识符
URI=URL+URN
http://www.baidu.com/
[传输协议]
用来传输客户端和服务端交互的信息,类似于快递小哥
HTTP:超文本传输协议(除了传递普通文本,还可以传递文件流或者进制编码等信息),是目前最常用的web传输协议
https:经过ssl(secure sockets layer安全套接层)加密的HTTP传输协议,比HTTP更加安全(涉及支付的网站一般都是基于https完成的)
FTP;文件的传输协议,一般用来实现资源文件在服务器上的上传下载(文件较大)
[域名]Domain name
一级域名(顶级域名)
二级域名
三级域名
看有几个点
.com供商用的国际域名
.cn供商用的中文域名
.net用于网络供应服务商
.gov用于政府机构

.edu教育机构
[端口号]
用来区分同一服务器上不同服务的标识,基于web服务管理创建服务的时候可以制定,不同服务器之间一般是不能使用相同的端口号
HTTP:默认端口号80
HTTPS:默认端口号:443
FTP:默认端口号21
如果当前网站服务,采用的是协议对应的默认端口管理,那么用户输入网址的时候可以不指定端口号,浏览器会默认帮用户把默认的端口传递给服务器。
一台服务器上的端口号范围;0-65535;
webstrom预览页面:把自己当电脑当作服务器,在服务器上创建一个服务端口号是63342,自己电脑上的浏览器预览自己电脑上的服务,属于本机服务请求,用localhost(127.0.0.1)本地域名即可

服务器上安装一款应用都可能会作为一个服务,占用一个端口号,所以服务器上不安装应用。

[请求路径名称]
path
pathname
例如:/stu/index.html一般都是请求当前服务对应的项目目录下,stu文件中的index.html页面但是也有特殊情况,就是当前的URL是被伪URL重写的,我们看到的url其实不是真实的请求,
https://item.js.com/567897.html 这个地址就是被重写的,它的真实url地址很可能是 https://item.jd.com/detail.jsp?id=567897,其实就是跳转到详情页,通过问号传递不同的产品编号,展示不同的产品详情信息,但是.jsp这种服务器渲染的动态页面不能被搜索引擎收录,不利于页面的seo,所以我们会把动态页面静态化,这也就用到了URl重写技术例如/stu/info这种没有任何后缀信息,一般都不是用来请求资源文件的,而是用于Ajax数据请求的接口地址(如果后缀是.json类的,也是同理)


有一种除外/stu/info/这种很可能不是接口地址,而是没有指定请求的资源名称,服务器会请求默认的资源文件,一般都是index.html/defult.html...


动态页面DHTML:泛指当前页面中的内容不是写死的,而是动态绑定的,例如:.jsp/.php/.aspx...这些页面中的数据都是基于ajax或者是后台编程语言处理,有服务器端渲染,最后把渲染后的结果返回给客户端呈现的
[问号传参及哈希值]
?xxx=xxx&...#xxx
在HTTP事务中,问好传参是客户端把信息传递给服务器的一种方式,(也有可能是跳转到某一个页面,把参数值传递给页面用来标识的)
哈希值一般都跟客户端服务器交互没啥关系,主要是用于页面中的锚点定位和hash路由交换

HTTP报文

首部(头):请求头、响应头、通用头
起始行:请求起始行、响应起始行
主体:请求主体、响应主体

General 通用头

Request URL: http://www.zhufengpeixun.cn //请求地址
Request Method: GET   //请求方式(GET / POST / DELEFT / PUT / HEAD OPTION)
Status Code: 304 Not Modified   //响应的http状态码
Remote Address: 162.159.211.54:80  // 主机地址(服务器外网IP地址)
Referrer Policy: unsafe-url

Request Header 请求头 【客户端设置,服务器接收】

GET / HTTP/1.1  //=> 起始行(描述当前请求的一些基本信息:用的是1.1版本传输协议进行内容传输的)
Host: www.zhufengpeixun.cn
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) 
...
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Cookie: ... => cookie信息一般都是放到头文件中实现和服务器端的数据通信的
If-Modified-Since: Sun, 06 May 2018 10:02:42 GMT
...

Response Headers 响应头 【服务器端设置,客户端获取】

HTTP/1.1 304 Not Modified   //=> 响应起始行(HTTP状态码)
Date: Tue, 22 May 2018 09:20:59 GMT  //=> 服务器响应内容时候的‘服务器端时间’(客户端获取这个时间的时候已经和真实的时间产生误差了,因为服务器返回内容到客户端接收到,也是需要时间的),并且这个时间是格林尼治时间(比北京时间慢8小时, 北京时间是 GMT+0800)
Connection: keep-alive 
ETag: "700a6f-17f43-56b86a77513d3"
Vary: Accept-Encoding,User-Agent
Server: yunjiasu-nginx  //=>管理web服务的工具 
CF-RAY: 41ee35bd772192c4-SJC

Response [响应主体]

服务器返回的是啥就是啥

Request Payload / Form Data [请求主体]

客户端传递给服务器的内容

2.大家了解HTTP报文以及如何查看对未来工作开发和bug调试至关重要,以后设计到交互功能(前端《=》后台)出现问题,都按照如下方式查找问题原因
A:打开控制台,在network中找到当前交互的请求地址,点击进去看详情
B:如果是传递给服务器的参数或者方式错误(前端问题)
C:如果服务器返回的信息有错误或者API接口文档规定的内容不一样[后台问题]
D:如果返回数据是对的,但是展示有问题(前端问题)
确定是自己前端的问题后,基于断点或者(代码中的debugger)控制台输出等方式,开始逐步调试即可。
3.客户端和服务器端信息交互的方式
客户端传递给服务器
A:问号传参 ,请求的URL地址末尾通过问号传参方式,把以写信息传递给服务器、/stu/info?id=12&lx=man
B:设置请求头
客户端把需要传递给服务器的内容设置到请求头信息中(自定义请求头),服务器可以通过接受请求头信息把内容得到
C:设置请求头主体
xhr.send([ajax send中传递的内容就是客户端设置的请求主体内容,服务器端可以接收到这些信息的])
[服务器返回给客户端]
A设置响应头信息
例如把服务时间通过响应头返回给客户端,客户端通过获取响应头信息得到这个时间(响应头返回的速度是优先于响应主体的)
B设置响应主体
主要的返回信息都在相应主体中

[图片上传失败...(image-e769d4-1570785118840)]

上一篇 下一篇

猜你喜欢

热点阅读