AJAX入门 - 技术栈

AJAX入门

等什么君！2024-09-26 11:59

什么是AJAX?

怎么用AJAX?

[axios 使用](#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:建立连接后，得到数据
html 复制代码
<!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>

<script>
    axios({
            url:'https://hmajax.itheima.net/api/province'}).then(result => {

                console.log(result)
    //     在控制台打印省份数据
    })
</script>
</body>
</html>
点击tomcat服务器运行

浏览器显示：

鼠标右击检查，选择控制台

鼠标点击 object,选择data-list

通过控制台的展示，我们就知道：我们已经成功的从服务器得到省份数据并展示到浏览器中