01-Ajax入门与axios使用、URL知识

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

一、什么是Ajax？

二、如何使用Ajax？

1、先使用axios库，与服务器进行数据通信。

①引入axios.js

②使用axios函数

举例：

三、学习URL

1、为什么要认识url？

2、什么是url？

3、url的组成：协议、域名、资源路径

4、练习

5、总结

一、什么是Ajax？

使用XMLHttpRequest对象与服务器通信。特点是“异步”，在不刷新页面的情况下就能与服务器通信、更新页面。

二、如何使用Ajax？

1、先使用axios库，与服务器进行数据通信。

①引入axios.js

②使用axios函数

传入配置对象
再用.then回调函数接收结果，并做后续处理

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.Ajax概念和axios使用</title>
</head>
<body>
    <p class="my-p">

    </p>
    <!-- 第一步：引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
    </script>
    <script>
        /* 第二步：使用axios语法 */
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(result=>{
            console.log(result)
            //好习惯：多打印
            console.log(result.data.list)
            //将集合对象转为字符串，并将字符串加入标签内
            document.querySelector(".my-p").innerHTML = result.data.list
        })
    </script>
</body>

</html>

效果：

三、学习URL

1、为什么要认识url？

知道url的作用和组成，方便与后端人员沟通。

2、什么是url？

url：统一资源定位符，简称网址，用于访问网络上的资源。

简单来说，每一个url，都对应着网络上的一个资源。

举例：

3、url的组成：协议、域名、资源路径

协议：规定浏览器和服务器之间传输数据的格式

举例：http协议，是超文本传输协议，规定了浏览器和服务器之间传输数据的格式。

域名：用于标记服务器在互联网中的位置。

举例：

资源路径：标记资源在服务器下的具体位置。

举例：

4、练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取新闻列表</title>
</head>
<body>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        /* 第二步：使用axios语法 */
            axios({
                url: 'http://hmajax.itheima.net/api/news'
            }).then(result => {
                console.log(result)
                
            })
    </script>
</body>
</html>

运行结果：