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、总结

相关推荐
Justin3go5 小时前
两年后又捣鼓了一个健康类小程序
前端·微信小程序
巴巴_羊7 小时前
xss和csrf
前端·xss·csrf
华子w9089258597 小时前
基于 Python Web 应用框架 Django 的在线小说阅读平台设计与实现
前端·python·django
黑客飓风7 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
烛阴8 小时前
让你的Python并发飞起来:多线程开发实用技巧大全
前端·python
旺代8 小时前
Vue3中的v-model、computed、watch
前端
excel9 小时前
微信小程序鉴权登录详解 —— 基于 wx.login 与后端 openid 换取流程
前端
Gazer_S9 小时前
【前端隐蔽 Bug 深度剖析:SVG 组件复用中的 ID 冲突陷阱】
前端·bug
蓝婷儿9 小时前
每天一个前端小知识 Day 7 - 现代前端工程化与构建工具体系
前端
mfxcyh10 小时前
npm下载离线依赖包
前端·npm·node.js