http协议详解

http协议

---

首先大致说明一下什么是http协议。HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种用于传输超媒体文档（例如 HTML）的应用层协议。目前主流的版本是基于传输层的TCP和网络层IP协议实现的。

我们一般学习http协议其实主要就是学习它的报文格式，以下将会简单介绍一下http协议报文格式的结构以及每个部分的含义，我将先让你了解http协议的大致结构，然后逐个细说让你理解。

http协议格式

---

从总体上看

学习http协议报文格式我们分为两种类型去学习，这两种类型既有相同点又有不同点，它们大致都可以分为首行，请求头和请求正文三个部分，但每个部分又不相同，因此以下将分别叙述两种类型的协议格式：

1. http请求报文

1. 报文结构:

1. 首行： 方法 URL 版本

2. 请求报头：key：value...

3. 空行

4. 请求正文

2. 报文实例：

POST https://www.youtube.com/youtubei/v1/log_event?alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8 HTTP/1.1
Host: www.youtube.com
Connection: keep-alive
Content-Length: 18210
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Content-Type: application/json
Origin: https://www.youtube.com
Referer: https://www.youtube.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: DEVICE_INFO=ChxOekl3TWpVNU5qVXhNREl6TlRJM01qTTBNUT09EN2G058GGN2G058G; ....
...
​
{"context":{"client":{"hl":"zh-....

2. http响应报文：

1. 报文结构：

1. 首行：版本 状态码 状态描述

2. 响应报头：key：value...

3. 空格

4. 响应正文

2. 报文实例：

HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Content-Encoding: br
Date: Sat, 25 Feb 2023 15:55:44 GMT
Server: scaffolding on HTTPServer2
Content-Length: 31
X-Content-Type-Options: nosniff
Set-Cookie: __Secure-3PSIDCC=AFvIBn8zgGAJ8c9S6P1jBrfxuq-wxwgA1eRLueux0j1lRUIJ3xghczhfiAsXpqxHcxDJa_YQuQ; expires=Sun, 25-Feb-2024 15:55:44 GMT; path=/; domain=.youtube.com; Secure; HttpOnly; priority=high; SameSite=none
Cache-Control: private
​
...

我们可以看到总体上看来http响应和请求的大致结构还是一样的，下面将介绍它们的具体差别。

从细节上看

首行

1. 对于http请求而言，首行分别为方法、URL、版本。

1. 方法：http请求的方法有多种，但是常用的方法只有post和get方法。post方法规定是用于像服务器提交一些数据的请求，get方法规定是用于从服务器获取数据的请求。当然，这也只是规定，在实际使用中很多程序员并不会按照这个规定去做，因为这两种方法本质上其实是相同的。

2. URL：全称为Uniform Resource Locator——唯一资源定位符，它指向了网络上唯一的一个资源。它一般格式如下：

协议名://域名(IP地址)/带层次的文件路径:服务器端口号?QueryString

1. 协议名：通常为http或是https

2. 域名：是服务器的地址，可通过DNS系统解析为一个IP地址，这个IP地址就是服务器的IP地址。

3. 带层次的文件路径：我们在访问web应用时很容易发现这些web应用都不止一个界面，这里的每一个界面通常都有其在根目录下对应的唯一的路径，有了这样的文件路径我们就可以准确访问到一个web应用的特定界面。

4. 服务器端口号：它对应着服务器上一个特定的进程，这个端口号是可以省略掉的，如果省略掉，http协议默认端口号为80，https协议默认端口号为443。

5. QueryString：查询字符串，它的结构是一个个的键值对，通常用来向服务器传输一些参数，从而让服务器根据参数做出响应。

下面是一个具体的URL：

https://www.bing.com/search?q=GitHub&form=ANNTH1&refig=32a99428f71448e38901108b788bcad0

3. 版本：http目前广泛应用的是1.1版本，但最新的已经更新到3.0了。

2. 对于http响应而言，首行分别为版本、状态码、状态描述。

1. 版本：与http请求一样

2. 状态码：状态码是http响应用于表述当前响应状态的数字。常见的状态码有200(表示访问成功)、404(没有找到资源)、405(服务器不支持http请求的方法)、500(服务器内部错误)、302(重定向)。

3. 状态描述：对于状态码的简单描述，有时是被省略掉的。

头部header

http请求和响应的报头基本上是一致的，都是键值对的形式，这些键值对的键和值以:分开，大部分键的含义都是规定好的，对应的值是自定义的，当然也可以有自定义的键。常见的header有Host、Content-Length、Content-Type、User-Agent、Referer、Cookie。

Host：表示服务器主机的地址和端口，例如上面第一个报文案例中的

。但是这就有个疑问，请求URL里面都有一个地址了为什么这里还要搞一个呢？其实我们在访问一个服务器时有时是需要经过代理的，而URL里面的地址是当前要访问的下一个代理点的地址，而Host里的地址是最终我们要访问的服务器的地址。

1. Content-Length：它表示正文中数据的长度，单位是字节。与Content-Type共存。

2. Content-Type：它表示正文的类型。这里http请求的常用类型和http响应的常用类型还不太一样。

1. http请求的常见类型：

1. application/x-www-form-urlencoded: 表示以form表单发送的数据格式，此时请求正文的格式形如：

title=test&content=hello

2. multipart/form-data: form表单提交的数据格式，通常用于提交图片/文件。

3. application/json: 数据为 json 格式. body 格式形如：

{
    "studentId": 134,
    "studentName": "huall"
}

2. http响应中常见的类型：

1. text/html : body 数据格式是 HTML

2. text/css：body数据格式为css

3. application/javascript：body数据格式为JavaScript

4. application/json：body数据格式为json

3. User-Agent：表示客户端的浏览器/操作系统的属性。这是个历史问题，以前客户端的系统多种多样，服务端会根据不同的系统返回不同的界面去适应相应的系统。

4. Referer：表示这个界面从哪跳转过来的。但如果是从浏览器收藏夹里访问界面则是没有Rerferer的。

5. Cookie：cookie存储的是一个字符创，它可以理解为是一个用户的身份标识。如果用户访问服务器时带着相应的cookie，服务器就会根据用户的cookie找到相应的用户信息并返回相应的界面。cookie一般是保存在用户的本地内存中，cookie的获取一般是用户第一次访问服务器时服务器会根据用户的信息生成一个用户标识，这些形如用户信息-用户标识的键值对会存储于服务器，而服务器会把生成的用户标识通过Set-Cookie（响应报头的一个键值对）返回给用户。这就像第一次去游乐场办了张卡，游乐场系统内就会保存卡的信息和用户的信息，而以后再去游乐场玩只需要带着张卡就行了。

正文body

请求正文和响应正文的功能是不同的，请求正文一般用于向服务器提交数据和文件，而响应正文则是根据请求信息向客户端返回一个界面、图片等等。

构造http请求

---

1. form表单

form表单是由html中的标签构成，其作用是向目标地址发送一个http请求，但是支持的方法只有get和post。其代码如下：

<formaction="http://abcdef.com/myPath"method="GET">
    <inputtype="text"name="userId">
    <inputtype="text"name="classId">
    ...
    <inputtype="submit"value="提交">
</form>

以上代码中各个参数的含义如下：

1. action：是访问目标的URL。

2. method：是http请求的方法类型。

3. type：是当前输入框的类型。

4. name：键值对的键。

5. value：标签的值，显示在见面上相当于submit按钮上显示的字。

2. ajax

ajax全名Asynchronized JavaScript And XML，是用于异步传输信息的一组API，异步传输可以理解为发送的信息不必立刻就获取响应并处理。原生的API是浏览器提供给开发者调用的，开发者可通过JavaScript调用API进行使用，但是原生的API比较难用，我们可以通过jQuery使用ajax，jquery是别人把原生ajaxAPI封装好的，更易于使用。ajax支持发送各种方法的http请求。

使用步骤：

1. 导入jQuery：将以下内容加入到html代码中

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

当然你也可以自行在浏览器中搜索jQuery cdn获取连接

2. 在js代码中调用封装好的ajax

$.ajax({
      url: "example.php",
      type: "GET",
      dataType: "json",
      data:mydata,
      contentType:"application/json",
      success: function(body) {
        // 请求成功时的回调函数
      },
      error: function() {
        // 请求失败时的回调函数
      }
});

以上代码是使用ajax发送请求的代码格式，$是jQuery中的一个全局对象，通过$可以调用jQuery的方法，ajax这个方法只有一个参数，但这个参数是一个对象，对象有多个属性，每个属性都像一对键值对，具体写法只需要将上面的属性搞懂就清楚了：

1. url：是访问地址

2. type：要构造的http请求的方法类型

3. dataType：选填参数，表示期望从服务器端返回的数据类型，例如"json"、"xml"、"html"、"text"等；

4. data：要传输的数据，可以是字符串，也可以是对象。如果格式为字符串那么格式必须是形如querystring的键值对。如果是对象则必须先通过转换为json字符串才能进行传输。如果指定dataType为application/json则对象会被自动转换为json字符串在发送，否则需要手动通过JSON.stringify()将js对象转换为json字符串。

5. contentType：用于指定发送数据的格式，它是在HTTP请求头部中Content-Type字段的值。当使用post方法发送数据时，服务器需要知道数据的格式，contentType参数就是用来告诉服务器请求中包含的数据格式。如果没有指定contentType参数，则默认使用application/x-www-form-urlencoded格式，即表单提交格式。如果要发送JSON格式的数据，则需要将contentType设置为application/json。

var data = "name=John&age=30&gender=male";      //格式为字符串
​
var data = { name: "John", age: 30, gender: "male" };       //格式为对象
data = JSON.stringify(data);

3. 第三方软件

使用第三方软件可以按自己的要求构造出想要的http请求，通过这种软件我们可以更方便的去测试后端代码的功能，这样的软件有很多，使用比较多的是postman，点击下载postman。