HTTP协议与HTTPS协议

语义上，按http规范，get是获取数据，post是提交数据（也可以不遵循规范，客户端代码和服务端代码约定好就行）
body上，按http规范，get传递数据是queryString，post传递数据是body
幂等性上，get一般具有幂等性，post一般不具有幂等性（幂等性：多次请求，不会对服务端造成错误）
缓存上，get可以被缓存，post不能

其他方法

PUT 与 POST 相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
OPTIONS 返回服务器所支持的请求方法
HEAD 类似于GET，只不过响应体不返回，只返回响应头
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用

认识请求报头（header）

header 的整体的格式也是 "键值对" 结构.每个键值对占一行. 键和值之间使用分号分割。

Host

表示服务器主机的地址和端口

Content-Length

表示 body 中的数据长度

Content-Type

表示body中的数据类型

作用：告诉对端，body的数据格式，这样对端才能以相同的格式来解析

User-Agent (简称 UA)

表示浏览器/操作系统的属性.

Referer

表示这个页面是从哪个页面跳转过来的.

客户端保存数据的一种技术，每次请求都会携带这个数据（通过请求头Cookie字段）

作用：客户端保存数据的技术

如何实现：先保存（js，服务端返回set+Cookie头），再使用（客户端请求Cookie头）

一般用于保存用户身份信息

关于数据传输的总结

请求：

queryString
body：form表单格式，json格式，form-data格式

响应：

body：json格式

认识请求正文(body)

正文中的内容格式和 header 中的 Content-Type 密切相关.

application/x-www-form-urlencoded（表单格式）
multipart/form-data（form-data格式）
application/json（json格式）

HTTP 响应

认识响应状态码

200 OK

这是一个最常见的状态码, 表示访问成功

404 Not Found

没有找到资源

403 Forbidden

表示访问被拒绝. 有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问)

405 Method Not Allowed

方法不支持，服务器列表不包含请求方法

500 Internal Server Error

服务器内部错误，一般是服务端出错

504 Gateway Timeout

网关超时，一般是服务端处理不过来请求，产生超时

301/302/307 重定向

认识响应报头

响应报头的基本格式和请求报头的格式基本一致

Content-Type

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

通过form表单构造http请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求。

form 发送 GET 请求

<form action="http://abcdef.com/myPath" method="GET">
<input type="text" name="userId">
<input type="text" name="classId">
<input type="submit" value="提交">
</form>
form的重要参数

action: 构造的 HTTP 请求的 URL 是什么.
method: 构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST).

input 的重要参数:

type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户输入的内容.
value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本.

form 发送 POST 请求

<form action="http://abcdef.com/myPath" method="POST">
<input type="text" name="userId">
<input type="text" name="classId">
<input type="submit" value="提交">
</form>

把上面的method的GET改为POST

主要区别：

method 从 GET 变成了 POST
数据从 query string 移动到了 body 中

通过ajax构造http请求

ajax的特点是可以不需要刷新页面/页面跳转就能进行数据传输，在JavaScript可以用ajax构造http请求。

作用：（1）用户体验好，不刷新页面

（2）效率更高，只需传输数据

发送GET请求

