AJAX入门
目录
什么是AJAX?
怎么用AJAX?
axios 使用
语法
打开idea创建Web项目，具体代码如下
什么是AJAX?
定义：我认为AJAX就是 获取服务器数据，并显示在浏览器中
怎么用AJAX?
1 先使用axios 库 ，与服务器进行数据通信
2 在学习XMLHttpRequest 对象的使用，了解Ajax底层原理
本篇博客，介绍第一点：使用axios 库 ，与服务器进行数据通信
原因
1 使用广：在之后做Vue,React项目，都会使用到axios
2 使用简单，方便理解
axios 使用
语法
1 引入 axios .js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2 使用axios 函数
- 传入配置对象
- 再使用.then回调函数，接受结果，并作后续处理
需求：请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址：https://hmajax.itheima.net/api/province
如下图所示：来自黑马服务器的省份信息
打开idea创建Web项目，具体代码如下
1 首先跟axios库建立连接：
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2 其次 才可以使用axios函数 与获取省份数据服务器建立连接：https://hmajax.itheima.net/api/province
3 .then:建立连接后，得到数据<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <p>41111111</p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!--首先跟axios库建立连接：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js其次 才可以使用axios函数 与获取省份数据服务器建立连接：https://hmajax.itheima.net/api/province.then:建立连接后，得到数据--> <script>axios({url:'https://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 在控制台打印省份数据}) </script> </body> </html>点击tomcat服务器运行
浏览器显示：
鼠标右击检查，选择控制台
鼠标点击 object,选择data-list
通过控制台的展示，我们就知道：我们已经成功的从服务器得到省份数据并展示到浏览器中