day5

HTTP使用指南 ｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第5天

一、本堂课重点内容：

1. HTTP 协议的基本定义、主要特征、发展历程、报文结构
2. 动态资源、登录的场景分析
3. HTTP协议实战：浏览器、Node，协议拓展：通信方式
4. 网路优化手段

二、详细知识点介绍：

初识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中的要总结比较

五、引用参考：

• HTTP概述
• HTTP实战