ajax代码写在<script>,中，就是页面加载就发ajax请求

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {
// readState 表示当前的状态.
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (httpRequest.readyState == 4) {
// status 属性获取 HTTP 响应状态码
    console.log(httpRequest.status);
// responseText 属性获取 HTTP 响应 body
    console.log(httpRequest.responseText);
    }
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('GET', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 send 方法发送 http 请求
httpRequest.send();

发送POST请求

1.先使用 setRequestHeader 设置 Content-Type
2. 再通过 send 的参数设置 body 内容

发送 application/json 数据

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {
// readState 表示当前的状态.
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
    if (httpRequest.readyState == 4) {
    // status 属性获取 HTTP 响应状态码
    console.log(httpRequest.status);
    // responseText 属性获取 HTTP 响应 body
    console.log(httpRequest.responseText);
    }
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('POST', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 setRequestHeader 设置请求头
httpRequest.setRequestHeader('Content-Type', 'application/json');
// 5. 调用 send 方法发送 http 请求
httpRequest.send(JSON.stringify({
    name: 'zhangsan',
    age: 18
}));

封装ajax方法

/ 参数 args 是一个 JS 对象, 里面包含了以下属性
// method: 请求方法
// url: 请求路径
// body: 请求的正文数据
// contentType: 请求正文的格式
// callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
function ajax(args) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
    if (xhr.readyState == 4) {
        args.callback(xhr.responseText, xhr.status)
    }
    }
xhr.open(args.method, args.url);
if (args.contentType) {
    xhr.setRequestHeader('Content-type', args.contentType);
}
if (args.body) {
    xhr.send(args.body);
} else {
    xhr.send();
}
}
// 调用该函数
ajax({
method: 'get',
url: '/info',
callback: function (body, status) {
console.log(status);
console.log(body);
}
});

HTTPS协议

HTTPS 也是一个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层.HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输过程中出现一些被篡改的情况。

什么是加密？

加密就是把明文 (要传输的信息)进行一系列变换, 生成密文 .
解密就是把密文再进行一系列变换, 还原成明文

在这个加密和解密的过程中, 往往需要一个或者多个中间的数据, 辅助进行这个过程, 这样的数据称为密钥。

HTTPS 的工作过程

引入对称加密

对称加密其实就是通过同一个 "密钥" , 把明文加密成密文, 并且也能把密文解密成明文。

引入非对称加密

非对称加密要用到两个密钥, 一个叫做 "公钥", 一个叫做 "私钥"。

公钥和私钥是配对的. 最大的缺点就是运算速度非常慢。

公钥：通过私钥生成，给别人用，开放的

私钥：自己用（可以是客户端也可以是服务端）

注：两者都可以加密，也可以解密

引入证书

在客户端和服务器刚一建立连接的时候, 服务器给客户端返回一个证书。这个证书包含了刚才的公钥, 也包含了网站的身份信息。当客户端获取到这个证书之后, 会对证书进行校验(防止证书是伪造的)。

总结

HTTPS 工作过程中涉及到的密钥有三组

第一组(非对称加密): 用于校验证书是否被篡改. 服务器持有私钥(私钥在注册证书时获得), 客户端持有公钥(操作系统包含了可信任的 CA 认证机构有哪些, 同时持有对应的公钥). 服务器使用这个私钥对证书的签名进行加密. 客户端通过这个公钥解密获取到证书的签名, 从而校验证书内容是否是篡改过.（为了让客户端拿到第二组非对称加密的公钥）
第二组(非对称加密): 用于协商生成对称加密的密钥. 服务器生成这组私钥-公钥对, 然后通过证书把公钥传递给客户端. 然后客户端用这个公钥给生成的对称加密的密钥加密, 传输给服务器, 服务器通过私钥解密获取到对称加密密钥.（为了让客户端把这个对称密钥传给服务器）
第三组(对称加密): 客户端和服务器后续传输的数据都通过这个对称密钥加密解密

半夏而凉

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
HTTP协议与HTTPS协议

bodyform表单格式，json格式，form-data格式bodyjson格式HTTPS工作过程中涉及到的密钥有三组用于校验证书是否被篡改.服务器持有私钥(私钥在注册证书时获得),客户端持有公钥(操作系统包含了可信任的CA认证机构有哪些,同时持有对应的公钥).服务器使用这个私钥对证书的签名进行加密.客户端通过这个公钥解密获取到证书的签名,从而校验证书内容是否是篡改过.（为了让客户端拿到第二组非对称加密的公钥）（为了让客户端把这个对称密钥传给服务器）httpshttps。...
复制链接

扫一扫