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.确保服务器和客户端的链路正常，以便于进行正常通讯；