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回调函数接收结果,并做后续处理

举例:

html 复制代码
<!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、练习

html 复制代码
<!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、总结

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5