什么是Ajax？什么又是Axios？看了这篇文章，包你明白！_axios与ajax

目录

Ajax概述

Ajax作用

与服务器进行数据交互：

异步交互：

同步异步

同步请求发送过程：

异步请求发送过程：

Axios

---

Ajax概述

        我们都知道，我们前端页面中的数据，应该来自于后台，但是我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到Ajax技术。

Ajax作用

Ajax的作用有两点：

• 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

与服务器进行数据交互：

        前端资源被浏览器解析时缺少数据，这时前端就可以用Ajax想后端发出请求，后端接受到前端请求，从数据库中获取到前端需要的资源，然后响应给前端，前端就可以通过vue技术将数据展示到页面上。

异步交互：

        当我们用浏览器进行搜索时，下面联想出来的数据就算通过Ajax请求从后端服务器得到的，然而在我们打字过程中，就算我们不刷新页面，联想出来的数据也会不断变化，这是只针对搜索栏这局部模块的数据进行了数据的更新，这也就是不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。

同步异步

        针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，所以与之对应的有同步请求，接下来我们来对比一下二者的区别

同步请求发送过程：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步请求发送过程：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

Axios

        上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

Axios的使用比较简单，主要分为2步：

• 引入Axios文件

  <script src="js/axios-0.18.0.js"></script>
  

• 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

  • 发送 get 请求

    axios({
        method:"get",
        url:"http://localhost:8080/"
    }).then(function (response){
        alert(response.data);
    })
    

  • 发送 post 请求

    axios({
        method:"post",
        url:"http://localhost:8080/",
        data:"data"
    }).then(function (response){
        alert(response.data);
    });
    

  axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

  • method属性：用来设置请求方式的。取值为 get 或者 post。

  • url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。(eg:http://localhost:8080/ajax-demo1/AjaxDemo?username=zhangsan)

  • data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

  then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。