【HTTP】(HTTP协议 HTTP 请求 (Request) URL HTTP 响应详解通过form表单构造HTTP请求通过ajax表单构造HTTP请求 HTTPS 加密证书 )

本文介绍: 服务器(网站)在设立之初,就需要去专门的认证机构申请证书,审核通过就会给其颁发证书,服务器生成的公钥也就包含在这个证书中了,客户端像服务器请求公钥的时候,此时就不是请求单单一个公钥,而是把整个证书都请求过来.客户端拿到证书后,就可以对证书进行校验.如果发现证书是无效的,浏览器就会直接弹框警告.本质是浏览器给网页提供的本地存储数据的机制.网页默认是不允许访问你计算机的硬盘的.(保证安全).Co ok ie 针对浏览器访问硬盘做出了明确的限制,Co ok ie就是通过键值对的方式来组织数据的.

HTTP属于是应用层协议最广泛使用的协议之一.浏览器获取到网页就是基于 http.HTTP就是浏览器和服务器之间的交互桥梁.HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP实现)

我们平时打开一个网站, 就是通过 HTTP 协议来传输数据的.
在这里插入图片描述

HTTP协议的交互详细过程可以借助第三方的工具来看到的,称为”抓包“工具.

fiddler 本质是一个代理程序,使用的时候需注意:

在这里插入图片描述
双击左侧请求列表就能够查看请求的详细情况:

观察抓包结果当前 ht t p请求是个行文本格式的数据.

“网址” 其实就是说的 URL (Uni form Re source Lo cat o r 统一资源定位符).互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它.URL 的详细规则由因特网标准RFC1738 进行了约定
在这里插入图片描述
https : 协议方案名. 常见的有 http 和 http s, 也有其他的类型. (例如访问 mysql 时用的jdbc:mysql )
user:pass : 登陆信息. 现在的网站进行身份认证一般不再通过 URL 进行了. 一般都会省略
www.example.jp : 服务器地址. 此处是一个 “域名”, 域名会通过 DNS 系统解析成一个具体的 IP 地址.(通过 ping 命令可以看到, www.example.jp 的真实 IP 地址 )
端口号: 端口号描述的是哪个程序
/dir/index.html?: 带层次的文件路径.找到程序管辖下的哪个文件.
uid=1 : 查询字符串(query string). 本质是一个键值对结构. 键值对之间使用 & 分隔. 键和值之间使用 = 分隔.就是获取资源的时候带的参数.
片段标识: 此 URL 中省略了片段标识. 片段标识主要用于页面内跳转. (例如 Vue 官方文档:http s://cn.vue js.org/v2/guide/#%E8%B5%B7%E6%AD%A5, 通过不同的片段标识跳转到文档的不同章节)

在这里插入图片描述
一个URL这些部分有的是可以省略的.
https://www.baidu.com省略了端口,省略端口的时候,浏览器会提供默认端口.对于http来说默认端口80;对于https来说默认端口是443.
/也是路径,没省略只是有点短,代表”根目录“,是HTTP服务器的根目录,HTTP服务器是系统上的一个进程,就委托这个服务器管理系统上的一个特定的目录即这个目录里的资源可以让外面进行访问.

User-Agent
User-Agent描述了浏览器和操作系统的版本.
如:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

200成功了
404 Not Found访问的资源不存在
403 Forbidden访问被拒绝(没有权限)
302 Moved temporarily重定向(类似于呼叫转移)
在这里插入图片描述
500服务器内部错误(服务器代码抛异常)
504 gateway timeout请求超时(响应时间太久,浏览器等不及了)

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 Ja vaSc ript
application/json : body 数据格式是 JSON
在这里插入图片描述
关于Content-Type的详细文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签 允许用户和服务器之间交互数据 -->
    <!-- 要求提交的数据以键值对的结构来组织 -->
    <form action="https://www.sogou.com" method="get">
        <input type="text" name="studentName ">
        <!-- <input type="submit" 构造了一个特殊的提交按钮 value属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发改form表单的 "提交操作" 也就是构造http请求发给服务器-->
        <input type="submit" value="提交">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签 允许用户和服务器之间交互数据 -->
    <!-- 要求提交的数据以键值对的结构来组织 -->
    <form action="https://www.sogou.com" method="post">
        <input type="text" name="studentName ">
        <!-- <input type="submit" 构造了一个特殊的提交按钮 value属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发改form表单的 "提交操作" 也就是构造http请求发给服务器-->
        <input type="submit" value="提交">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入 jquery -->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url: 'https://www.sogou.com?studentName=zhangsan',
            // 此处success 就声明了一个回调函数 就会在服务器
            // 响应返回到浏览器的时候触发该回调
            // 正是此处的回调体现了 "异步"
            success: function(data){
                // data则是响应的正文部分
                console.log("当服务器返回的响应到达浏览器之后,浏览器触发该回调,通知到咱们的代码中")
            }
        });
        console.log("浏览器立即往下执行后续代码");
    </script>
</body>
</html>