1.什么是Ajax
Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。 它的英文全称是 Asynchronous Javascript And XML，简称
Ajax。
ajax需要基于浏览器，意味着有浏览器才会有ajax,没有浏览器就没有我们所说的ajax静态资源(网页，图片)不需要ajax，动态数据才需要ajax
在前端领域，服务器可以看出一台电脑，客户端就是 浏览器
生活中的Ajax ：
1.动态检测用户名是否被占用
2.动态加载搜索的建议列表
3.局部刷新网页的数据
2.Ajax请求方式
5种请求方式：
1、POST 向服务器新增数据
2、GET 从服务器获取数据
3、DELETE 删除服务器上的数据
4、PUT 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
扫描二维码关注公众号，回复： 13837939 查看本文章
5、PATCH 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
3.axios 库
axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
在后面的 Vue、React 课程中都会用到 axios 来请求数据。
中文官网地址：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js 英文官网地址：axios - npm
4.Axios API
可以向
axios传递相关配置来创建请求ajax 面向文档编程
只有
url是必需的。如果没有指定method，请求将默认使用GET方法。
4-1 基本语法如下：
执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});执行 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));4-2 axios(config)
// 1.引入资源,引入之后，就会在全局挂载一个axios实例，我们发请求就可以直接使用这个实例
<script src="./lib/axios.js"></script>
// 2.axios({ 配置 }).then(请求成功的回调函数)
axios({
method: '请求的类型', // method:请求方式，如get,post,这个方式一定要参照接口文档
url: '请求的URL地址' // url:必须的，如果没有报错，它是请求地址--服务器资源地址
}).then((result) => { // result 可以顺便一个
// then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})基于 axios 发起 GET 请求:
测试 GET 请求的 URL 地址为 http://www.zeng.com:3006/api/getbooks
注意：本次测试是模拟接口，具体接口看后端给的接口文档
axios({
method: 'GET',
url: 'http://www.zeng.com:3006/api/getbooks'
}).then((result) => {
console.log(result)
})
// result:
{
config: { url: 'http://xxxx', ss: 'xx' },
data: { code: 0, message: '成功', data: ['xx', 'yy'] },
headers: { 'content-length': '1054', },
request: { readyState: 4 },
status: 200,
statusText: 'OK'
}
// result是一个对象 result.data 才是服务器返回的结果 但data里面还有对象数据
// 可以使用解构对函数参数传参
then(({data}) => { console.log({data})})GET 请求的查询参数
刚才查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过
params选项来指定查询的参数：可以查询多个或单个
// 第一种传参写法 ：parmas 用于查询多个参数
axios({
method: 'get',
url: 'http://www.zeng.com:3006/api/getbooks',
params: {
id:1, // 表示获取 id=1 的图书
bookname: 'love' // 表示获取 id=1 并且 bookname=love 的图书
}
}).then((result) => { console.log(result) })
`细节：
1.params固定写死
2.params是一个对象，里面的每组键值对就是一个一个的参数和值
3.可以传递多个参数`
// 第二种写法get方式的参数也可以在url中拼接，格式为： ?参数=值&参数=值
url: 'http://www.zeng.com:3006/api/getbooks?id=10338',
`细节：
1.不能在参数中写空格，除非真的需要
2.字符串不用加引号
3.？是必需的
4.参数名一定要参照文档的说明，不能随意乱写`基于 axios 发起 POST 请求
注意点：GET请求提交数据用 params ， POST请求提交数据用 data
put,patch,post 的参数需要使用data来设置
完整地址：服务器地址 + 资源路径
axios({
method: 'POST',
url: 'http://www.zeng.com:3006/api/addbook',
// 请求体 data
data: { // POST 是新增数据，使用data添加属性和属性值
bookname: '水浒传',
author: '施耐庵',
publisher: '顺义出版社'
}
}).then(result => {
console.log(result.data.message) // 提示是否添加成功
})
`result.data.status
status=0 说明当前请求成功 status=1说明请求不成功`5.axios所支持的参数格式
对象：{key:value,key:value},axios内部会进行转换为key=value&key=value
字符串： key=value&key=value&key=value....
json字符串：'{"key":"value","key":"value"}'
formdata:new Formdata