AJAX

Asynchronous JavaScript and XML 异步 JavaScript 和 XML

它不是新编程语言，不是框架，只是一套浏览器原生技术，用来：在不刷新整个网页的情况下，跟后台服务器交换数据、更新网页局部内容。是让浏览器与服务器进行数据通行的技术

一. HTTP

HyperText Transfer Protocol 超文本传输协议

互联网所有数据传输的规矩、规则、标准。

1.请求报文（浏览器—>服务器）

行 请求方式 请求utl路径 http协议版本

头 以键值对的格式携带的附加信息

空行

体 发送的资源

2.响应报文（服务器—>浏览器）

行 协议版本 状态码 状态描述文本

头 以键值对的格式携带的附加信息

空行

体 返回的资源

状态码

二.axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1.url查询参数

语法：http ：//fsfkjdjf/ss/ssdsd？参数名1=值1&参数名2=值2

就是---------

axios({
  url:网址，
  params:{  //查询参数
     参数名：值
  }
}).then(result=>{
   //对服务器返回的数据左后续处理
})

2.提交数据

axios({
  url:网址;
  method:'请求方法';
  data:{      //提交数据
    参数名:值
  }
}).then(result=>{
  //对服务器返回的数据左后续处理
})

3.请求方法

4.错误处理

axios({
  //请求选项
}).then(result=>{
  //处理数据
}).catch(error=>{
  //处理错误数据
})

catch处理的错误数据是http请求不正常的，对于业务内容的判断还是要写在then里面来看的

三.接口文档

由后端提供的描述接口信息的文档

1.传参位置

query参数----params

body请求体----data

header请求头-----headers

url路径参数-----直接写url里

2.axios.defaults.baseURL=“服务器地址”，能设置全局默认请求地址前缀

四.form-serialize插件

用来快速获取多个表单（想要被插件收集，必须具备name属性）

const form=document.querySelectoe("表单")
const data=serialize(表单,{hash:true,empty:reur})
  
//   hash 设置获取数据结构   
           -true js对象
           -false 查询字符串
//   empty 设置是否获取空值

五.Bootstrap弹窗

属性控制显示弹窗

-------------- (点击按钮**不需要判断、不需要校验、不需要拿数据**，点了就直接弹 )这个时候用

1.引入bootstrap.css和bootstrap.js

<link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

2.准备弹窗标签，确认结构

3.通过自定义属性，控制弹窗的显示和隐藏

<button data-bs-toggle="modal" data-bs-target="css选择器">
  //显示弹框
</button>
<button data-bs-dismiss="modal">关闭弹窗</button> 

js控制显示弹窗

//创建对象
const modalDom=document.querySelector("css选择器")
const modal=new bootstrap.Modal(modalDom)
//显示弹窗
modal.show()
//隐藏弹窗
modal.hide()

链接要放在自己写的css或者js文件的前面，注意，在写自己的样式时，尽量不要用元素选择器，对于类名的命名，同样也需要注意

六.图片上传（浏览器–>服务器）

1，获取用户选择的图片文件

2.使用FormData携带图片文件

const fd=new FormData()
fd.append(参数，值)

3.提交到服务器，然后从服务器获取到url，显示图片

4.让图片长久保存

1.localStorage（没有时间限制）
2.sessionStorage（临时保存，在关闭窗口或标签后将删除这些数据）
不论是localStorage还是sessionStorage，了使用的API都相同（以localStoeage为例）
   1.localStorage.setItem(key,value)保存数据
   2.localStorage.getItem(key)读取数据
   3.localStoragr.removeItem(key)删除单个数据
   4.localStorage.clear()删除全部数据
   5.localStorage.key(index)得到某个索引的key

七.ajax原理—XMLHTTPRequest

const xhr=new XMLHTTPReuqest();//1.创建XMLHTTPRequest对象
xhr.open("请求方法"，"请求url网址");//2，配置请求方式和请求网址
xhr.addEventListener("loadend",()=>{
  console.log(xhr.response);//3.监听loadend事件，接收响应结果
})
xhr.send();//4，发起请求

注：

1，监听loadend事件返回的响应结果返回的是json字符串，需要用 “<font style="background-color:#FBDE28;">JSON.parse(返回的json字符串)</font>”这句把json字符串变成js对象

---

//当查询参数特别多的时候，就可以用以下方法

const paramsObj=new URLSearchParams({//1.创建一个URLSearchParams对象
  参数名1：值1，
  参数名2：值2；
})
const queryString=paramsObj.toString()//2，生成指定格式查询参数

---

八.Promise

Promise对象用于表示一个异步操作的最终完成（或失败）及其结果，它时专门用来解决原生异步回调地狱问题

const p=new Promise((resolve,reject)=>{
  //2，执行异步任务-并传递结果
  //成功调用：resolve（值） 触发then（）执行
  //失败调用：reject（new error（值）） 触发catch（）执行
})//1.创建对象
p.then(result=>{  //3.接受结果
  
}).catch(error=>{
  
})

console.log(p)//可查询状态

promise的三种状态

九.同步代码与异步代码

十 token

const token=localStorage.getItem("token")
if(!token){//没有token令牌字符串，则强制跳转登陆页面
  location.href="强制跳转页面的地址"
}

请求拦截器

//全局请求拦截器
axios.interceptors.request.use(funvtion(config){//axios的拦截器再去服务器的路上要使用（成功函数，失败函数）
  let token=localStorage.getItem("token")//从浏览器本地储存里取出token字符串
  if(token){//如果“仓库”里有token字符串
    config.headers.Authorization=`Bearer ${token}`//给当前请求的请求头，添加一个叫做Authorization的字段
  }
  return config//把修改好的请求配置返回给axios，让他带着加好的token继续发送请求
},function(error){//网断，跨域等情况
  return Promise.reject(error)//让catch接收错误
})

interceptors是 axios 里的一个拦截器对象，它的作用就是在请求发出去之前、或者响应回来之后，做统一的 “预处理 / 后处理”

localStorage.setItem("键名"，"值")//存token字符串
localStorage.getItem("键名")//取token

---

响应拦截器

在服务器到then/catch之前，需要先经过响应拦截器（对响应结果统一处理）

axios.interceptors.response.use(function(response){
  //2xx范围内都会触发这个成功函数
  return response//then会顺利拿到数据
},function(error{
  if(error && error.response && error.response.status===401){
    //超出2xx范围都会触发这个错误函数
    localStorage.clear()
  }
  return Promise.reject(error)
})