HTTP使用指南 ｜ 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第5天
一、本堂课重点内容：
- HTTP 协议的基本定义、主要特征、发展历程、报文结构
- 动态资源、登录的场景分析
- HTTP协议实战：浏览器、Node，协议拓展：通信方式
- 网路优化手段
二、详细知识点介绍：
初识HTTP
TCP协议的特点是：面向连接、点对点(一对一)、可靠交付、面向字节流、拥塞控制四个方面
HTTP概念
- Hyper Text Transfer Protocol(超文本传输协议)
- 应用层协议。基于TCP协议
- 请求响应
- 简单可扩展
- 无状态(没有记忆能力，每个要求都是独立的)
协议分析-报文
| GET | 请求一个指定资源的表示形式.使用GT的请求应该只被用于获取数据 |
|---|---|
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
状态码：
- 2000K-客户端请求成功
- 301-资源（网页等）被永久转移到其它URL
- 302-临时跳转
- 401 Unauthorized-请求未经授权
- 404-请求资源不存在，可能是输入了错误的URL
- 500-服务器内部发生了不可预期的错误
- 504 Gateway Timeout-.网关或者代理的服务器无法在规定的时间内获得想要的响应
RESTful API
一种API设计风格
- 每一个URI代表一种资源
- 客户端和服务器之间，传递这种资源的某种表现层
- 客户端通过HTTP method,对服务器端资源进行操作，实现"表现层状态转化"
协议分析-发展
- HTTP/2概述：更快、更稳定、更简单
HTTP/2连接都是永久的，而且仅需要每个来源一个连接
帧：HTTP/2通信的最小单位。每个帧都包含帧头，至少也会标识出当前帧所属的数据流
消息：与逻辑请求或响应消息对应的完整的一系列帧
数据流：已建立的连接内的双向字节流，可以承载一条或多条消息
控制流：阻止发送方向接收方发送大量数据的机制
- HTTPS概述
经过TSL/SSL加密
对称加密：加密和解密都是使用同一个密钥
非对称加密：加密和解密需要两个不同的密钥，公钥和私钥
场景分析-静态资源
方案：缓存 + CDN + 文件名hash
- CDN 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
场景分析-登录
跨域解决方案
- CORS
- 代理服务器(同源策略是浏览器的安全策略，不是HTTP的)
- Iframe(不推荐，诸多不便)
场景分析-跨域
-
CORS
-
域请求：获取服务端是否允许该跨源请求
-
相关协议头
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Credentials
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Request-Method
- Access-Control-Request-Headers
- Origin
三、实践练习例子：
function request(option) {
if (String(option)!='[object object]')return undefined
option.method option.method option.method.toUpperCase():'GET'
option.data option.data || {}
var formData =[]
for (var key in option.data) {
formData.push(''.concat(key,'='option.data[key]))
}
option.data formData.join('&')
if (option.method ==='GET') {
option.url +location.search.length ==0 ''.concat('?',option.data)''.concat('&',
option.data)
}
var xhr = new XMLHttpRequest()
xhr.responseType option.responseType json'
xhr.onreadystatechange function () {
if (xhr.readyState ==4) {
if (xhr.status ==200) {
if (option.success &typeof option.success ==='function') {
option.success(xhr.response)
}
} else {
if (option.error &typeof option.error =='function') {
option.error()
}
}
}
}
xhr.open(option.method,option.url,true)
if (option.method ==='POST') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'
}
xhr.send(option.method ==='POST'option.data null)
}
//全局配置
axios.defaults.baseURL "https://api.example.com";
//添加请求拦截器
axios.interceptors.request.use(function (config) {
//在发送请求之前做些什么
return config;
},function(error）{
//对请求错误做些什么
return Promise.reject(error)；晾5882
});
//发送请求
axios({
method:get'
url:'http://test.com',
responseType:stream
}).then(function(response)
response.data.pipe(fs.createWritestream('ada_lovelace.jpg')
});
四、课后个人总结：
- x项目实战的地方要多理解，多敲
- 与JavaScript中的要总结比较
