-
HTTP协议与HTTPS协议
目录
HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议。
HTTP协议的工作过程
当我们在浏览器中输入一个 "网址", 此时浏览器就会给对应的服务器发送一个 HTTP 请求. 对方服务器收到这个请求之后, 经过计算处理, 就会返回一个 HTTP 响应。
HTTP协议的格式
HTTP 是一个文本格式的协议. 可以通过 Chrome 开发者工具或者 Fiddler 抓包, 分析 HTTP 请求/响应的细节.
- 行信息 （请求和响应除了行信息其他都一样）
- 头信息
- 空行（作用：http是基于传输层tcp实现的，头信息是可变长度，空行就相当于是 "报头的结束标记", 或者是 "报头和正文之间的分隔符"）
- 正文
HTTP请求（Request）
URL（统一资源定位符）
平时我们俗称的 "网址" 其实就是说的 URL。
格式：协议名://ip或域名:端口号/带层次的路径？查询字符串
- http不带端口号，默认80
- https不带端口号，默认43
- 地址栏没输入带层次的资源路径，默认带/，为该路径中index.html文件
作用：标识网络中的资源（唯一）
认识方法
GET方法
GET 是最常用的 HTTP 方法. 常用于获取服务器上的某个资源。在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求.另外, HTML 中的 link, img, script 等标签, 也会触发 GET 请求。
POST方法
POST 方法也是一种常见的方法. 多用于提交用户输入的数据给服务器。通过 HTML 中的 form 标签可以构造 POST 请求, 或者使用 JavaScript 的 ajax 也可以构造 POST 请求。
★GET和POST的区别
- 语义上，按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
客户端保存数据的一种技术，每次请求都会携带这个数据（通过请求头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 请求
- <input type="text" name="userId">
- <input type="text" name="classId">
- <input type="submit" value="提交">
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 请求
- <input type="text" name="userId">
- <input type="text" name="classId">
- <input type="submit" value="提交">
把上面的method的GET改为POST
主要区别：
- method 从 GET 变成了 POST
- 数据从 query string 移动到了 body 中
通过ajax构造http请求
ajax的特点是可以不需要 刷新页面/页面跳转 就能进行数据传输，在JavaScript可以用ajax构造http请求。
作用：（1）用户体验好，不刷新页面
（2）效率更高，只需传输数据
发送GET请求
ajax代码写在