1.什么是AJAX?
使用浏览器的 XMLHttpRequest 对象 与服务器通信
2.简单实现,使用Axios库(步骤):
(1).引入 axios.js 文件到自己的网页中:
axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
(2).语法:
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})
(3).获取获取省份列表数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX概念和axios使用</title>
</head>
<body>
<!--
axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
省份数据地址：http://hmajax.itheima.net/api/province
目标: 使用axios库, 获取省份列表数据, 展示到页面上
1. 引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 2. 使用axios函数
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
// 好习惯：多打印，确认属性名
console.log(result.data.list)
console.log(result.data.list.join('<br>'))
// 把准备好省份列表，插入到页面
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>
补充:URL 的组成:协议，域名，资源路径
axios 如何携带查询参数(url参数)?
使用 params 选项即可
axios({
url: '目标资源地址',
params: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
axios 提交数据到服务器
语法:
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
data传递的数据到后端默认为JSON数据
使用 axios 的 catch 方法，返回了请求响应的错误
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})