目录
它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验
同步需要等待返回结果才能继续，异步不必等待
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕
ajax相当于浏览器发送请求与响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验
1.创建ajax对象基于HttpRequest创建HTTP请求
+XML传输内容的数据格式 + HttpRequest网络请求.创建xhr实例
var xhr=new XMLHttpRequest();2.建立连接,打开一个url地址(发送请求前的一些配置)
xhr.open(method,url,async);一般是从服务器中获取数据，但是也可以传参数【取的多，给的少】
一般是给服务器发送数据,基于请求体传数据【取得少，给的多】
双方约定俗称的区别
URL:请求的url地址
async:是否采用异步,默认是true
.3 注册监听 获取服务器与客户端响应的数据 监听请求的过程,在不同的阶段做不同的处理
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&(xhr.status===200||xhr.status===304)){
console.log(xhr.responseText);
}
}区分ajax状态码和http状态码
服务器响的应数据格式
在真实项目中,服务器大多情况下以JSON对象为响应数据格式,当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后拼接的结果展示在页面中
在http请求与响应的过程中,无论是请求参数是响应内容,如果是对象类型,最终都会被转为对象字符串进行传输
JSON.parse()//将json字符串转为json对象ajax状态值（判断请求的）
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化 创造出来xhr实例就是0 (还没有调用open) UNSENT
- 1: 服务器连接已建立 执行open方法后就会由0变成1 OPENED
- 2: 请求已接收 响应头信息已经返回 HEADERS_RECEIVED
- 3: 请求处理中 响应主体信息正在处理 LOADING
- 4: 请求已完成，且响应已就绪 响应主体信息已经返回 DONE
http状态码（判断响应的）xhr.statusText 状态码的描述
- 1xx：信息响应类，表示接收到请求并且继续处理
- 2xx：处理成功响应类，表示动作被成功接收、理解和接受
- 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
- 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
- 5xx：服务端错误，服务器不能正确执行一个正确的请求
- 200: "OK“
- 202:服务器已经接收,但是尚为处理
- 204:服务器处理了请求,但不需要返回任何实体内容
- 206;服务器已经处理了部分GET请求
- 301:永久转移(域名迁移)
- 302:是临时转移(负载均衡)
- 304: 文件未改变，页面缓存
- 305:使用代理
- 400请求参数有误
- 401:无权限访问
- 403:服务器拒绝执行(可能会在响应主体返回)
- 404: 未找到页面,地址错误
- 405请求方式不被允许
- 408请求超时
- 500：后台的问题 未知错误
- 503 服务器超负荷
- 505http版本不支持
4 发送请求send中传递的信息,就是设置请求主体信息
基于请求主体把信息传递给服务器，但是对于传输的数据有格式的要求 推荐一款接口测试工具！POSTMAN
shr.send()xhr.open("get","http://www.baidu.com?name=zhangsan&age=18")//设置请求参数格式类型(post请求必须要设置)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send("name='lily'&age=18");在http请求和响应过程中传递的数据块叫报文,包括要传递的数据和一些附加信息,这些信息要遵守规定好的格式
Ajax的其他方法：
Ajax配置信息：
设置其余的配置信息：请求头信息 & 超时 & 跨域资源共享 ...{必须在OPEN之后}
发送请求「send中传递的信息，就是设置的请求主体信息」 基于请求主体传递给服务器的数据格式是有要求的「Postman接口测试工具」
默认：text/plain;charset=UTF-8
1.form-data 主要应用于文件的上传或者表单数据提交 不能使用get请求
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
let fd = new FormData;
fd.append('lx', 0);
fd.append('name', 'xxx');
xhr.send(fd);2. x-www-form-urlencoded格式的字符串 格式：“lx=1&name=xxx” 「常用」
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
实现对象和urlencoded格式字符串之间的转换
Qs库：$npm i qs
Qs.stringify 把对象变为urlencoded格式
parse: 把urlencoded格式 转为对象3.raw字符串格式
4.binary进制数据文件「buffer/二进制...」
EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
5.GraphQL（新增的，类似于查询语句）
POSTMAN从入门到精通系列（二十七）：使用GraphQL_u012014531的博客-CSDN博客
GET传递的信息不如POST多，因为URL有长度限制「IE->2KB」，超过这个长度的信息会被自动截掉，这样导致传递内容过多，最后服务器收到的信息是不完整的！！POST理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报传输超时的错误，所以实际上我们会自己手动做限制！！
GET会产生缓存「浏览器默认产生的，不可控的缓存」：两次及以上，请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息！！xhr.open('GET', './1.json?lx=1&name=xxx&_'+Math.random())
在请求URL的末尾设置随机数，以此来清除GET缓存的副作用
POST相对于GET来讲更安全一些：GET传递的信息是基于URL末尾拼接，这个随便做一些劫持或者修改，都可以直接改了，而POST请求主体信息的劫持，没那么好做！！但是“互联网面前，人人都在裸奔”！！所以不管什么方式，只要涉及安全的信息，都需要手动加密「因为默认所有的信息传输都是明文的」！！
// 创建一个XHR对象{AJAX实例对象}
let xhr = new XMLHttpRequest;
// 打开一个URL地址{发送请求之前的配置信息}
xhr.open('GET', './data.json');
// 设置其余的配置信息：请求头信息 & 超时 & 跨域资源共享 ...{必须在OPEN之后}
xhr.setRequestHeader('name', 'tanghanlu');
xhr.timeout = 60000;
xhr.withCredentials = true;
// 监听XHR状态 & HTTP状态码
xhr.onreadystatechange = () => {
let {
status,
statusText,
readyState
} = xhr;
// 基于HTTP状态码验证是否请求成功「以2/3开始的都是成功」
if (status >= 200 && status < 400) {
if (readyState === 2) {// 响应头信息已经拿到
let serverTime = xhr.getResponseHeader('date'); //GMT 格林尼治时间
serverTime = new Date(serverTime); //把格林尼治时间变为北京时间
console.log('服务器时间：', serverTime);
}
if (readyState === 4) {
let result = xhr.responseText;
result = JSON.parse(result);
console.log('响应主体信息：', result);
}
return;
}
// 获取数据失败：提示 && 移除监听
console.log(`很遗憾，当前请求失败，请稍后再试！`, status, statusText);
xhr.onreadystatechange = null;
};
// 发送AJAX请求
// xhr.send('name=hanlu&sex=0&age=32')//post
xhr.send();//get
ajax请求限制
ajax只能向自己的服务器发送请求,比如有一个A网站,有一个B 网站,A网站中的HTML文件只能向A网站服务器,发送Ajax请求,b网站中的HTML文件只能向b网站发送ajax请求,但是a网站不能向b网站发送ajax请求,同理b网站也不能向a网站发送ajax请求
浏览器默认存在安全访问限制：如果从当前源向另外一个源发送数据请求，默认是不允许的
什么是同源
如果两个页面的拥有相同协议,域名和端口那么两个页面就属于同一个源,其中有一个不相同就是不同源
同源政策的目的
.如何区分是同源还是跨域?
浏览器默认存在安全访问限制：如果从当前源向另外一个源发送数据请求，默认是不允许的
WEB页面：http://127.0.0.1:5500
数据接口：https://www.jianshu.com:443两个地址对比，如果“协议、域名、端口号”三者有一个不一致，都是跨域请求
跨域错误：Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域请求在项目中的场景和意义？
@1 开发时候是跨域的，但是项目部署上线后是同源的「现在很少了」
@2 开发和部署的时候都是跨域的
4.跨域解决方案？
其余方案：postMessage、document.domain+iframe、window.name、location.hash...【==不常用了==】
方案：CROS跨域资源共享
原理：不允许跨域是因为，当前WEB页面的“源地址 origin”向服务器发送请求的时候不被允许，所以如果想解决这个问题，只需要“服务器端”设置为允许即可Access-Control-Allow-Origin...
服务器（server.js）：
设置允许源 Access-Control-Allow-Origin
+ 允许所有源，这样不安全，所以是不允许携带跨域资源凭证「例如：cookie」
+ 允许单一源 这样是可以携带资源凭证的
设置是否允许携带跨域资源凭证 WAccess-Control-Allow-Credentials
方案 JSONP
原理：==利用ajax/fetch存在域的限制(浏览器的安全策略)，但是`script/link/img...`不存在域的限制
而JSONP的原理就是基于`<script src="接口请求地址">`向服务器发送请求，绕过域的限制，实现跨域数据访问。
==缺点：==JSONP只能发送GET请求，因为script请求都是get请求，不支持POST请求
==具体操作：==
==特点：==JSONP需要服务器端的支持：服务器端存在对应的**callback函数**
PROXY跨域代理&nginx反向代理：代理服务器
==原理：**服务器与服务器之间不存在跨域问题**==，客户端启动代理服务器（webpack/node）
- ==过程：==
跨域身份验证的三种方案？
方式一：==登录态校验==
方式二：==客户端设置cookie==：会话存储
缺陷：
- 方式三：==使用Token[常用]==
