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

相关推荐
华仔啊2 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel2 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴2 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel2 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫3 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin3 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学4 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室6 小时前
CSS高效开发三大方向
前端·css
昔人'6 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾6 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js