核心 XMLHttpRequest
XMLhttpRequest对象用于与服务器交互 通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据；这允许网页在不影响用户操作的情况下，更新页面的局部内容
let xhr = new XMLHttpRequest();
--xhr.open(method, url, flag)
method 请求方式
url 请求地址
--xhr.onreadystatechange
当readyState属性发生变化时触发
xhr.onreadystatechange = function(){}
--xhr.readyState 请求的状态码
| 代理被创建，但尚未调用 open() 方法。 | |
| | |
| | |
| | 下载中； |
| | 下载操作已完成。 |
--xhr.response 响应对象
--xhr.responseText 响应文本字符串
--xhr.responseType 响应类型
--xhr.status 响应状态
100-199 信息提示
200-299 成功
300-399 重定向
400-499 客户端错误
500-599 服务器错误
--xhr.statusText 响应状态文本
--xhr.timeout 请求的最大请求时间 单位毫秒
--xhr.withCredentials 用来指定跨域Access-Control请求是否应该带有授权信息
--xhr.send() 发送HTTP请求
同源策略 跨域
同源：协议相同、域名相同、端口相同
客户端要想正常访问服务器，必须遵守同源策略
3种行为受限：
1.cookie localStorage和indexDB无法获取
2.DOM无法获得
3.AJAX请求不能发送
----CORS跨域
CORS需要浏览器和服务器同时支持
----跨域请求
浏览器将跨域请求分为2类：简单请求和非简单请求
简单请求：
1.请求方式是head、get、post 3种之一
2.http头信息不超出一下几种字段：accpet accept-language Content-Language Last-Event-ID Content-Type(仅限于3个值 application/x-www-form-urlencoded multipart/form-data text/plain)
非简单请求：对服务器有特殊要求的请求，例如请求方式是PUT或DELETE，或者Content-Type字段的类型是application/json
非简单请求的CORS请求会在正式通信之前，增加一次HTTP查询请求，称为"预检请求"
----服务端设置允许跨域
res.setHeader('Access-Control-Allow-Origin', '*') 设置允许跨域的域名
res.setHeader('Access-Control-Allow-Headers','x-requested-with,Authorization,token,content-type') 设置允许的header类型
res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS,PATCH') 设置跨域允许的请求方式
res.setHeader('Access-Control-Max-Age', '172800') 设置本次预检请求的有效期 单位秒 在此期间不用发出另一条预检请求
res.setHeader('Access-Control-Allow-Credentials', 'true') 设置是否可以使用凭证进行实际请求
----JSONP
服务器与客户段跨源通信的常用方法
同源策略小细节：不可以跨域进行脚本请求数据，但是可以通过资源引入和客户端页面不同源的资源文件 资源的请求都默认为GET请求
基本思想：网页通过添加一个' '元素，向服务器请求JSON数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来
1.同源策略无法完全限制link img script等的src资源请求
2.资源src对于服务器来说 就是一条get方式的请求
3.拼接一个script标签，从而触发对指定地址的GET请求
4.服务端根据url上的query部分识别前端的回调函数callback名称
5.服务端返回对应的回调函数名称及参数callback(数据)并写入script标签作为js脚本执行
6.前端预先准备好对应的回调函数 用来接收返回的数据
Cookie验证
----cookie属性
Name 键值对的key
Value 键值对的value
Domain 可以访问该cookie的域名
Path 指定可访问cookie的目录
Expires / Max-Age 指定过期时间 如果不设置过期时间 当浏览器关闭的时候cookie就会消失
HttpOnly 如果在Cookie中设置了HttpOnly属性，那么通过程序将无法获取到cookie信息，能够防止XSS攻击
Secure 该cookie是否仅被使用安全协议传输
SameSite 用来放置CSRF攻击和用户追踪
----获取cookie
----设置cookie
单个设置
多个设置
设置过期时间
ajax库---axios
axios.request(config)
axios.get(url, [config])
axios.delete(url, [config])
axios.head(url, [config])
axios.options(url, [config])
axios.post(url, [data], [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config])
例如