一、Ajax回顾
1、Ajax介绍
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。
2、Ajax作用
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。
3、异步和同步
浏览器访问服务器的方式
同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作
4、代码演示
ajax.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %>
servlet package 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> 导包
2> 请求方式
get axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});
post axios.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测试
测试结果 post测试 修改代码
测试结果 注：本人测试需在edge浏览器，否则链接不上
3、总结
axios 使用get或者post方法,就可以发送请求then方法中的回调函数,会在请求成功或者请求失败的时候触发通过回调函数的形参可以获取响应的内容,或者错误信息
三、获取笑话案例
1、需求
通过vue+axios 完成一个获取笑话的案例.
2、接口
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
3、代码
代码
{{joke}}
注意：回调函数中不能直接获取this，需要定义变量传入 测试结果
参考阅读
您阅读本篇文章共花了：
发表评论