network中的请求信息,headers中的每一项分别是什么意义?
作者:互联网
这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【network中的请求信息,headers中的每一项分别是什么意义? 】
1.背景介绍
作为一个Web开发人员,日常中与我们开发相关的,就是Chrome的开发者工具。
今天就是要简要说说Chrome的开发者工具中Network部分。
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响
应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。
2.知识剖析
1.Network中的信息
如果能多了解一些chrome开发者工具调试技巧/功能对于平时开发很与帮助,
在实际项目中多使用这些功能,提升自己的工作效率。下面我们来看chrome开发者工
具Network面板功能
1、Controls控制Network的外观和功能。
2、Filters控制Requests Table具体显示哪些内容。
3、Overview显示获取到资源的时间轴信息。
4、Requests Table按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
5、Summary显示总的请求数、数据传输量、加载时间信息。
network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析
HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。
下面我们主要讲Requests Table这一块的内容,header中的信息就在这一块。
名词解释
Name:资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing
Status(&Text):针对该请求服务器返回的状态码及描述该状态码的简短信息
Type:该资源的类型
Size:资源的大小
Time: Time就是从请求开始到接到最后一个字节所经历的时间;而Latency为请
求开始到接收第一个字节所经历的时间。此处的请求开始指的是该请求的状态从stalled(阻塞)状态开始。
Timeline(waterfall):该列呈现出了每个请求从阻塞状态到完成请求所经历的阶段,和整个页面从加载到完成过程中其中
资源的加载流。
Initator:初始化该请求的对象或进程,有以下几种情况
Parser: 请求由Chrome的HTML解析器时发起的。
Redirect:请求是由HTTP页面重定向发起的。
Script:请求是由Script脚本发起的。
Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
headers中的信息
General:常规信息
1、Request URL:资源的请求url
2、Request Method:HTTP方法
3、Status Code:响应状态码
200:(状态码) OK
301:资源(网页等)被永久转移到其它URL
401:访问资源的权限不够。
403:没有权限访问资源。
404:需要访问的资源不存在。
405:需要访问的资源被禁止。
500 -内部服务器错误
更多关于这方面的知识可以参见相关小课堂
4、Remote Address:请求的远程地址
5、Referrer Policy:
在页面引入图片、JS等资源,或者从一个页面跳到另一个页面,都会产生新的HTTP请求,浏览器一般都会给这些请求头加上表示来源的Referrer字段。
新的Referrer Policy规定了五种Referrer策略:No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin、和Unsafe URL。
No Referrer:任何情况下都不发送Referrer信息
No Referrer When Downgrade:仅当发生协议降级(如HTTPS页面引入HTTP资源,从HTTPS页面跳到HTTP等)时不发送Referrer信息。这个规则是现在大部分浏览器默认所采用的
Origin Only:发送只包含host部分的Referrer。启用这个规则,无论是否发生协议降级,无论是本站链接还是站外链接,都会发送Referrer信息,但是只包含协议+ host部分(不包含具体的路径及参数等信息)
Origin When Cross-origin:仅在发生跨域访问时发送只包含host的Referrer,同域下还是完整的。它与Origin Only的区别是多判断了是否Cross-origin。需要注意的是协议、域名和端口都一致,才会被浏览器认为是同域
Unsafe URL:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送Referrer信息。正如其名,这是最宽松而最不安全的策略
Response Headers:
字段
说明
Cache-Control
告诉浏览器或者其他客户,什么环境可以安全地缓存文档
Connection
当client和server通信时对于长链接如何进行处理
Content-Encoding
数据在传输过程中所使用的压缩编码方式
Content-Type
数据的类型
Date
数据从服务器发送的时间
Expires
应该在什么时候认为文档已经过期,从而不再缓存它?
Server
服务器名字。Servlet一般不设置这个值,而是由Web服务器自己设置
Set-Cookie
设置和页面关联的cookie
Transfer-Encoding
数据传输的方式
Request Headers:
字段
说明
Accept
表示浏览器支持的MIME类型
Accept-Encoding
浏览器支持的压缩类型
Accept-Language
浏览器支持的语言类型,并且优先支持靠前的语言类型
Cache-Control
指定请求和响应遵循的缓存机制
Connection
当浏览器与服务器通信时对于长连接如何进行处理:close/keep-alive
Cookie
向服务器返回cookie,这些cookie是之前服务器发给浏览器的
Host
请求的服务器URL
Referer
该页面的来源URL
User-Agent
用户客户端的一些必要信息
http协议报头详解
3.常见问题
使用post发送请求时如何设置content-type的值
4.解决方案
协议规定POST提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的HTTP请求满足上面的格式就可以。
但是,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如php、python等,以及它们的framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的Content-Type
字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。所以说到POST提交数据方案,包含了Content-Type和消息主体编码方式两部分。
1. application/x-www-form-urlencoded最常见的POST提交格式,使用这个编码格式post的数据会以键值对的方式提交。
2. multipart/form-data通常上传图片等文件会使用这种编码格式提交。
3. application/json提交JSON格式的数据。
4. text/plain窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url。
当action为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。
5.扩展思考
除了已经提到过的,content-type还有那些类型
6.参考文献
参考二:Network面板
参考三:http协议报头详解
标签:浏览器,请求,form,Referrer,headers,页面,每一项,资源,network 来源: https://blog.csdn.net/jnshu_it/article/details/85195479