http基本入门｜青训营HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器

HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

数据传输的规则指的是请求数据和响应数据需要按照指定的格式进行传输。

1基本格式

2特点

基于TCP协议: 面向连接，安全

TCP是一种面向连接的(建立连接之前是需要经过三次握手)、可靠的、基于字节流的传输层通信协议，在数据传输方面更安全。
基于请求-响应模型:一次请求对应一次响应

请求和响应是一一对应关系
HTTP协议是无状态协议:对于事物处理没有记忆能力。每次请求-响应都是独立的

无状态指的是客户端发送HTTP请求给服务端之后，服务端根据请求响应数据，响应完后，不会记录任何信息。

对于客户端也不会在第二次的请求时携带上一次的请求数据，所以服务器没法知道客户端的身份之类的信息。
- 缺点:多次请求间不能共享数据
  - java使用会话技术(Cookie、Session)来解决这个问题
- 优点:速度快

3请求数据格式

3.1 格式介绍

get

请求数据总共分为三部分内容，分别是请求行、请求头、请求体

url

请求方式有七种,最常用的是GET和POST
请求头: 第二行开始，格式为key: value形式

请求头中会包含若干个属性，常见的HTTP请求头有:
1. Host: 表示请求的主机名
2. User-Agent: 浏览器版本,例如Chrome浏览器的标识类似Mozilla/5.0 ...Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT ...)like Gecko；
3. Accept：表示浏览器能接收的资源类型，如text/ ，image/ 或者 / 表示所有；
4. Accept-Language：表示浏览器偏好的语言，服务器可以据此返回不同语言的网页；
5. Accept-Encoding：表示浏览器可以支持的压缩类型，例如gzip, deflate等。
  
  这些数据有什么用处?
  
  举例说明:服务端可以根据请求头中的内容来获取客户端的相关信息，有了这些信息服务端就可以处理不同的业务需求，比如:
  - 不同浏览器解析HTML和CSS标签的结果会有不一致，所以就会导致相同的代码在不同的浏览器会出现不同的效果
  - 服务端根据客户端请求头中的数据获取到客户端的浏览器类型，就可以根据不同的浏览器设置不同的代码来达到一致的效果
  - 这就是我们常说的浏览器兼容问题

post

请求体: POST请求的最后一部分，存储请求参数

> 如上图红线框的内容就是请求体的内容，请求体和请求头之间是有一个空行隔开。此时浏览器发送的是POST请求，为什么不能使用GET呢?这时就需要回顾GET和POST两个请求之间的区别了:
>
> -   GET请求请求参数在请求行中，没有请求体，POST请求请求参数在请求体中
>
> -   GET请求请求参数大小有限制，POST没有
>
>     -   Get是一个简单的http方法，用于向服务器请求资源
>
>     -   Post是一种更强大的请求，利用post可以同时向服务器发送表单数据
>
>         -   该请求的请求头非常多，类型不一致就会报错

post请求数据类型

参考

form表单标签常用属性

action：url 地址，服务器接收表单数据的地址

method：提交服务器的http方法，一般为post和get

name：最好好吃name属性的唯一性

enctype: 表单数据提交时使用的编码类型，默认使用"pplication/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，才能完成传递文件数据。

方式

1.application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

表单

<form action="/upload" enctype="multipart/form-data" method="post">
    
Username: <input type="text" name="username">
Password: <input type="password" name="password">
File: <input type="file" name="file">

<input type="submit">

http格式

POST http://www.example.com HTTP/1.1

Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

2.multipart/form-data 这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让

表单的 enctype 等于 multipart/form-data。

直接来看一个请求示例：

form表单：

<form action="/upload" enctype="multipart/form-data" method="post">
    
Username: <input type="text" name="username">
Password: <input type="password" name="password">
File: <input type="file" name="file">

<input type="submit">

Http协议请求：

POST http://www.example.com HTTP/1.1

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
 
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

 
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

3.application/json application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。

axios/js请求

var data = {'title':'test', 'sub' : [1,2,3]};

$http.post(url, data).success(function(result) {
    ...
});

最终发送的请求是：

POST http://www.example.com HTTP/1.1

Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

axios传输数据为json

一般只要关心

post发起json数据请求

请求：在使用Vue的axios库发送表单数据时，默认情况下，axios会将数据以JSON格式进行编码并将其设置为请求的Content-Type: application/json。

接收：@RequestBody

post发起普通的表单请求

请求：使用JavaScript库或模板引擎发送表单数据时，主体内容的格式通常是Content-Type: application/x-www-form-urlencoded

接收：直接springMVc的变量自动接收，或者@ModelAttribute

4响应数据格式

响应数据总共分为三部分内容，分别是响应行、响应头、响应体

响应行：响应数据的第一行,响应行包含三块内容，分别是 HTTP/1.1[HTTP协议及版本] 200[响应状态码] ok[状态码的描述]
响应头：第二行开始，格式为key：value形式

响应头中会包含若干个属性，常见的HTTP响应头有:
1. Content-Type：表示该响应内容的类型，例如text/html，image/jpeg；
  - http响应包括一个首部和体，MIME类型告诉浏览器要接收的数据是什么类型，这样浏览器就能知道如何显示
2. Content-Length：表示该响应内容的长度（字节数）；
3. Content-Encoding：表示该响应压缩算法,到时浏览器根据该类型解压，例如gzip；
4. Cache-Control：指示客户端应如何缓存（假如本地有缓存则读本地），例如max-age=300表示可以最多缓存300秒
Content-Type：主要使用在设置响应的文件格式，使得浏览器得知文件格式，参考牛客项目上传头像响应图片的操作
- 比如text/html、image/jpeg、image/png 通知浏览器处理类型
- meme类型：看下面

响应体：最后一部分。存放响应数据

上图中...这部分内容就是响应体，它和响应头之间有一个空行隔开。
状态码：详细看资料
- 200 ok 客户端请求成功
- 404 Not Found 请求资源不存在
- 500 Internal Server Error 服务端发生不可预期的错误

4.1 小实例

返回文本类型

    response.setContentType("text/plain;charset=utf-8");//文本类型
    response.getWriter().write(CommunityUtil.getJSONString(403, "你还没有登录哦!"));

返回json类型

    response.setContentType("application/json;charset=utf-8");//json类型
    Result result = new Result(403, null, "你还没有登录哦!");
    response.getWriter().write(JSON.toJSONString(result));

返回图片
- 常规参考
- 进阶参考

    response.setContentType("image/png");
    FileInputStream fis = new FileInputStream("d://1.png");//图片
    OutputStream os = response.getOutputStream();//响应
    ImageIO.write(ImageIO.read(fis),"png",os);//流传输

4.2 MIME类型

"Multipurpose Internet Mail Extensions"多功能Internet邮件扩充服务，它是一种多用途网际邮件扩充协议。

1.作用

服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体的MIME类型，从而让浏览器知道接受到的信息哪些是MP3，哪些是Shockwave文件等等。

服务器将MIME标识符放入传送的数据中来告诉浏览器使用哪个插件读取相关文件

2.通用格式

type/subtype

3.细分

对于text文件类型若没有特定的subtype，就使用 text/plain。类似的，二进制文件没有特定或已知的 subtype，即使用 application/octet-stream。

参考

http基本入门 ｜ 青训营