项目场景：
在实际开发过程中会遇到前后端对接调试接口的场景，对于刚入职场的前端新手来说，如何跟后端快速的完成接口的调试对于整个开发的进度来说至关重要，而了解http请求报文，有助于提高调试接口的效率。
接下来我们就来一起了解http报文的组成部分及相关的概念，然后着重分析http报文中的content-type 属性
一、http报文中的组成部分
浏览器中最常见的两个请求方式 get和post其中两者的报文头的格式都是包含以下四个部分，我们先来说说第一个 General
(1)General
Request URL：
请求的地址，指的是我们客户端像服务端请求的地址，这个在开发过程中由后端开发人员提供，就是所谓的接口。
Request Method：
请求的类型，最常见的就是post和get请求，其他的很少，这里都不说了，说到get和post的请求，我这里简单说下二者的主要区别：1.数据传输的长度限制，get由于浏览器对url长度的限制至多传输的数据大小在2kb，post请求没有数据大小的限制 2：安全性：由于get请求中的参数都是通过浏览器的url来进行传输，你所需要的数据都会在浏览器中看到，而post请求则将请求的数据信息存储在请求体中，所以get请求的安全性较差，一般敏感信息都经过加密由post请求进行传输.3：get请求的速度比post快，所以如果对请求没有特殊要求时，一般使用get。
Status Code：
状态码，反应了这个请求最终的状态，一般通过这个来判断你的请求是否成功，如：200代表了你成功的访问到了服务端。302：重定向，你访问的路径后端给你重新定向到另一个页面。403：拒绝访问，也许是跨域，也许是后端做了访问限制。404：你的访问路径有问题 。500：服务端出现错误，具体关于状态码的内容大家可以百度仔细去了解。
Remote Address
服务器ip地址，通过这个属性可以查看服务端的ip地址
(2)Responses Header
response.png
Content-Type
内容类型，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个文件，简而言之就是定义了数据实体的媒介类型。
因为这个是在Responses Header里所以根据Content-Type定义可知这个是服务端返回的数据媒介类型，所以我们可以通过这个来查看后端返回的媒介类型是什么，一般比较常见的有如下几种。
text/html：HTML格式
text/plain：纯文本格式
application/json;charset=UTF-8：JSON数据格式
在上图中我们可以看到Content-Type为application/json;charset=UTF-8，即后端返回的数据格式为json，前端拿到数据就可以以对象的形式直接处理数据了
Date
显示当前时间
Server
服务端采用的是什么服务器
Transfer-Encoding: chunked
表示输出的内容长度不能确定
(3)Request Header
requestHeader.png
这个是我们重点要关注的信息，因为里面的属性是由我们自己来控制的，我们来从头开始慢慢分析
(1)、accept:属于请求头信息，代表发送端(客户端)希望接受的数据类型，我们通过代码来实践一下
//在ajax请求中可以通过设置dataType来改变http请求中的accept属性，看如下代码
$.ajax({
type: "POST",
url: url,
data: jsondata,
dataType: 'json',
success: function (data) {
callback(data);
},
error: function (error) {
console.log(error);
}
});
这是jquery的一个ajax请求，其中我设置了dataType 的类型为json,作为客户端是希望服务端给我返回的媒体类型为json格式的数据：
save.png
其中请求中的accept 和返回中的Content-Type为一致的(后端返回的实体类型为json格式，下同)所以此时前端可以直接以对象的处理方式来使用后端返回的数据，如果此时我更改一下前端的请求数据格式，看看会发生什么。
$.ajax({
type: "POST",
url: url,
data: jsondata,
dataType: 'text',
success: function (data) {
callback(data);
},
error: function (error) {
console.log(error);
}
});
此时我将请求头的信息改为text，意思是希望从后端接收的媒体类型为字符串，如下所示
accept.png
此时accept的属性变为text/plain ，那客户端获取到的数据格式会发生变化吗？
通过抓包发现从后端返回的数据由json对象变成了json字符串，说明设置生效了。
如果不对dataType进行设置，则浏览器默认此时的Accept:/，此时代表浏览器可以接收任意类型的。
小结：accept可以理解为客户端希望获取到的媒介格式，浏览器会优先按照accept设置的类型对返回内容进行编码，所以我们如果不对accept进行设置，浏览器会根据后端返回的content-type来进行编码，我们只需要按照后端返回的媒介类容进行响应的处理即可，一般情况下我们不进行相关设置。
(2) content-type(一般get请求中没有该属性，因为他的传值方式决定了他不需要进行对内容体的设置)
request 头信息中的content-type代表着客户端像服务端传输数据的媒介类型或者是数据实体类型，如果客户端设置的数据类型不能被服务端正常解析，服务端会报错误，从而断开连接，看下面代码
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(jsonData),
dataType: 'json',
contentType: "application/json",
success: function (data) {
callback(data);
},
error: function (error) {
console.log(error);
}
});
当你将contentType设置为json格式时即代表你客户端要向后端传送的数据为json格式，那么如上会发生什么了？
content.png
此时后端就拿不到前端所传过来的json数据，这个和前端设置accept时出现的情况一样，即我希望你传过来的数据和你真正传过来的数据格式不一致，此时就需要前后端统一媒介类型了。
$.ajax({
type: "POST",
url: url,
data: jsonData,
dataType: 'json',
success: function (data) {
callback(data);
},
error: function (error) {
console.log(error);
}
});
此时页面的信息
applation.png
如上，当我代码中没有设置content-type属性是，ajax默认的content-type为application/x-www-form-urlencoded，是表单的默认提交方式。
application/x-www-form-urlencoded：窗体数据被编码为名称/值对,此时post的提交的数据被编码为键和值的格式，所以当我们将content-type设置为此属性时，浏览器就会将我们传过去的值编码为键值的形似，如上图所示，因为后台默认的就是按照这种规则进行取值的，所以前端data就需要按照正常的对象传值就可以了，不能转字符串或者其它形式，否则后端拿不到数据，就会报错。比如
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(jsonData),
dataType: 'json',
success: function (data) {
callback(data);
},
error: function (error) {
console.log(error);
}
});
save1.png
当前端传过去的数据被解析成上图所示，后端在原先不变的情况下是不能直接进行数据处理的，故会抛出错误，中断连接。
。。。。剩下的其它属性，大家可以自己了解了解，暂时就不说了，以后会补上。
总结
这个是基于项目中如何能快速的根据http的一些信息来加快接口的调试速度，总结如下。
1.首先前后端要统一http请求的方式是用get还是post。
2.客户端在进行ajax请求的时候，一般都不对datatype进行设置，我们通过查看响应头的content－type来查看服务端到返回的数据格式，然后在前端进行相应的数据处理。
3.在客户端进行ajax请求时，我们需要和后端确定我们需要传入的数据格式，此时我们可以通过ajax中的content－type来定义我们的实体数据的类型，默认情况下和表单的提交编码格式一致，如果这里设置两边不统一就会造成后端拿不到数据，服务端出错直接断开服务。
总的来说，对于接口的调试，如果能按照设计文档一步一步来，应该不会出现什么问题，如果一断出现问题，则大概率原因就是前后端对数据的格式出现了不统一，此时我们可以通过http来查看到底是哪里出现问题了，有利于快速的找到问题所在。
关于网络协议这块，后面我会补上剩下的属性介绍，并探讨如何利用这些属性来进行问题的分析。
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
