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>运行结果：
5、总结
