目录
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 可以获取到响应的数据。
-