前端同步异步讲解--Ajax（axios进阶）的相关操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端同步异步讲解--Ajax（axios进阶）的相关操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：

之前我们讲到了数据在前后端传输是依赖xml文件，但是由于时代变迁，他也已经比逐步淘汰，json对象就逐步开始作为数据传输通道的桥梁，忘记的话可以去回顾文章对应的json对象

最全的前端知识之css与jsp介绍-CSDN博客文章浏览阅读1k次，点赞31次，收藏21次。ok了，宝子们，今天发布的是我自己理解的前端知识css以及jsp的相关知识。请各位观众老爷们查收CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”（层层叠加的样式），它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。内部式与外部式。https://blog.csdn.net/m0_74167954/article/details/135717338?spm=1001.2014.3001.5502

数据传输响应

在前后端进行的数据传输过程中，对于你的前端发送请求到服务端，服务端返回响应，一共两步共同实现对应的数据传输功能

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

同步异步数据传输比较

ok如大家所示，同步与异步的数据传输就是在等待处理的时候能否绕开进行下一步

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

当然更简单的理解呢，就是下面的，相信有部分宝子经历过高中学校的食堂制度当时我们食堂规定吃饭时间不能进行交谈，要站着排队背书，哈哈哈，现在想起来就是噩梦，当然这个制度最后也进行了废除，上面的例子和下面这个图相信可以帮助大家更好的理解啦！

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

AJOX介绍

Ajax（Asynchronous JavaScript and XML）是一种网页开发技术，通过使用 JavaScript 和 XML实现在不重新加载整个页面的情况下更新部分页面内容的功能。

作用

数据交换：通过Ajox发送请求到服务端，并获取服务端响应的数据

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，比如在你进行搜索的时候，给定一部分，就会出现许多的联想项，如图所示，仅仅在搜索框区间进行了对应的改变。

Ajox代码展示（因为Ajox会被后续的axios代替，所以这里就简单展示一下）

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

讲一下这里的代码部分函数功能

首先是script标签内部进行的dom操作的事件点击绑定，绑定了show函数，然后在内部创建了XMLHttpRequest对象，然后调用open以及send函数，以及onreadystatechange函数

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

那么我们接下来来详细说下对应的axios

Axios介绍

入门知识

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

方法函数->回调函数，用于成功之后的数据展示

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

介绍完入门知识之后我们可以来看代码层面啦。

代码及效果展示

当然我们首先要引入对应的axios对应的js文件，并且在后面创建对应的外部连接

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios-0.18.0.js"></script>
</head>
<body>
    <input type="button" value="按钮一" onclick="get()">
    <input type="button" value="按钮二" onclick="post()">
</body>
<script>
    function get()
    {
        axios({
            method:"get",
            url:"https://result.eolink.com/9Lhyt3xa576511f32e0851656db36ce61b5040e59803379?uri=/user/points.php"
        }).then(result =>{
            console.log(result.data);
        })
    }
    function post()
    {
        axios({
            method:"post",
            url:"https://result.eolink.com/9Lhyt3xa576511f32e0851656db36ce61b5040e59803379?uri=/user/check_login.php",
            // data:"id=1"
        }).then(result =>{
            console.log(result.data);
        })
    }
</script>
</html>

好的结果就是下面的，ok我们成功啦！

前端同步异步讲解--Ajax（axios进阶）的相关操作,web,前端