一、Ajax回顾
1、Ajax介绍
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。
2、Ajax作用
- Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。
3、异步和同步
浏览器访问服务器的方式
- 同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
- 异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作
4、代码演示
-
ajax.jsp
jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax</title> </head> <body> <input type="text"> <input type="button" value="jQuery发送异步请求" οnclick="run()"> </body> <script src="./jquery-1.8.3.min.js"></script> <script> function run(){ //ajax请求 $.ajax({ url:"${pageContext.request.contextPath}/ajax", async:true, data:{name:"张三"}, type:"post", dataType:"text", success:function (res) { console.log(res); alert("响应成功,res: " + res); }, error:function () { alert("响应失败！") } }); } </script> </html> -
servlet
javapackage com.example.ajax_demo01; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; @WebServlet(name = "AjaxServlet", value = "/ajax") public class AjaxServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1、获取请求数据 String name = request.getParameter("name"); System.out.println("ajax发送的数据：" + name); //模拟延时响应 try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } //2、响应数据 response.setContentType("html/text;charset=utf8"); response.getWriter().write("响应数据！"); } } -
运行tomcat，测试
二、axios
1、axios简介
axios是VUE中结合网络数据进行应用的开发，是目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便。
axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.
2、axios入门
1> 导包
js
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2> 请求方式
-
get
jsaxios.get(地址?key=value&key2=value2).then(function(response){},function(error) {});
-
post
jsaxios.post( 地址, {key:value,key2:value2}) .then( function(response){}, function(error){})
3> 和 jQuery 方式 对比
4> 入门案例
-
接口介绍
有两个公开接口可供测试使用
-
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 -
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败
-
-
测试代码
-
get测试
js<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>axios测试</title> </head> <body> <div id="app"> <input type="button" value="get请求" @click="get" /> </div> </body> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <script> var VM = new Vue({ el: "#app", data: {}, methods: { /* 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ get: function () { axios.get("https://autumnfish.cn/api/joke/list?num=1").then( function (res) { alert("请求成功！res: " + res); }, function (err) { alert("请求失败！err: " + err); } ); }, }, }); </script> </html> -
测试结果
-
post测试 修改代码
js<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>axios测试</title> </head> <body> <div id="app"> <!-- <input type="button" value="get请求" @click="get" /> --> <input type="button" value="post请求" @click="post" /> </div> </body> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <script> var VM = new Vue({ el: "#app", data: {}, methods: { /* 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ get: function () { axios.get("https://autumnfish.cn/api/joke/list?num=1").then( function (res) { alert("请求成功！res: " + res); }, function (err) { alert("请求失败！err: " + err); } ); }, /* 用户注册 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username:"用户民" 响应内容:注册成功或失败 */ post: function () { axios .post("https://autumnfish.cn/api/user/reg", { usernmae: "你好hello", }) .then( function (res) { alert("请求成功！res: " + res); }, function (err) { alert("请求失败！err: " + err); } ); }, }, }); </script> </html> -
测试结果
注：本人测试需在edge浏览器，否则链接不上
-
3、总结
- axios 使用get或者post方法,就可以发送请求
- then方法中的回调函数,会在请求成功或者请求失败的时候触发
- 通过回调函数的形参可以获取响应的内容,或者错误信息
三、获取笑话案例
1、需求
通过vue+axios 完成一个获取笑话的案例.
2、接口
js
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话3、代码
-
代码
js<!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> <div id="app"> <input type="button" value="获取一个笑话" @click="getJoke" /> <p>{{joke}}</p> </div> </body> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <script> var Vm = new Vue({ el: "#app", data: { joke: "", }, methods: { getJoke: function () { /* 请求地址:https://autumnfish.cn/api/joke 请求方法:get 请求参数:无 响应内容:随机笑话 */ var tmp = this; //回调函数中不能直接获取this，需要定义变量传入 axios.get("https://autumnfish.cn/api/joke").then( function (res) { //获取笑话,笑话在响应的data中 tmp.joke = res.data; }, function (err) {} ); }, }, }); </script> </html>注意：回调函数中不能直接获取this，需要定义变量传入
-
测试结果
