network中的请求信息，headers中的每一项分别是什么意义?

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【network中的请求信息，headers中的每一项分别是什么意义? 】

1.背景介绍
HTTP（HyperTextTransferProtocol）即超文本传输协议，目前网页传输的的通用协议。HTTP协议采用了请求/响应模型，浏览器或其余客户端发出请求，服务器给与响应。

 

HTTP请求的7个步骤
1.创建TCP连接

2.浏览器发送请求（GET/sample/hello.jsp HTTP/1.1）

3.浏览器发送请求头（request header）

4.服务器发送应答（HTTP/1.1 200 OK）

5.服务器发送应答头（response header）

6.服务器发送数据

7.服务器关闭TCP链接

 

用于HTTP协议交互的信息被称为HTTP报文，客户端的HTTP报文叫作请求报文，服务器端的叫作响应报文。HTTP报文自己是由多行数据构成的字符串文本。

 

URI:uniform resource identifier,统一资源标识符。URI是以一种抽象的，高层次概念定义统一资源标识，而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。

 

2.知识剖析
做为一个Web开发人员，平常中与咱们开发相关的，就是Chrome的开发者工具。

Network标签页对于分析网站请求的网络状况、查看某一请求的请求头和响应头还有响应内容颇有用，特别是在查看Ajax类请求的时候，很是有帮助。

今天就是要简要说说Chrome的开发者工具中Network中header部分。

首先咱们打开chrome的开发者工具，选中network，再刷新页面，此时能够在下方看到一个Name，Name对应的是资源的名称及其路径，Status是请求服务器返回的状态码,当状态码为200时，则表示接口配置成功。点击任一文件名，右侧则会出现Header选项。下面让咱们来详细看下Header中的各项是什么意思。

General部分:

Request URL:资源的请求url

Request Method:HTTP方法

Status Code:响应状态码
200（状态码） OK（缘由短语）
301 - 资源（网页等）被永久转移到其它URL
404 -请求的资源（网页等）不存在

500 - 内部服务器错误

比较全的响应状态码汇总

Response Headers:

Content-Encoding:gzip ——压缩编码类型

Content-Type:text/html ——服务端发送的类型及采用的编码方式

Date:Tue, 14 Feb 2017 03:38:28 GMT ——客户端请求服务端的时间

Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服务端对该资源最后修改的时间，GMT是格林尼治标准时间

Server:nginx/1.2.4 ——服务端的Web服务端名

Transfer-Encoding:chunked ——分块传递数据到客户端

Request Headers:

Accept:text/html ——客户端能接收的资源类型

Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型

Accept-Language:en-US,en;q=0.8 ——客户端接收的语言类型

Cache-Control:no-cache ——服务端禁止客户端缓存页面数据

Connection:keep-alive ——维护客户端和服务端的链接关系

Cookie: ——客户端暂存服务端的信息

Host:www.jnshu.com ——链接的目标主机和端口号

Pragma:no-cache ——服务端禁止客户端缓存页面数据

Referer:http://www.jnshu.com/daily/15052 ——来于哪里

User-Agent: ——客户端版本号的名字

 

数据回发到服务器时浏览器使用的编码类型。 下边是说明： application/x-www-form-urlencoded： 窗体数据被编码为名称/值对，这是标准的编码格式。 multipart/form-data： 窗体数据被编码为一条消息一般上传图片等文件会使用这种编码格式提交。

application/json，提交JSON格式的数据-->

3.常见问题：
 

使用post发送请求时如何设置content-type的值？

4.解决方案

1. application/x-www-form-urlencoded  最多见的POST提交格式，使用这个编码格式post的数据会以键值对的方式提交

 

1. multipart/form-data  一般上传图片等文件会使用这种编码格式提交。

 

1. application/json    提交JSON格式的数据

5.编码实战
此知识点暂无编码，主要在于学会查看network中的信息。

6.扩展思考
HTTP的缺点
通信使用明文（不加密），内容可能会被监听；

不验证通信方的身份，所以有可能遭遇假装；

没法证实白报文的完整性，因此有可能已被篡改；

解决方法：使用HTTPS
HTTP + 加密 + 认证 + 完整性保护 = HTTPS

7.参考文献
参考一：http中请求头和响应头

参考二：content-type说明

参考三：HTTP header

8.更多讨论
1.为何更安全的 HTTPS 协议没有在互联网上全面采用？
由于没钱

为啥没钱

2.Timeline 时间轴中的不一样颜色的线表明什么意思？
Timeline工具里面使用是4种颜色来表示不一样类别的事件:

蓝色：加载；

黄色：脚本；

紫色：渲染；

绿色：绘制；

谷歌浏览器Timeline用法详解

学员问答：

1.http请求的工做方式；

首先客户端和服务器经过3次握手创建TCP链接，链接正常后客户端按照服务器的要求发送固定格式的请求信息，服务器判断客户端下发的数据是否正常，正常后会对应回复客户端请求的数据；客户端收到数据进行处理便可；

2.400状态码的含义？

400 Bad Request 客户端请求的语法错误，服务器没法理解；

发送数据格式不对，请求方式不对都会出现400 的错误；

3.请求成功后，timeline显示的什么意思？

表明文件加载所耗用的时间，能够查看具体那个文件加载的时间过长，能够对应进行优化；

对于angular框架而言，能够减小数据的双向绑定来减小网页加载时间，通常值须要对input框进行双向绑定，其余的尽可能用单行绑定，减小网页加载的时间；

4.接口怎么定义？

客户端给服务端发送请求的时候，须要按照后端定好的接口文档，对应发数据的；

接口文档是由后端来肯定的，里面有不一样请求对应的不一样的接口和数据格式，以及请求方式；

因此必定要注意查看接口文档，客户端请求失败的好多缘由都是接口文档没看清楚致使的请求失败；

5.http错误信息怎么显示，nginx怎么配跨域？

请求发送后，客户端须要判断服务器回复的信息；若是都正常，客户端对应进行下面的操做，若是错误，判断错误信息，直接将服务器回复的错误信息展现，也能够自定义错误信息；

nginx的跨域问题：服务器若是跟客户端不在一个局域网，须要配置nginx跨域，服务器会给出跨域的配置方式，按照要求将本地的nginx配置文件配置好便可；

6.什么是3次握手，为何tcp链接须要进行3次握手？

第一次握手：客户端向服务器发送信息，肯定跟服务器是否能链接上；

第二次握手：服务器回复客户端发送的信息，告知客户端，能够收到客户端下发的信息，表明客户端和服务器的链路正常；

第三次握手：客户端收到服务器回复的信息后，回复服务器，已经收到信息，确保服务器跟客户端的链路正常，客户端能够向服务器下发请求了；

做用：1.为了防止已失效的链接请求报文段忽然又传送到了服务端，于是产生错误；

2.确保服务器和客户端的链路正常，以便于进行正常通信；