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

相关推荐
小小小小宇25 分钟前
业务项目中使用自定义eslint插件
前端
babicu12329 分钟前
CSS Day07
java·前端·css
小小小小宇33 分钟前
业务项目使用自定义babel插件
前端
前端码虫1 小时前
JS分支和循环
开发语言·前端·javascript
GISer_Jing1 小时前
MonitorSDK_性能监控(从Web Vital性能指标、PerformanceObserver API和具体代码实现)
开发语言·前端·javascript
余厌厌厌1 小时前
墨香阁小说阅读前端项目
前端
fanged1 小时前
Angularjs-Hello
前端·javascript·angular.js
lichuangcsdn1 小时前
springboot集成websocket给前端推送消息
前端·websocket·网络协议
程序员阿龙1 小时前
基于Web的濒危野生动物保护信息管理系统设计(源码+定制+开发)濒危野生动物监测与保护平台开发 面向公众参与的野生动物保护与预警信息系统
前端·数据可视化·野生动物保护·濒危物种·态环境监测·web系统开发
岸边的风1 小时前
JavaScript篇:JS事件冒泡:别让点击事件‘传染’!
开发语言·前端·javascript