本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder、VS code中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML、CSS、JavaScript系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
**点赞关注不迷路！**您的点赞、关注和收藏是对小编最大的支持和鼓励！
温馨提示：全文内容较长，可先收藏再食用！文章可作为学习AJAX的笔记，框架和主要内容来源于B站UP主-黑马程序员的视频：黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖小编进行了整理并对一些内容进行了补充和注释，非商用，如有侵权，必删改！
系列文章目录
AJAX入门-常用请求方法和数据提交、HTTP协议-报文、接口文档、案例实战
目录
[一、环境准备-安装Visual Studio Code、Chrome](#一、环境准备-安装Visual Studio Code、Chrome)
[2、VS Code 基本操作](#2、VS Code 基本操作)
[(1)下载两个插件： open in browser & chinese(simplified)](#(1)下载两个插件： open in browser & chinese(simplified))
[(2)重启VS code](#(2)重启VS code)
[3.使用 axios](#3.使用 axios)
一、环境准备-安装Visual Studio Code、Chrome
1、下载软件
可以点击链接进行下载，或者进入官网自行下载
通过网盘分享的文件：软件包.zip
链接: https://pan.baidu.com/s/187ALjX75P-416UDzW7FOhA 提取码: fg5w
2、VS Code 基本操作
(1)下载两个插件： open in browser & chinese(simplified)
(2)重启VS code
输入Reload Window
(3)将谷歌设置为默认浏览器
二、AJAX
1.什么是AJAX
2.怎么用AJAX
3.使用 axios（案例）
引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
目标资源地址：http://hmajax.itheima.net/api/province
案例：
html
<!DOCTYPE html>
<html>
<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>01.AJAX概念和axios使用</title>
</head>
<body>
<!-- // axios库地址:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
// 省份数据地址： http://hmajax.itheima.net/api/province
// 目标：使用axios库，获取省份列表数据，展示到页面上
1.引入axios函数 -->
<script src="http://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)
})
</script>
</body>
</html>在浏览器中打开：
在此基础上，进一步编写：
html
<!DOCTYPE html>
<html>
<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>01.AJAX概念和axios使用</title>
</head>
<body>
<!-- // axios库地址:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
// 省份数据地址： http://hmajax.itheima.net/api/province
// 目标：使用axios库，获取省份列表数据，展示到页面上
1.引入axios函数 -->
<!-- //加入P标签 让列表显示出来 -->
<p class="my-p"></p>
<script src="http://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)
//数组转字符串，指定拼接符，用join方法
console.log(result.data.list.join('<br>'))
//把准备好的省份列表，插入到页面
document.querySelector('.my-p').innerHTML =result.data.list.join('<br>')
})
</script>
</body>
</html>