AJAX知识整理
ajax
认识ajax
AJAX是浏览器与服务器进行数据通信的技术
AJAX原理：AJAX原理指的是XMLHttpRequest（XHR）这个对象
AJAX用法
axios.js是js库，一个在线的js库地址，可以直接使用
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
引入 axios js文件：
如果不能下载可以去里面把内容复制贴贴到自己的.js
先引用axios.js （一个js库），再使用axios函数传入配置对象，再用.then回调函数接受结果并处理后续内容
axios({
url:’目标资源地址’
}).then(
)
axios的调用
axios({配置项})
.then(res==>{})//返回成功的结果
.catch(err=>{})//返回失败的结果
配置项:
url:’请求地址”
method:’请求方式 GET获取 POST提交数据”
params:{键:值,键:值}查询参数/url参数=→>如果接口文档写的是Query参数就用params
data: {键:值,键:值}请求体参数提交参数=>如果接口文档写的是 body参数就用data
result.data.data可以解构成const{data:{data}}=result
例子
目标：请求数据，返回数据，并将页面渲染
首先引入axios.js文件，然后axios( )函数调用，里面（ { } ）写没对象的目标资源地址，在外面用.then方法处理异步请求的结果，使用result这个参数表示服务器返回的结果，result.data.data返回数组（具体几个data自己试试）最后data.join把数组反回成字符串
后端返回的结果都在result.data里面
异步请求
在编写程序时，代码的执行通常是按照顺序一步步执行的，即同步执行。但是，有时候我们会遇到一些需要等待一段时间才能得到结果的操作，比如从网络获取数据、读取文件等。在这种情况下，如果按照同步方式去执行，程序就会被阻塞，直到这些操作完成，才能继续执行后面的代码，这样就会造成程序的效率很低。
为了解决这个问题，引入了异步编程的概念。异步编程允许在执行某些操作时，程序可以继续执行后面的代码，而不必等待操作完成。当操作完成后，系统会通知程序，然后执行相应的回调函数来处理结果。
在Web开发中，常见的异步操作包括从服务器获取数据、发送网络请求、处理用户输入等。JavaScript中的异步操作通常使用回调函数、Promise对象、async/await等方式来处理。
在你提到的axios的.then()方法中，.then()就是用来处理异步请求的一种方式。它的作用是在异步操作完成后执行传入的回调函数，处理异步操作的结果。
url
url：统一资源定位符，简称网址，如同在网络上的门牌，作为万维网的地址，用于标识网络上的资源（网页资源，图片资源，数据资源）
组成：比如http://hmajax.itheima.net/api/province:
http：协议（钥匙）
hmajax.itheima.net：域名（地址）
/api/province：资源路径（物品位置）
http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式（浏览器以指定格式传输数据到服务器，服务器以指定格式解析服务器返回的资源）
域名：标记服务器在互联网中的方位
资源路径：标记资源在服务器下的具体位置
查询参数params
使用axios提供的params选项
axios在运行时，参数名和值会拼接到url?参数名=值
把？后面的要查询的参数名和值写道params里面
axios({url:’目标资源地址’
params:{
参数名:值
}
}).then(result = >{
//对服务器返回的参数做后续处理
})
注意：多打印，确认属性名，以便准确取到数据
常用请求方法
get:获取数据
post:提交数据
put：修改数据（全部）
patch：修改数据（部分）
delete：删除数据
post场景：将数据保存到服务器上
method = ‘post’ (不区分大小写）
通过axios post提交案例
不要省略请求方式，哪怕是默认的
axios({
url : ‘ ‘ ,
method: ‘ ‘ ,
params: { , } , //查询参数
data : {//提交参数
uname: ‘ ‘ ,
password: ‘ ‘ ,
}
}).then(res => {
alert(res.data.message)
})
处理错误信息
console.log(error.response.data.message)
接口文档
接口文档：后端提供的描述接口的文章。后端把数据写到接口文档里，前端根据接口文档的文章进行数据交互
接口：使用AJAX和服务器通讯时，使用的url，请求方法以及参数
在F12网络里面能看到你给服务器的数据和服务器给你的数据
form-serialize插件：用于快速收集表单元素的值
官网：
https://www.npmjs.com/package/form-serialize
使用前先在引入插件|
表单和要收集的数据一定要有name属性，否则无法获取数据!!!
要把插件引入到代码中，使用data=serialize函数
第一个参数要写你要手机的表单form，如document.querySelector(‘.from表单的类名’)
注意以下代码写的位置！
document.querSelector(‘.btn’).addEventListener(‘click’,()=>{
const data = serialize(document.querySelector(‘.from表单的类名’, { hash: true, empty: true })
//会得到对象格式的数据，并且能够获取为空的input，最常用
console.log(data)
})
如：
const form = document.querySelector(‘.login-form’)
const data = serialize(form, { hash: true, empty: true })
console.log(data)
//得到 {username: ‘itheima007’, password: ‘7654321’}
const { username, password } = data
// 获取用户名和密码用上面的方法替代下面这样一个一个获取
// const username = document.querySelector('.username').value
// const password = document.querySelector('.password').value
报文
请求报文
浏览器按照http协议要求的格式向服务器发出的内容
http协议：贵清了浏览器发送及服务器返回内容的格式
组成:
1、请求行：请求方法，url,协议（第一行）
2、请求头：以键值对的格式携带的附加信息（2-n行）
3、空行：分隔请求头，空行之后的是发送给服务器的资源（有的浏览器没有了）
4、请求体：发送的资源
查看方式：
浏览器F12 -控制台-网络-XHR-找到请求（地址资源的最后一个单词），看到标头就是报文，里面有请求报文，把原始选中就能看到。
发送的数据在载荷里，返回的数据在响应里
使用请求报文排查错误：
一定要先打开控制台再去执行操纵（输入数据登录）
输入正确的用户名和密码但是无法登陆：
去找请求报文，先看看请求行对不对，再看看载荷，如果有问题发现后去源代码找到修改
响应报文
服务器按照http协议要求的格式，返回给浏览器的内容
http协议：规定了浏览器发送及服务器返回内容的格式
组成：
1、响应行（状态行）：协议、http响应状态码、状态信息，告诉浏览器服务器给你的是什么样的数据格式（第一行）
2、响应头：以键值对的格式写道的附加信息（2-n行）
3、空行：分割响应头，空行之后的是服务器返回的资源
4、响应体：返回的资源
查看方式：
浏览器F12 -控制台-网络-XHR-找到请求（地址资源的最后一个单词），看到标头就是报文，里面有响应报文，把原始选中就能看到。
返回的数据在响应里，也可以看预览（都在控制台网络里）
http响应状态码
用来表明请求是否成功完成
状态码开头数和对应说明：
1.xx :信息
2xx :成功
3xx :重定向消息
4xx :客户端错误
5xx :服务端错误
主要看2和4，常见：
404：服务器找不到资源
400：客户端错误
同步代码和异步代码
认识
同步代码：逐行执行，原地等待结果后执行下一行
异步代码：地哦啊用后耗时，不原地等待而是继续执行，在将来完成后触发一个回调函数
JS常见异步代码：计时器，事件，AJAX
回调函数地狱：在回调函数中嵌套回调函数，运筹好吃嵌套下去成了回调函数地狱
可读性差，异常无法捕获，耦合性严重，牵一发动全身
上者解决：Promise链式调用
依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束
then()回调函数中的返回值，会影响新生成的 Promise对象最终状态和结果
async函数和await
async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。async和 await关键字让我们可以用一种更简洁的方式写出基于Promise 的异步行为，而无需刻意地链式调用promise
概念:在 async 函数内，使用await关键字取代 then 函数，等待获取Promise对象成功状态的结果值
捕获错误：try{}catch(){}
事件循环
js是单线程的（某一时刻只能执行一行代码），为了让耗时代码不阻塞其他代码执行，设计了事件循环模型
定义:执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环
凡是耗时的异步代码都会放到宿主环境（浏览器）执行后结果给任务队列，等调用栈空闲后会循环带哦用任务队列的代码来执行
宏任务与微任务（两种任务队列）
宏任务:由浏览器环境执行的异步代码
微任务:由JS 引擎环境执行的异步代码
promise.all静态方法
能够把多个小的promise对象合并一个大的promise对象，等所有Promise对象成功进.then回调函数，有一个失败就进入.catch回调函数
token访问权限的令牌
本质是一串字符串
正确登录后由后端签发并返回
用于判断是否有登陆状态等，控制访问权限
常用框架
Bootstrap弹框
功能：不离开房前页面。显示单独内容，供用户操作
如何做：
先找到Bootstrap中文网（百度搜，搜不到用https://www.bootcss.com/ ）
然后进最右边的v5的标签，然后点击进入中文文档
然后到了这里 https://v5.bootcss.com/docs/getting-started/introduction/
在里面左边的树往下找找到compinent（组件）->modal(模态框组件)
点开之后在右边！的树里面找到examples（例子）
例子里面是各种类型的模态框，可以点每个弹框案件看看页面弹出来的弹框是不是你想要的
选好之后复制它的代码然后放到body里面，注意提前在body的上面和下面分别引入.css和.js文件
进入之后运行看看有没有弹框，有的话再进一步修改代码调整模态框
在找到modal文档里的example之后，右侧树往下看有Usage，里面的Via data attributes下面是自定义属性控制，里面的Via JavaScript下面是js方法控制
属性方式控制弹窗显示或隐藏：
先引入.css和.js文件（网上找）创建弹框对象：
通过自定义属性，控制弹框的显示和隐藏：
js方法控制弹窗显示或隐藏：
先引入.css和.js文件（网上找）创建弹框对象：
